Assignment 06: Matching Game

For this assignment you will be creating 'matching game' that will allow visitors to try and match a series of hidden tokens. Speed is key, and the best time will be stored as the 'high score' on your computer - future players will need to try and beat that score in order to become the new matching champion! Here's a quick video that shows the basic features of the system:

Your program should do the following. You can download all of the artwork used in this project here.

  • Layout
    • A 'start' screen that introduces the user to your game and provides them with a button to start the game. This element should be visible to the user when the page loads.
    • A 'play' screen that contains the play area as well as an indicator to show how much time has elapsed. Note that in the video above this screen contains a 4x6 grid of Pokeballs that you can click on. When setting up your page do not add these images to your HTML as you will probably want to do this using JavaScript. Instead, just create a container to hold your images when you do end up creating them. Set up this element to be invisible when the page initially loads.
    • A 'game over' screen that shows the user's score as well as the all time high score. It should also contain a button to start the game up again. This element should be invisible when the page loads.
  • Setting Up the Game
    • Clicking on the initial 'play game' button should swap the display so that the 'play' screen is visible.
    • At this point you will probably want to create your game tokens. Each token should visually display itself as a Pokeball (or something else, you can swap in your own artwork). Every token should also have a "secret" image attached to it. Here's an array that may be helpful in doing this: 
      var assets = ['snorlax.png', 'electrabuzz.png', 'chansey.png', 'oddish.png',
              'pikachu.png', 'paras.png', 'arcanine.png', 'ponita.png',
              'venonat.png', 'eggsecute.png', 'machop.png', 'pidgey.png',
              'psyduck.png', 'tauros.png', 'vulpix.png', 'gloom.png',
              'krabby.png', 'butterfree.png', 'bulbasaur.png', 'clefairy.png',
              'koffing.png', 'goldeen.png', 'magikarp.png', 'beedrill.png',
              'lapras.png', 'meowth.png', 'ekans.png', 'jigglypuff.png',
              'horsea.png', 'polywog.png', 'sandshrew.png', 'rattata.png',
              'gengar.png', 'eevee.png', 'bellsprout.png', 'squirtle.png',
              'seel.png', 'caterpie.png']
    • You will need to select 6 random images from this list and then assign 2 of your tokens to store these images (so that every token has a 'match'). Hint: use the data- specification to store an image filename along with your newly created tokens
    • Each token should be clickable - when they are clicked they should swap to their 'secret' image.
    • Next, you will need to figure out how to determine if a match has been made. Here's a hint - create two variables (token1 and token2) and default them both to false. When the first token is pressed update token1 with a reference to the item that was clicked. When the next token is pressed you can compare their secret images - if they are the same they should stay visible, and if not they should both go back to their normal non-secret image.
    • If a non-match occurs your tokens should pause for a second so the user can see them before they revert back to their non-secret image. Hint: use setTimeout to call a function after a delay!
    • The game should keep track of the elapsed time. Hint: you may need another setTimeout or setInterval call to periodically update the timer.
    • When all tokens have been selected the game should transition to the 'game over' screen.
  • Game Over Screen
    • The user's time should be displayed.
    • The best time should also be displayed - you can do this by using localStorage to store the best time. Hint: default the best time to be something huge if it doesn't exist when the page loads so that the first time the user plays their time will automatically be the best time.
    • If the user beats the best time their time should replace the best time being stored in localStorage
    • The user should be able to click and transition back to the 'game' screen from here -- this should reset the clock and re-randomize the game board with new tokens as well.

Note that your program should be free of logic errors and you will need to test your program to ensure that it works under all circumstances. This includes the following:

  • Click spamming: make sure that the game doesn't "break" if you click too quickly (i.e. you click on 3 images when you really should have only clicked on 2)
  • Double clicking: if the user clicks on the same image twice this should not "break" the game.
  • The timer should stop when the game ends (it shouldn't continue after the user has finished a round)

Advanced Features

Next, implement the following features into your game.

  • Leaderboard: Keep track of the 3 best scores for your game using localStorage. Allow the user to type in their name if they earn a best score and store this name in localStorage along with their time. Display this on the 'game over' screen along with their score.
  • Game Expansion: Give the user a choice as to the size of their board (easy: 3x4 board; medium: 4x5 board; hard: 5x6 board). Update your leaderboard so that you have different "high scores" for each difficulty level.
  • Sound: Trigger sounds when the user gets a correct / incorrect match.

Extra Credit

Attempt these features only if you have time!

  • Custom Game Tokens: Allow the user to change the graphics used in the game - you will need to find / create your own graphics for this. Remember the user's choice using localStorage so that when the come back to the game to play another round their preferred graphics set / board size is pre-selected.
  • Animation: Implement a "card flipping" animation when the user selects a graphic. If the match is incorrect you should use the animation to flip it back to its original state. Here is a tutorial and some CSS rules that might be useful for this task. Note: this is a CSS heavy task that can be very challenging. I recommend that you get everything else working before you even begin looking into this task. Also, make a copy of your work so that you can go back to your previous version since you will need to make a number of changes to the structure of your code to incorporate these features. Also note that you can't simply take the code on this page and use it as-is - the code shown here implements a flipping animation on a hover event, which isn't what you want. Instead, you want this to work using a JavaScript click event. You will most likely be reworking the hierarchy of your tokens and adding / removing special classes to your tokens to make this work.

Thoroughly test your work and make sure that it meets the requirements set forth above. When you are finished, post your project to the i6 server and link it from your main menu page. We should be able to visit your 'webdev' folder and click on the link to the fourth assignment and visit your page. Also create a ZIP archive of your work and submit it to NYU classes under the 'Assignment 05' category.