Initially, I was going to ask if there is a way of moving Codey diagonally because in my first attempt at a solution I used a series of if…else conditionals to implement movement on key presses.
However, after some experimentation I figured it out.
So… for anyone who made the same mistake that I did, this is what happened.
SOLUTION 1:
if(gameState.cursors.right.isDown){
gameState.codey.x += 5;
}
else if(gameState.cursors.left.isDown){
gameState.codey.x -= 5;
}
else if(gameState.cursors.up.isDown){
gameState.codey.y -= 5;
}
else if(gameState.cursors.down.isDown){
gameState.codey.y += 5;
}
This solution let me move Codey up, down, left and right. But, it didn’t let me move him diagonally.
This is because if…else statements are exclusive. If a condition in one of the statements is met, all the rest are skipped.
So… when I pressed ‘right’, my conditional that looked for ‘right’ press was executed and I would move right etc.
But… when I pressed right AND up, because my conditional that looks for the ‘up’ key press was after the conditional that looks for ‘right’, the code from the ‘up’ conditional would be skipped and not execute.
So… what I had coded was a set of priority instructions for Codey. He preferred right, then left, then up, and then down. If I held down right and then left, I would keep on going right. If I held down down and then up, I would start going down then as soon as the up key was pressed I would shoot up etc.
But I didn’t realise this at the time.
So my initial solution was this monstrosity:
//increases x coordinate if only right button is pressed
if(gameState.cursors.right.isDown && !(gameState.cursors.up.isDown || gameState.cursors.down.isDown || gameState.cursors.left.isDown)){
gameState.codey.x += 5;
//decreases x coordinate if only left button is pressed
} else if (gameState.cursors.left.isDown && !(gameState.cursors.up.isDown || gameState.cursors.down.isDown || gameState.cursors.right.isDown)){
gameState.codey.x -= 5;
//decreases y coordinate if only up button is pressed
} else if (gameState.cursors.up.isDown && !(gameState.cursors.right.isDown || gameState.cursors.left.isDown || gameState.cursors.down.isDown)){
gameState.codey.y -= 5;
//increases y coordinate if only down button is pressed
} else if (gameState.cursors.down.isDown && !(gameState.cursors.right.isDown || gameState.cursors.left.isDown || gameState.cursors.up.isDown)){
gameState.codey.y += 5;
}
I made conditionals that excluded multiple key presses.
I then added the following:
//increases x and decreases y coordinates when right and up are pressed together
} else if (gameState.cursors.right.isDown && gameState.cursors.up.isDown){
gameState.codey.x += 5;
gameState.codey.y -= 5;
//increases x and y coordinates when right and down are pressed together
} else if (gameState.cursors.right.isDown && gameState.cursors.down.isDown){
gameState.codey.x += 5;
gameState.codey.y += 5;
//decreases x and y coordinates when left and up are pressed together
} else if (gameState.cursors.left.isDown && gameState.cursors.up.isDown){
gameState.codey.x -= 5;
gameState.codey.y -= 5;
//decreases x and increases y coordinates when left and down are pressed together
} else if (gameState.cursors.left.isDown && gameState.cursors.down.isDown){
gameState.codey.x -= 5;
gameState.codey.y += 5;
}
I made conditional statements for each possible combination of two keys that would make Codey move diagonally.
This made diagonal movement possible but was very lengthy.
After reflecting a bit more on the code, and googling a hunch about the difference between if…else and if…if, I realised that I could do exactly the same thing with much simpler code:
if(gameState.cursors.right.isDown){
gameState.codey.x += 5;
}
if(gameState.cursors.left.isDown){
gameState.codey.x -= 5;
}
if(gameState.cursors.up.isDown){
gameState.codey.y -= 5;
}
if(gameState.cursors.down.isDown){
gameState.codey.y += 5;
}
In this code, every if statement is checked, even if one is executed. By getting rid of the else, I was getting rid of the implied ‘break’ from the if… else sequence after a successful execution.
So for this if… if solution, if I click right and down, the conditionals for both right and down are executed, allowing for diagonal movement.
The only question I really have remaining, which I would really appreciate an answer on if anyone reads this far lol, is this:
Why, if I press THREE keys (such as up, down and right), do I only get the execution of the first two keys I press?
For example, if I press up > left > right, then if all the code is executed I would expect to first go up, then go diagonally up and left, and then to cease movement on the x coordinate as right and left cancel out but still continue up on the y coordinate. However, regardless of the order in which I press three keys down, Codey, bless him, can only process two key presses and seems to completely ignore three or four. This also happened when I then tried to implement this with my if…else version.
Is this a limit to phaser’s ability to execute multiple changes to a game object each update? Or am I not seeing something in my code?
Thanks if you read this far and I hope it was helpful!!!
I made Codey bounce!!!
In my shenanigans of using a million if...else statements I made this:
//bounces up and down if both up and down are pressed
else if (gameState.cursors.up.isDown && gameState.cursors.down.isDown){
switch(gameState.codey.bounce) {
case 3:
gameState.codey.bounce = -3;
break;
case -3:
gameState.codey.bounce = 3;
break;
default:
gameState.codey.bounce = -3;
break;
}
gameState.codey.y += gameState.codey.bounce;
//bounces right and left if both up and down are pressed
} else if (gameState.cursors.right.isDown && gameState.cursors.left.isDown){
switch(gameState.codey.bounce) {
case 3:
gameState.codey.bounce = -3;
break;
case -3:
gameState.codey.bounce = 3;
break;
default:
gameState.codey.bounce = -3;
break;
}
gameState.codey.x += gameState.codey.bounce;
}
I made conditional statements for if the up and down keys were pressed, and for if the right and left keys were pressed. When this happened, I created a new attribute for Codey called bounce (which gave how big the bounce would be) and then using a case-switch alternated between its value being negative and positive every time the update() scene was rerun. This results in him going up and then down by the value of bounce every cycle. Because why not,