24 Games and Animations

Animation refers to any picture in which elements seem to move or change over time. The basic technique in any form of animation is to present a series of animation frames (i.e. pictures) one after another very quickly, with each frame slightly different from the last. For example, an object might move very slightly to the right or grow slightly from frame to frame while the rest of the picture remains unchanged. If this is done quickly enough, the human eye will be fooled into seeing smooth motion.

To animate a canvas element using JavaScript, we need three things:

1. Variables that specify important details about the animation (e.g. x and y positions, colors, sizes, of animated objects etc.)
2. A function that updates these variables and then redraws the canvas using the new values.
3. A way to repeatedly trigger the update function.

We’ll start with item 3 from the list above. 

JavaScript Timers

JavaScript functions are called in response to events. If you want a function to be called repeatedly, or just once but at some time in the future, you can schedule a timer event. The window object contains a setTimeout function to trigger an event some time in the future, and a setInterval function to trigger an event repeatedly at set intervals.

To trigger an event repeatedly, you can use the following function call:

setInterval(function, interval);

The arguments are the function you want to call when a timer event happens, and the interval in milliseconds between each timer event.

For example, if you want to call a function named tick every half a second (500 milliseconds), the command would be:

setInterval(tick, 500);

To call a function just once, but at some time in the future, use the following command to schedule a single timer event:

setTimeout(function, interval);

The parameters are the same as setInterval, but the function you specify will only be called once, after interval milliseconds.

function hi() {
    console.log("Hello");
} 
setTimeout(hi,2000);

setInterval(hi,1000);

Both setTimeout and setInterval return an integer id for the timer you have created. If you want to stop a timer, you can do so with the clearTimeout function. But you have to have saved the id of the timer in a variable.

let i=1;
let timerId = setInterval(function(event) {
    console.log(i++)
}, 500);

clearTimeout(timerId);

Animation is about repeatedly updating variables and redrawing the scene. The animation variables need to be global (or at least not local to the update function). To reduce clutter, it’s a good idea to encapsulate all the relevant variables for any object you are animating into a single JavaScript object.

Suppose we’re animating a simple ball object. Our object might look like this:

let ball = {
    x: 100, y: 200, 
    xSpeed: -1, ySpeed: -1, 
    red: 255, green: 0, blue: 0, 
    size: 10
};

The single ball variable now holds all the important information about a single ball: the x and y location, some drawing information (size and color), and a speed vector represented as xSpeed and ySpeed. On each animation frame, the x and y values will be changed according to this speed.

The Update Function

Animation is about repeatedly updating variables and redrawing the scene. The last piece of this system is an update function. This function will be called repeatedly by setInterval and do the following:

1. Update the animation variables (for example, ball.x = ball.x + ball.xSpeed).
2. Clear the canvas (ctx.clearRect(0, 0, c.width, c.height)).
3. Redraw the scene on the canvas using the updated animation variables.

For the appearance of smooth motion, the setInterval function should be used to trigger a call to updateAnimation about 60 times per second. That works out to an interval of approximately 16 milliseconds.

let myImage = new Image();
myImage.src = "images/myImageFile.jpg";

Once the image is loaded, you can draw it on the canvas in response to an event.

ctx.drawImage(myImage, x, y);

To play a sound, you have to create an Audio object, then load an audio file into it, then play it. Creating the Audio object and loading the audio file should be done once and stored in a global variable.

let myAudio = new Audio("sounds/myAudioFile.mp3");

Once the audio is loaded, you can play it any time. This is done in two steps.

myAudio.load(); // reset the sound 
myAudio.play(); // play the sound

To deal with this problem for images, you can set up a load event listener like this:

let myImageReady = false;
myImage.addEventListener("load", function(event) {
    myImageReady = true;
});

The above listener sets a global Boolean flag called myImageReady to true to let the rest of the app know the image is ready. Other listeners can check this flag before responding to events that would require the image.

The solution for audio is similar but uses the canplaythrough event:

let myAiduoReady = false;
myAudio.addEventListener("canplaythrough", function(event) {
    myAudioReady = true;
});

In this case, myAudioReady will be set to true once the sound can be played through from beginning to end.

1. A set of global variables containing the moveable objects in the game. Each game object might store the position, speed, direction, size, color, and other attributes required to draw and animate that object.
2. You will also also need variables to control the state of the game (game on, paused, game over, current score, and so on). You could encapsulate these variables into a single game object.
3. A set of functions that are called in response to keyboard and mouse events. These function should make changes to the global variables that control the player objects in the game.
4. An update function that is called once every 16 milliseconds.

The primary job of update is to draw the current frame. But before it does that, it should update the positions of all the objects based on the relevant variables. It should also check for collisions between objects or between objects and the edges of the screen and make changes as a result (reverse speeds to simulate a bounce, increase the score, mark an alien as “dead”, end the game, etc.)

Here are a few extra tips to help you out:

1. An object’s direction and speed can be represented as a vector, using a 2-element array or two variables for xSpeed and ySpeed. Add these variables to x and y respectively to move an object one step.
2. You don’t have to use integers. If you set the x and y speeds to -0.5 and 0.25 you will get an object that moves slowly to the left and down.
3. To make an object bounce, you can reverse its speed (if it’s positive make it negative and vice-versa).  If you reverse both, it will bounce back the way it came. If you reverse only the x speed it will seem to bounce off a vertical surface. If you reverse the y speed it will seem to bounce off a horizontal surface. This simple idea can be fiddly to implement correctly, though.
4. Gravity can be simulated by adding a small amount (e.g. 0.01) to the ySpeed of an object at every call to updateGame.
5. Collisions can be approximated by measuring how close two objects are to one another. Use their x and y locations to compute the distance between them using the length of a line segment formula. If they are too close, it’s a collision.

That’s it. The rest you will have to work out for yourself. Happy gaming!