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

This is a very nice example of how you can automatically adapt the interface of your game to
different devices. The buttons are added only when a touch display is available. Another option
would be to use built-in sensors in the device, such as an accelerometer. Doodle Jump is a good
example of a game that uses such sensors to control the character.
… And Falling
The only place where you're currently changing the y -velocity is in the handleInput method, when
the player wants to jump. Because the y -velocity indefinitely keeps the value of 1100, the character
moves up in the air, outside of the screen, out of the planet's atmosphere, and into outer space.
Because you're not making a game about bombs in space, you have to do something about this.
What you forgot to add to the game world is gravity .
You can follow a simple approach to simulate the effect of gravity on the character's velocity. You
add a small value to the velocity in the y direction in each update step:
this.velocity.y += 55;
If the character has a negative velocity, this velocity slowly becomes smaller until it reaches zero
and then starts to increase again. The effect is that the character jumps to a certain height and then
starts falling down again, just like in the real world. However, the collision-detection mechanism now
becomes even more important. If there is no collision detection, the character will start falling down
at the start of the game!
Collision Detection
Detecting collisions between game objects is a very important part of simulating interacting
game worlds. Collision detection is used for many different things in games: detecting whether
the character walks over a power-up, detecting whether the character collides with a projectile,
detecting collisions between the character and walls or floors, and so on. Given this very common
occurrence, it's almost strange that you didn't need collision detection in the previous games. Or
didn't you? Look at this code from the update method in the PaintCan class from the Painter game:
var ball_center = Game.gameWorld.ball.center;
var ball_position = Game.gameWorld.ball.position;
var distance = ball_position.add(ball_center).subtractFrom(this.position)
.subtractFrom(this.center);
if (Math.abs(distance.x) < this.center.x && Math.abs(distance.y) < this.center.y) {
this.color = Game.gameWorld.ball.color;
Game.gameWorld.ball.reset();
}
What you're doing here is detecting a collision between the ball and the paint can (although in
a very rudimentary fashion). You take the position of the center of each object and see if the
distance between those two positions is smaller than a certain value. If so, you say they collide,
and you change the color of the can. If you look at this case more closely, you can see that you're