Lab - Arrays and Loops: Memory game
- Define and call several JS functions
- Practice with JS arrays and for-loops
- Read from input elements
- Output on the console and write onto the html page itself
- Set up the logic for a significant application
Task 1: Set up images in the html document
lab13 folder from the download directory. Examine the downloaded material and open
memoryGame.html file in your text editor. Add the html code needed to show three
buttons with the image of the question mark (which can be found in the
Give the three buttons ids
0, 1, and 2 respectively.
(You can consult material from the lab on the Index Cards game, if you need to.)
Test your html page to make sure these buttons show nicely on the page.
Now, notice how similar these three sets of tags are, and in particular, notice where they differ.
Task 2: Define the start() function
memoryGameJS.js file, define a function, named
start(), which will add to the page
six buttons -similar to the ones in the previous task-, each with the question mark image on it.
The html tags you wrote in Task 1 should be your guide here.
We would like the
start() function to be invoked as soon as the page loads in the browser's window.
In order to do so, update the
body tag to look like this:
Task 3: Start the playCard(num) function
playCard(num) function will be called when anyone of the buttons is clicked.
When it is called from the first button, it will show the first image from the
When called from the second button, it will show the second image, etc.
Therefore it should take an integer as input, which is the id of the button that was clicked. Attach the
function to each button by adding to each button's tag:
Start by adding some trivial statement in this method -something like an alert() let's say-. Test that indeed when you click on any button, you see this alert.
Now add some code to the function so that when the user clicks on a button, the corresponding
image from the
paths array replaces the question mark:
--the first button will show paths image,
--the second button will show paths image, etc.
To do so, the program needs to remember the numbers (i.e button ids) of the two buttons that were clicked
in a round. For that, add two global variables, right next to the
var currentCard1Index; var currentCard2Index;
As their names suggest, we will use them to keep track of the cards clicked in a round.
We also need a variable to keep track of whether a click was the first (or not) in a round.
Declare and initialize the global variable
firstClick as follows:
var firstClick = true;
Set up an
if-else statement to do the following:
if this was the first click of the round: set the currentCard1Index variable to the number of the clicked button reveal the image, from the paths array, that corresponds to the clicked button set variable firstClick to false, to be ready for the next click otherwise set the currentCard2Index variable to the number of the clicked button reveal the image, from the paths array, that corresponds to the clicked button set variable firstClick to true, for the next click and very importantly, check to see if you have a match!
How can you check for a match? Look at the contents of the
paths array. That should give you a hint.
If you detect a match, show an alert to that effect.
Add one more global variable to count the matches. Show the number of matches on the page.
Do the same for the rounds. (A
round consists of two consecutive clicks.)
Task 4: Disable buttons
At which point in your code you should do so?
Task 5: To hide or not to hide?
When a player starts a new round by clicking on a button, we would like the two cards that were revealed in the previous round to hide, right?
Well, yes, but not always. In which circumstances we would like to hide the previous round's images, and which not? How can we do that? Do we need to remember some more information? Do you see the need for a couple more global variables?