How to Jump and Run on Platforms in Your HTML5 Game - dummies

How to Jump and Run on Platforms in Your HTML5 Game

By Andy Harris

The platform “jump and run” genre has long been a staple arcade genre for good reason. It provides a nice interactive experience for your HTML5 game and is relatively easy to modify for many different kinds of games.

The essential element of a platform game is — well — platforms. The action usually happens with a side view and a player character that responds to gravity. Normally, the player will jump around on platforms and fight enemies by shooting, jumping, or melee combat.

My prototype shows the essential features. It includes a player character that can jump and land on platforms. Draggable platforms are included so you can edit the scene and see how the character interacts with various platform configurations.


Jump and land game codes

The key to a side-scrolling game is the jumping and landing mechanic. Use a falling property to track whether the character should respond to gravity or not. Here’s the code from the checkKeys() method that reads the up arrow and makes the character jump.

   if (keysDown[K_UP]){
    if (this.falling == false){
     this.y -= 5;
     this.falling = true;
     this.addVector(0, 15);
    } // end if
   }else {
   }// end if

The checkFalling() function checks each of the blocks. If the character is not touching any of the blocks, set falling to true. This will make the character fall once it moves off of a block.

How to come in for a landing

The interaction between the character and the blocks is important because you want the character to stop moving before it hits a block. This requires a technique called predictive collision detection, which sounds a lot more complicated than it is. Here’s the mechanism:

  1. Move the element as normal.

    Do the calculations to move the object (in this case the character) as normal. Note that the character isn’t drawn yet, but new x and y values have been determined by adding dx and dy.

  2. Check for a collision.

    Check to see if the character has collided with anything (in this case, each block in the array of blocks).

  3. If a collision occurs, back up the character.

    You’re checking for a collision, but you don’t want the character to overlap with the block. Instead, you’re interested in knowing whether the current motion vector would cause a collision.

  4. Subtract dx from x, dy from y.

    A collision has been detected, so detract that collision by subtracting the motion vector. This results in the sprite being where it started before the collision was detected.

  5. Set the sprite’s speed to zero.

    Set the sprite’s speed to zero so the next frame doesn’t cause the sprite to crash into the block again.

The easiest way to get the predictive behavior is to add a backup() method to the Sprite object, which can be called on any type of collision:

  tCharacter.backup = function(){
   //I’m overlapping something I shouldn't share space with
   //back up to where I was before the collision was detected
   X = this.x - this.dx;
   Y = this.y - this.dy;
   this.setPosition(X, Y);
  } // end backup

How to make draggable blocks

This game features another very interesting feature: Each block can be dragged to a new position so you can experiment with other block placements. Making any sprite draggable is relatively easy. Simply check to see if the block currently is being clicked. If so, set its position equal to the mouse position:

  tBlock.checkDrag = function(){
   //allow the block to be draggable
   if (this.isClicked()){
    this.setPosition(scene.getMouseX(), scene.getMouseY());
   } // end if
  } // end checkDrag

How to improve the platform game

The platform game is open to many kinds of enhancements:

  • Use multiple levels. The default blocks are easy to build and work with, but they aren’t very interesting. Experiment with different block shapes and positions to build interesting levels. You can store the block positions in arrays to make new levels, and simply reuse the blocks.

  • Consider a tile-based approach. The platform example uses an arbitrary block placement scheme, but you can also use a tile-based approach.

  • Add goals and enemies. An obvious improvement to this game would be to include some goal to reach with some obstacle in the way. Consider how you might implement enemy characters. Will they move? Will they shoot? Also consider adding powerups to improve jumping speed, add a ranged weapon, or whatever else you can imagine.

  • Add more firepower. Add a weapon to the character so it can shoot. In side scrollers, the weapon normally fires horizontally, but you can play around to get the behavior you want.

  • Improve the physics. The dynamics of this game work pretty well, but you can improve them with a bit more tweaking. Follow the general outline of the existing program, but see if you can make it work exactly like what you want.