Game Physics - Building JavaScript Games for Phones, Tablets, and Desktop - page 327

tiles (which are the only tiles that the character can stand on). Let's assume for now that your
yet-to-be-written collision-detection algorithm will take care of this and keep track of whether the
character is on the ground by using a member variable:
this.onTheGround = true;
Sometimes it's necessary to sketch out a class in English (as opposed to JavaScript) before it's
written to allow you to write other parts of a game. This is also true in the case of collision detection.
You can't test a collision-detection algorithm until you build it in, but you don't want to build it in
until you've created the algorithm and tested it. One has to happen first, so you must mentally know
what's going on with the other and plan it or keep notes. The CollisionTest example is a program
I wrote to test the collision-detection algorithm independent of the game. You may find it useful
in some cases to write separate testing programs that help you understand how part of the code
should be working.
If this member variable is true , you know the character is standing on the ground. You can now change
the initial if instruction so it only allows a character to jump from the ground and not from the air:
if (powerupjs.Keyboard.pressed(powerupjs.Keys.space) && this.onTheGround)
this.jump();
If you're playing the game on a device without a keyboard (such as a tablet or a smartphone), you
have to handle player input differently. One way of doing this is to add a few buttons to the screen
that control the player character only if touch input is available. This is done when the Level object
is created:
if (powerupjs.Touch.isTouchDevice) {
var walkLeftButton = new powerupjs.Button(sprites.buttons_player,
ID.layer_overlays, ID.button_walkleft);
walkLeftButton.position = new powerupjs.Vector2(10, 500);
this.add(walkLeftButton);
var walkRightButton = new powerupjs.Button(sprites.buttons_player,
ID.layer_overlays, ID.button_walkright);
walkRightButton.position = new powerupjs.Vector2(walkRightButton.width + 20, 500);
walkRightButton.sheetIndex = 1;
this.add(walkRightButton);
var jumpButton = new powerupjs.Button(sprites.buttons_player,
ID.layer_overlays, ID.button_jump);
jumpButton.position = new powerupjs.Vector2(powerupjs.Game.size.x -
jumpButton.width - 10, 500);
jumpButton.sheetIndex = 2;
this.add(jumpButton);
}
Controlling the character is done in a way very similar to how you deal with keyboard input:
if (powerupjs.Touch.isTouchDevice) {
var jumpButton = this.root.find(ID.button_jump);
if (jumpButton.pressed && this.onTheGround)
this.jump();
}