Can someone help me make the paddles in the ponggame demo move sideways? I've added the keybinds:
this.controls = new KeyboardControls(this);
this.controls.bindKey('up', 'up', { repeat: true } );
this.controls.bindKey('down', 'down', { repeat: true } );
this.controls.bindKey('left', 'left', { repeat: true } );
this.controls.bindKey('right', 'right', { repeat: true } );
I've also changed the game engine:
processInput(inputData, playerId) {
super.processInput(inputData, playerId);
// get the player paddle tied to the player socket
let playerPaddle = this.world.queryObject({ playerId });
if (playerPaddle) {
if (inputData.input === 'up') {
playerPaddle.position.y -= 5;
} else if (inputData.input === 'down') {
console.log('you are moving down');
playerPaddle.position.y += 5;
} else if (inputData.input === 'left') {
console.log('you are moving left?');
playerPaddle.position.x -= 5;
} else if (inputData.input === 'right') {
console.log('you are moving left?');
playerPaddle.isMovingDown = true;
}
}
}
It wont work, any help would be greatly appreciated.
Sorry, someone solved it for me on slack. I had to compile it with "npm run-script build". It worked after that.
Related
I have some highcharts which are synchronized and use the following code to synchronise the crosshairs as the mouse is moved:
//catch mousemove event and have all charts' crosshairs move along indicated values on x axis
function syncronizeCrossHairs(chart) {
['mousemove', 'touchmove', 'touchstart'].forEach(function(eventType) {
var container = $(chart.container),
offset = container.offset(),
x;
container[0].addEventListener(eventType,
(function(evt) {
x = evt.clientX - chart.plotLeft - offset.left;
Highcharts.charts.forEach(ch => {
var e = ch.pointer.normalize(evt), // Find coordinates within the chart
points = [];
ch.series.forEach(s => {
var point = s.searchPoint(e, true);
if (point) {
point.setState();
if (s.visible) {
points.push(point)
}
}
})
if (points) {
var number = 0;
Highcharts.each(points, function(p, i) {
if (!p.series.visible) {
points.splice(i - number, 1);
number++;
}
})
if (points.length) {
ch.tooltip.refresh(points); // Show the tooltip
}
}
ch.xAxis[0].drawCrosshair(x, points[0])
})
}))
})
}
I am now getting the following console message:
Highcharts error #32: www.highcharts.com/errors/32/?Highcharts.each=Array.forEach
Highcharts.each: Array.forEach
Can someone advise how I can replace the Highcharts.each command in my code?
Thanks
I think that changing:
Highcharts.each(points, function(p, i) {
if (!p.series.visible) {
points.splice(i - number, 1);
number++;
}
})
to:
points.forEach((p, i) => {
if (!p.series.visible) {
points.splice(i - number, 1);
number++;
}
})
Should be enough. Please test it in your application and let me know if it helped.
Wherever you have a Highcharts.each just change it to a for loop. Here's a before and after example from my project with synced charts:
Before (Using the deprecated Highcharts.each way):
Highcharts.each(Highcharts.charts, function (chart) {
if (chart && chart !== thisChart) {
if (chart.xAxis[0].setExtremes) {
chart.xAxis[0].setExtremes(e.min, e.max, undefined, false, {
trigger: "syncExtremes"
});
}
}
});
And after, just simply changing it to a for loop:
for (let i = 0; i < Highcharts.charts.length; i++) {
let chart = Highcharts.charts[i];
if (chart && chart !== thisChart) {
if (chart.xAxis[0].setExtremes) {
chart.xAxis[0].setExtremes(e.min, e.max, undefined, false, {
trigger: "syncExtremes"
});
}
}
}
To my great surprise Lightbox2(http://lokeshdhakar.com/projects/lightbox2/) does not support swipe gestures out of the box...
I was not able to find any add on in order to support this behavior. Anyone has any suggestions a side from changing the entire plugin? :)
To summary, you must hide the navigation buttons and implement swiping, moving and sliding effect on the image.
You will need :
jquery.event.move
jquery.event.swipe
jquery ui slide effect, you can package it in the jquery ui download builder
maybe there's a simplest way to get/implement all of these 3 small dependencies... but that way works for me.
in the lightbox script, add a new LightboxOptions enableSwipeOnTouchDevices and set it to true :
this.enableSwipeOnTouchDevices = true;
add the following blocks after the this.$lightbox.find('.lb-next').on('click'... block to create the swiping events:
this.$lightbox.find('.lb-image').on("swiperight",function() {
$('.lb-image').effect("slide", { "direction" : "right", "mode" : "hide"} ,function(){
if (self.currentImageIndex === 0) {
self.changeImage(self.album.length - 1);
} else {
self.changeImage(self.currentImageIndex - 1);
}
})
});
this.$lightbox.find('.lb-image').on("swipeleft",function() {
$('.lb-image').effect("slide", { "direction" : "left", "mode" : "hide"} ,function(){
if (self.currentImageIndex === self.album.length - 1) {
self.changeImage(0);
} else {
self.changeImage(self.currentImageIndex + 1);
}
})
});
and rewrite the updateNav function like this to hide the navigation buttons:
Lightbox.prototype.updateNav = function() {
// Check to see if the browser supports touch events. If so, we take the conservative approach
// and assume that mouse hover events are not supported and always show prev/next navigation
// arrows in image sets.
var alwaysShowNav = false;
var enableSwipe = false;
try {
document.createEvent("TouchEvent");
alwaysShowNav = (this.options.alwaysShowNavOnTouchDevices)? true: false;
enableSwipe = (this.options.enableSwipeOnTouchDevices)? true: false;
} catch (e) {}
//if swiping is enable, hide the two navigation buttons
if (! enableSwipe) {
this.$lightbox.find('.lb-nav').show();
if (this.album.length > 1) {
if (this.options.wrapAround) {
if (alwaysShowNav) {
this.$lightbox.find('.lb-prev, .lb-next').css('opacity', '1');
}
this.$lightbox.find('.lb-prev, .lb-next').show();
} else {
if (this.currentImageIndex > 0) {
this.$lightbox.find('.lb-prev').show();
if (alwaysShowNav) {
this.$lightbox.find('.lb-prev').css('opacity', '1');
}
}
if (this.currentImageIndex < this.album.length - 1) {
this.$lightbox.find('.lb-next').show();
if (alwaysShowNav) {
this.$lightbox.find('.lb-next').css('opacity', '1');
}
}
}
}
}
};
I've used jquery mobile to detect swipeleft and swiperight. Then bind them to click .lb-next and .lb-prev. It's working now.
Here is my codepen.
PEC's solution worked for me with one modification on a Jekyll site.
Instead of:
this.enableSwipeOnTouchDevices = true;
We added this to /_includes/scripts.html after the dependencies and lightbox.js:
<script>
lightbox.option({
'enableSwipeOnTouchDevices': true,
})
</script>
The PEC solution is good, but it doesn't work anymore with the current version of lightbox (2.11.2). The effect() method doesn't exists anymore.
So the swiping methods should be updated:
this.$lightbox.find('.lb-image').on("swiperight",function() {
if (self.currentImageIndex === 0) {
self.changeImage(self.album.length - 1);
} else {
self.changeImage(self.currentImageIndex - 1);
}
return false;
});
this.$lightbox.find('.lb-image').on("swipeleft",function() {
if (self.currentImageIndex === self.album.length - 1) {
self.changeImage(0);
} else {
self.changeImage(self.currentImageIndex + 1);
}
return false;
});
Less fancy, but shorter and works.
In short: 'catch' swipe gesture and then trigger 'click' on next/prev button based on swipe direction.
let touchstartX = 0;
let touchendX = 0;
function handleGesture() {
if (touchendX < touchstartX) $(".lb-prev").trigger("click");
if (touchendX > touchstartX) $(".lb-next").trigger("click");
}
$(document).on("touchstart", ".lb-nav", e => {
touchstartX = e.changedTouches[0].screenX;
});
$(document).on("touchend", ".lb-nav", e => {
touchendX = e.changedTouches[0].screenX;
handleGesture();
});
I'm using Sencha Touch 2.3.1 and using a list defined like this :
{
xtype: 'list',
id: 'index_list',
infinite: true,
flex: 1,
scrollToTopOnRefresh: false,
disableSelection: true,
store: 'store_index'
}
List's store has got more than 300 records, that's why I put the flag "infinite" to true.
Problem is when I scroll very fastly up and down through the list, app freezes and I can't do anything else with UI.
Also tested, put infinite flag to false doesn't fix it.
Cannot reproduce if data are less than ~300 records.
Platforms : iOS 6, 7 (iPhone), not iPad.
Have you got any idea ?
Use this override works for me
Ext.define('InfiniteListScroll.override.TouchGesture', {
override: 'Ext.event.publisher.TouchGesture',
lastEventType: null,
changedTouchesId: null,
lastEventObject: null,
onEvent: function(e) {
console.log('InfiniteListScroll.override.TouchGesture - onEvent');
var type = e.type,
lastEventType = this.lastEventType,
touchList = [e];
if ( type == 'touchstart' ) {
if( this.changedTouchesId == null ) {
this.changedTouchesId = e.changedTouches[0].identifier;
this.lastEventObject = e;
}
else {
console.log('changedTouchesId NOT null, touchEnd event wasnt fired for corresponding touchStart event.');
this.onTouchEnd( this.lastEventObject );
}
}
if (this.eventProcessors[type]) {
this.eventProcessors[type].call(this, e);
return;
}
if ('button' in e && e.button > 0) {
return;
}
else {
// Temporary fix for a recent Chrome bugs where events don't seem to bubble up to document
// when the element is being animated with webkit-transition (2 mousedowns without any mouseup)
if (type === 'mousedown' && lastEventType && lastEventType !== 'mouseup') {
var fixedEvent = document.createEvent("MouseEvent");
fixedEvent.initMouseEvent('mouseup', e.bubbles, e.cancelable,
document.defaultView, e.detail, e.screenX, e.screenY, e.clientX,
e.clientY, e.ctrlKey, e.altKey, e.shiftKey, e.metaKey, e.metaKey,
e.button, e.relatedTarget);
this.onEvent(fixedEvent);
}
if (type !== 'mousemove') {
this.lastEventType = type;
}
e.identifier = 1;
e.touches = (type !== 'mouseup') ? touchList : [];
e.targetTouches = (type !== 'mouseup') ? touchList : [];
e.changedTouches = touchList;
this.eventProcessors[this.mouseToTouchMap[type]].call(this, e);
}
},
onTouchEnd: function(e) {
console.log('InfiniteListScroll.override.TouchGesture - onTouchEnd');
if (!this.isStarted) {
return;
}
if (this.lastMoveEvent) {
this.onAnimationFrame();
}
var touchesMap = this.touchesMap,
currentIdentifiers = this.currentIdentifiers,
changedTouches = e.changedTouches,
ln = changedTouches.length,
identifier, i, touch;
this.changedTouchesId = null;
this.updateTouches(changedTouches);
changedTouches = e.changedTouches;
for (i = 0; i < ln; i++) {
Ext.Array.remove(currentIdentifiers, changedTouches[i].identifier);
}
e = this.factoryEvent(e);
for (i = 0; i < ln; i++) {
identifier = changedTouches[i].identifier;
touch = touchesMap[identifier];
delete touchesMap[identifier];
this.publish('touchend', touch.targets, e, {touch: touch});
}
this.invokeRecognizers('onTouchEnd', e);
// Only one touch currently active, and we're ending that one. So currentTouches should be 0 and clear the touchMap.
// This resolves an issue in iOS where it can sometimes not report a touchend/touchcancel
if (e.touches.length === 1 && currentIdentifiers.length) {
currentIdentifiers.length = 0;
this.touchesMap = {};
}
if (currentIdentifiers.length === 0) {
this.isStarted = false;
this.invokeRecognizers('onEnd', e);
if (this.animationQueued) {
this.animationQueued = false;
Ext.AnimationQueue.stop('onAnimationFrame', this);
}
}
}
});
I'm creating a game where you as the player is holding a baseball bat and when you click the button you swing your bat. When you swing your bat you hit the enemy the enemy goes flying off in the opposite direction of where you hit them like a golf ball. I have done the moving and attacking function working but how can I register the hittest so it hits the enemy when facing towards it and the enemy going back. This is what I done so far:
package
{
import flash.display.MovieClip;
import flash.events.Event;
import flash.events.KeyboardEvent;
import flash.events.MouseEvent;
import flash.ui.Keyboard;
public class Player extends MovieClip
{
var walkSpeed:Number = 4;
var walkRight:Boolean = false;
var walkLeft:Boolean = false;
var walkUp:Boolean = false;
var walkDown:Boolean = false;
var attacking:Boolean = false;
public function Player()
{
stage.addEventListener(KeyboardEvent.KEY_DOWN , walk);
addEventListener(Event.ENTER_FRAME, Update);
stage.addEventListener(KeyboardEvent.KEY_UP, stopWalk);
stage.addEventListener(MouseEvent.CLICK, attack);
}
function walk(event:KeyboardEvent)
{
if (event.keyCode == 68)
{
walkRight = true;
}
if (event.keyCode == 87)
{
walkUp = true;
}
if (event.keyCode == 65)
{
walkLeft = true;
}
if (event.keyCode == 83)
{
walkDown = true;
}
}
function Update(event:Event)
{
if (attacking == true)
{
walkRight = false;
walkLeft = false;
walkUp = false;
walkDown = false;
}
else if (attacking == false)
{
var dx = parent.mouseX - x;
var dy = parent.mouseY - y;
var angle = Math.atan2(dy,dx) / Math.PI * 180;
rotation = angle;
if (walkRight == true)
{
x += walkSpeed;
gotoAndStop('walk');
}
if (walkUp == true)
{
y -= walkSpeed;
gotoAndStop('walk');
}
if (walkLeft == true)
{
x -= walkSpeed;
gotoAndStop('walk');
}
if (walkDown == true)
{
y += walkSpeed;
gotoAndStop('walk');
}
}
}
function stopWalk(event:KeyboardEvent)
{
if (attacking == false)
{
if (event.keyCode == 68)
{
event.keyCode = 0;
walkRight = false;
gotoAndStop('stance');
}
if (event.keyCode == 87)
{
event.keyCode = 0;
walkUp = false;
gotoAndStop('stance');
}
if (event.keyCode == 65)
{
event.keyCode = 0;
walkLeft = false;
gotoAndStop('stance');
}
if (event.keyCode == 83)
{
event.keyCode = 0;
walkDown = false;
gotoAndStop('stance');
}
}
}
function attack(event:MouseEvent)
{
if (attacking == false)
{
attacking = true;
gotoAndStop('attack');
}
}
}
}
When the character's direction changes, change a variable depending on the way they are now facing, for example; direction = 0 when they are facing down, 1 when they are facing right, etc. Then use this and the enemy's position to work out whether or not the enemy has been hit. For making the enemy fly back, you would get the character's direction to work out which way they would fly back. I would give some example code to help explain, but I'm on my tablet.
I'm new to AS3 and would love some help with collision detection. I'm currently making a game with a similar concept to robot unicorn attack (continuous, 'infinite', level); sidescrolling running platformer. I have found 0 tutorials for a continous/looping running style platformer, so I've come here! I have a player who is stationary, the platforms are scripted to move to the left of the screen for the scrolling/running effect. I have three instances of a the platform on the stage, however the player will only react to the collision with one of them. Collision is being detected from all platforms.
The code below is for the collisions which executes inside my game loop function. Help would be hugely appreciated! :D Thanks.
for (var i = 0; i < numChildren; i++)
{
if (getChildAt(i) is Platform)
{
var platformHolder = getChildAt(i) as Platform
if (platformHolder.hitTestPoint(player.x + leftBumpPoint.x, player.y + leftBumpPoint.y, true))
{
trace("left hit")
leftBumping = true;
}
else
{
leftBumping = false
}
if(platformHolder.hitTestPoint(player.x + rightBumpPoint.x, player.y + rightBumpPoint.y, true))
{
trace("right hit");
rightBumping = true;
}
else
{
rightBumping = false;
}
if(platformHolder.hitTestPoint(player.x + upBumpPoint.x, player.y + upBumpPoint.y, true))
{
trace("Up hit");
upBumping = true;
}
else
{
upBumping = false;
}
if(platformHolder.hitTestPoint(player.x + downBumpPoint.x, player.y + downBumpPoint.y, true))
{
trace("down hit");
downBumping = true;
}
else
{
downBumping = false;
}
}
}
if(leftBumping)
{
if(xSpeed < 0)
{
xSpeed *= -0.5;
}
}
if(rightBumping)
{
if(xSpeed > 0)
{
xSpeed *= -0.5;
}
}
if(upBumping)
{
if(ySpeed < 0)
{
ySpeed *= -0.5;
}
}
if(downBumping)
{
if(ySpeed > 0)
{
ySpeed *= -0.5;
}
}
else
{
//if not touching the floor
ySpeed += gravityConstant;
}
If(platformholder[i].hitTestObject(player))
Add i the very reason you make a loop