---

previousnext

Computer animations are all fake: there is no movement. All that is done is to draw a static image (aka frame), display it for a short while, erase it, draw a slightly modified one, etc.

We've already made a ball, now let's make it move. In order to do so, we'll create a move_ball() function which moves the ball from its current position. We also create an update() function which moves the ball, clear the screeen and draw the ball to its new position, thus giving the illusion of movement. In order to do so, we'll use a call to setTimeout(function, timeout) to call the update() function after starting to run the code, and repeat this at each call for update(). The timeout value has to be specified in milliseconds (ms). We will choose an indirect method by specifying a number of frames per seconds, or FPS, so that the timeout will be given by 1000 ms / FPS.

// global variables ... to be avoided usually var BALL_x, BALL_y, BALL_r, BALL_dx, BALL_dy; var CANVAS_WIDTH, CANVAS_HEIGHT; var FPS = 40; var ctx; function init(){ var $ = parent.$; var canvas = $('#canvas', document)[0]; ctx = canvas.getContext("2d"); CANVAS_WIDTH = canvas.width; CANVAS_HEIGHT = canvas.height; BALL_x = 200; BALL_y = 200; BALL_r = 16; BALL_dx = 3; BALL_dy = 5; } function move_ball(){ BALL_x += BALL_dx; BALL_y += BALL_dy; } function draw_ball(){ ctx.beginPath(); ctx.arc(BALL_x, BALL_y, BALL_r, 0, Math.PI*2, true); ctx.fill(); } function update(){ move_ball(); ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); draw_ball(); setTimeout(update, 1000/FPS); } function play() { init(); draw_ball(); setTimeout(update, 1000/FPS); }

Additional explanation

You may have noticed that I have also introduced some variables to keep track of the canvas width and height, and use jQuery to obtain these values rather than using some hard coded values. This is because, at some point, I might want to change the canvas size, perhaps because I will want to play this game on a smart phone using a smaller canvas. Regardless of the reason, it is always preferable to either avoid using hard coded values or, if using them, to define them in an easy to find location, like the beginning of a file.

Is there a bug?

Click on the "play" button multiple times. Notice how the ball speeds up. Can you figure out what cause this and fix it before I do in the next section?

previousnext