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);
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?
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
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
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.