In this recipe, we will look at implementing a jumping behavior for the player. In order to implement this feature, we will need to adjust that section of the game framework, which is responsible for detecting and updating user input. By doing this, we can determine when the player has pressed either the Space bar key, the W key, or the up arrow key in order to make the player jump.
In order to implement jumping behavior, we will need to implement additional behaviors within the
Playerobject. Open this object and declare the following variables at the top of the object:this.maxJump = 64; this.jumpTime = 1; this.jumpVelocity = ((Math.PI / 2) / this.jumpTime); this.position = 0; this.terminalVelocity = 1.5; this.isOnGround = true;
These variables are responsible for the characteristics of the jump behaviors and they also determine the maximum height the player can jump, the time taken, the speed and trajectory of the jump, deceleration, and whether or not the player is on the ground before jump they can jump.
The next stage is to determine whether or not the user has pressed either the Space bar key, the W key, or the up arrow key. This is done in the same way as we detected the user input in previous recipes. We also need to check whether or not the player is on the ground and if they are only then can we allow them to jump.
if((key.keyCode == 32 || key.keyCode == 38 || key.keyCode == 87) && this.isOnGround) { this.isOnGround = false this.position = 0; }Next, we need to implement a check to see if the player is jumping and if so their position and speed needs to be updated until they have collided with the ground.
if(!this.isOnGround) { var prevPosition = this.position; this.position += this.jumpVelocity * deltaTime; if(this.position >= Math.PI) { this.y += this.maxJump / this.jumpTime * this.terminalVelocity * deltaTime; } else { this.y -= (Math.sin(this.position) - Math.sin(prevPosition)) * this.maxJump; } }We then need to check if and when the player has collided with the levels terrain, if so then we change the player's ground state to
true. If the player has not collided with the terrain we update the player's jump height and speed.var checkCollisionLeft = this.level.CurrentTile(this.x); var checkCollisionRight = this.level.CurrentTile(this.x + this.frameWidth); var heightLeft = this.level.TerrainHeight(checkCollisionLeft); var heightRight = this.level.TerrainHeight(checkCollisionRight); var maxHeight; if(heightLeft > heightRight) maxHeight = heightLeft else maxHeight = heightRight; var playerHeight = context.canvas.height - (this.y + this.texture.height); if(maxHeight >= playerHeight) { this.y = (context.canvas.height - maxHeight - this.texture.height); this.isOnGround = true; this.position = 0; } else if(this.isOnGround) { this.isOnGround = false; this.position = (Math.PI / 2); }
We start off by declaring a number of variables that are used to reflect the player's behavior when jumping. These variables include the maximum jump height, time taken to jump, the speed and direction of the jump, as well as a Boolean variable that checks whether or not the player is on the ground.
The next step we took was to determine whether the user had pressed the Space bar key, the W key, or the up arrow key. If the player has pressed either of these keys and is on the ground then the player begins to jump. Depending on the keys pressed during the jump, the player will either jump straight up and return to its initial position or will jump and follow the path of a sine wave.
When the player reaches the peak of the wave then they will begin to decelerate at a speed of his/her initial jump speed multiplied by the terminal velocity value previously declared. This can be seen in the next recipe which employs a series of checks to determine whether the player is not on the ground, if so then we check where on the path of the sine wave the player is. The player's speed and position are then updated to reflect the player's position in the air.
Finally, we then employ a number of statements that are used to check if the player has collided with the terrain. Each of these collision detection statements check whether the left-hand side or right-hand side of the player has collided with the terrain. If the player has collided with the terrain, we change the IsOnGround Boolean variable to true. However if the player is not on the ground and was previously on the ground then they are falling and their speed and position is adjusted accordingly until grounded.