Knowing What the Player Is Doing - Building JavaScript Games for Phones, Tablets, and Desktop - page 55

Chapter 5
Knowing What the Player
Is Doing
In this chapter, you start to create a game called Painter. In this game, you need to show sprites
that move on the screen. You've already seen a few examples of loading and displaying sprites.
Also, you've seen that it's possible to use the current time information to change the position of a
sprite. You build on these examples to begin creating Painter. Furthermore, you learn how to deal
with player input in your game. You see how to retrieve what the player is doing and how the game
world changes depending on that information. You start with a simple extension of the FlyingSprite
program that draws a balloon at the position of the mouse pointer. The next chapter examines other
types of input, such as keyboard and touch input.
A Sprite Following the Mouse Pointer
Now that you know how to display sprites on the screen, let's see if you can use player input to
control a sprite's position. To do that, you have to find out the current position of the mouse. This
section shows you how to retrieve this position and how to use it to draw a sprite that follows the
mouse pointer.
Retrieving the Mouse Position
Have a look at the program Balloon1 in the topic's samples. There isn't a lot of difference between it
and the FlyingSprite program. In FlyingSprite, you calculate the position of the balloon by using the
system time:
var d = new Date();
Game.balloonPosition.x = d.getTime() * 0.3 % Game.canvas.width;
57