Week 06: In Class Work

Lecture

Homework

Take your static design and use JavaScript (no jQuery) to turn it into a interactive game. Here is a break down of what you should do:

Start Button – Run your board building function when clicked and start the timer.

Tiles – Add a event listener for the click event for each tile and pass in a tile click function. These tiles should have a unique ID for each one, a data-id to detect if two are the same and a tile class to be able to reference the grouping of tiles.

Tile click logic – Using the “this” JavaScript variable will indicate the tile you just clicked. We need to know which tile has been clicked and if the two tiles are the same. You can push the tile you click on’s ID and data-id into an empty array to store the information for two tiles. Reset this array after two tiles have been clicked by setting the array length back to 0. Using an if statement check to see if the two tiles have the same data-id. If yes then keep them exposed, if no then hide them again after a second or two using setTimeout(). Also use classes (i.e. hide and success) as a way to activate or deactivate the cover image. Do this using classList, remove() and add().

Counts – You should be tracking how many flips they do and how many flips are correct. You can do this by creating a global variable and initially setting that two equal 0. Then when you click on a tile simply add 1 to that variable using ++. In the if statement in the tile click logic function if you successfully match two tiles add 1 to the flips variable again using ++. Then pass the values to an HTML element using an ID.

Timer – Use setInterval to create a timer. To display it on the game again create a global variable for the seconds and pass the value of that variable to an HTML element using an ID. To stop the clock if the game is over use clearInterval().

Replay/Reset – At the end of the game display the play button again. When click it should reset the board, reset the timer and reset the click counts. To do this all you have to do is set those global variables back to 0 on click and reset the setInterval() clock with clearInterval().