Macro Assignment 03: Gotta Catch 'em All!

For this assignment you will be creating a Pokemon hunting game the user can play in their browser. The rules for the game are as follows:

  • The user starts with 5 Pokeballs and 0 Pokemon.
  • The user is presented with three grassy patches. Behind one of the cups is hidden a random Pokemon, behind another is hidden 2 additional Pokeballs, and behind the third is nothing.
  • The user is asked to select one of three grassy patches by clicking their mouse on the desired patch. Every time they click on a patch the user will use 1 of their Pokeballs.
  • If they find a Pokemon the number of caught Pokemon increases. If they find the 2 Pokeballs their number of Pokeballs increases by 2. If they do not find anything then nothing happens.
  • In all cases the data displays are updated to reflect the user's current inventory (# of Pokeballs and # of Pokemon caught)
  • The user can then click a "Play Again" button to try another round in which the Pokemon and Pokeballs will be randomly moved to a different patch. At the end of the round all of the grassy patches should be "locked" and un-clickable (i.e. the user should be prevented from selecting two different grassy patches during the same round) - hint: perhaps you need a global variable to keep track of the "state" of your game?
  • The user can continue to play as long as they have Pokeballs left. If the user runs out of Pokeballs your program should not allow them to select another grassy patch. Display some kind of "game over" message when this happens. Hint: test your program with a lower initial Pokeball amount to make sure this feature works correctly!

Here is a video example of how the game is played. Note that you may redesign your game to use your own colors and layout, but the overall gameplay logic should be the same. The graphics being used in the video (background, grass, Pokemon and Pokeballs) can be found here.

Here are some overarching hints to help you get started:

  • Start off by building your HTML & CSS interface. Ensure that you give the items that you will be accessing via JavaScript a class or ID to make it easy to access them using a DOM query
  • When writing your JavaScript code begin by setting up your DOM queries so that you have easy access to the elements on the page that will need to be changed.
  • Also think about what kinds of global variables you will need in order to keep track of things throughout your game. Set these up at the beginning of your program as well.
  • What elements on your page need to respond to the mouse? All of the grass elements will need to be clicked at some point. For debugging purposes start with just prototyping one of the grass elements. Once you're happy with how that one element works you can expand your program to support all three elements.
  • The easiest way to "reveal" what is below a grass element is by randomly selecting one of three possibilities - a Pokemon, the Pokeballs or nothing. There should be an equal chance of either of these events happening (i.e. 33.3% of a Pokemon, 33.3% of the Pokeballs, and 33.3% chance of nothing) - perhaps a random number would be useful here?
  • When a particular event occurs you will need to update your variables (i.e. the user found a Pokemon) as well as the DOM elements on the page to visually show the user their progress.
  • Don't be afraid to create new variables to keep track of things throughout your program. Remember that variables created inside of a function are local to only that function. If you need to share data between functions perhaps a global variable would be more appropriate.
  • The following arrays may be useful as you try and get your Pokemon images & titles to display correctly: 
    // possible pokemon
let pokemon = ['images/pikachu.png', 'images/bulbasaur.png', 'images/charmander.png', 'images/eevee.png', 'images/squirtle.png'];
let names = ['Pikachu', 'Bulbasaur', 'Charmander', 'Eevee', 'Squirtle'];

Next, select at least one of the following features to add to your game. For extra credit you can add in more than one feature:

  • Result history: display all previous results of the game (i.e. Bulbasaur found, Pikachu found, Pokeballs found, Nothing found, etc.) - present this in reverse chronological order. Also allow the user the option to clear the result history.
  • Pokedex: display a detailed listing of how many Pokemon of each type have been caught. For example, 3 Pikachu, 2 Bulbasaur, 0 Charmander, etc. Present some kind of special message when the user catches at least 1 of each type.
  • "Super item": periodically hide a highly valuable item behind one of the grassy areas, such as +4 Pokeballs or a very rare Pokemon. The "super item" should use a different graphic. Don't let the "super item" show up every round (randomly select when you're in "super item" mode). When you are in "super item" mode let the user know through a message that gets displayed (i.e. "You're in 'Super Item' mode!")
  • Reveal the other grassy areas: after selecting a grassy area reveal what was behind the other two areas that you did not click. Visually identify these missed items using the CSS "opacity" property to slightly fade them out (more info: https://www.w3schools.com/css/css_image_transparency.asp)

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 third assignment and visit your page. Also create a ZIP archive of your work and submit it to NYU classes under the 'Assignment 03' category.