Lesson 11

Random Numbers

Generating a random number

At the moment, our canvas elements are displaying the same image. This won't work for our snap game! We can put our images in an 'array' and use a random number to select an image randomly.

1. Delete the background image line in the CSS

Before we start making our image randomly cycle, delete the line in our CSS which adds the image1.jpg as the background-image: background-image:url(image1.jpg);

We are going to change the image dynamically using JavaScript.

2. Create an array

Create an array in script.js to define which images to use in your game. Use the URLs of your images surrounded in quote marks. (The code above is just a sample, and might not link to the images you downloaded. You need to use the images names you sourced in Lesson 8!)

What is an array?

An array is a collection of variables or objects. Something like our collection of images, because it is a list, will be coded as an array in JavaScript.

3. Create number variables

We want our game to randomly cycle through the images. To do this we need to create a random number for each.

Create two new variables in script.js to store the random number. We could use any names here, but 'num1' and 'num2' are short and clear.

4. Random number selection

Now we put a random number in each variable. This is done with a native JavaScript 'Math' function.

What is Math.floor and Math.random?

'Math Random' will generate a random number for us, and 'Math Floor' will make sure it is a single digit number instead of one with lots of decimal places.

5. Test random numbers

We should test if our random number generator is working okay. We could use an alert function again, however there is a more sophisticated way of testing our code. Every browser has a 'developer console' which shows the live activity of any JavaScript running on a website.

Click 'Publish' and 'Update published version', then click on the link to see your app preview. If you're using the Chrome browser from the toolbar select View > Developer > JavaScript Console.

This will open a panel at the bottom of your screen where you should see the random results of your Math function. If you refresh the page you should see a new pair of random numbers.

See *The Console for more information about this panel.

How do I see the console in other browsers?

In Firefox, Safari and Chrome if you right click you should see the ‘inspect element’ option. This will load up a developer menu. Within this menu, on the far right (it’s second from the left on Firefox), you should see a ‘console’ tab, which will show you the output of the console.

*The Console

The console displays diagnostic information about the web page being displayed.

The console has two purposes.

1) It is a place to output diagnostic information like JavaScript and CSS errors and any information passed to the console.log() function

2) It is an interface in your browser where you can execute JavaScript commands directly in your browser. This lets you test out JavaScript commands before adding them to a script.

Go to the next lesson

index.html

style.css

the web page

New Window
Next Lesson