calebstark / js-dev-final-capstone-starter-whack-a-mole

Web Development Certificate Capstone: Whack-a-Mole!

A local game development studio has decided to create a new game that's based on Whack-A-Mole. If you've ever been to an arcade, you have probably seen or played Whack-A-Mole. It's a game in which a player uses a mallet to hit toy moles, which appear at random, back into their holes.

The game designers have asked you to come up with a computer version of this game. They have provided some source code, but it still needs to be completed. You are encouraged to come up with an original visual design for this game or even change the theme. The game designers expect you to use the JavaScript, HTML, and CSS skills that you've learned in this program to give the game a unique feel.

Steps to complete

To complete this project, you must do the following:

• Write code that passes all of the requirements in the project rubric, and submit your GitHub link to the Thinkful team.

Go ahead and get started by following the installation steps below. You'll submit your project to the Thinkful team when you are finished.

Installation

1. Fork and clone this repository.
2. Navigate to the project's folder.
3. Run npm install to install.
4. To run the unit tests, run npm test.

Note: It's not required to pass all the unit tests to complete this assignment but it is recommended that you use the tests to deliver a functional game and meet the rubric requirements.

Existing files

Folder/file path	Description
index.html	The HTML document that holds the game structure. You will need to modify this file so that the tests pass.
src/styles.css	The CSS file that holds the styling of the game. You don't need to modify this file for the tests to pass, but you may want to make optional changes to the file to change the appearance.
src/index.js	The JS file that holds the functionality of the game. You will need to change this file for the tests to pass.
test/solution.test.js	This file holds the unit tests of the game.

User stories

The user stories presented below are short descriptions of the features told from the perspective of the game designer. Your work should meet the functionality as described in the acceptance criteria of each user story.

Each of the user stories is listed below. The user stories are to be implemented in the order in which they are listed. Find the TODO comments in the code and create the necessary functionality. Try to implement the functionality by yourself, and check the hints and REPLs provided if you get stuck.

US-01 - Basic game structure

The game needs to have the basic structure for it to function. The game will need a name, some basic board controls such as a start button, a score, and a timer display. The game needs nine holes and moles defined.

US-06: Originality

Good job making it this far! You have a functional game, and it's time to add some uniqueness and originality to make it your own. Read the following suggestions and implement whatever you want. There are no unit tests for this user story, but originality will be considered in the rubric.

1. Change the look of the game.

The game looks great, but it looks similar to the games of some other students in the program. Hack the styles.css file and make some changes to make your game look unique. You can change the background, the sprites, the fonts, and the general appearance of the game. Why not use zombies or monsters instead of moles? Study and experiment with styles.css and see what you can come up with.

2. Audio FX and music

A game without sound FX and music can be pretty boring. Here is a REPL with an example of how to add audio to your game. Feel free to use your own audio files.

3. Additional features

You can add additional features to your game. Here are some examples: adding more user controls to control difficulty, adding a sprite that takes off points if it gets hit, or adding additional animations.

Acceptance criteria

1. There are no unit tests for this user story, but originality and creativity will be considered in the rubric. Consider implementing at least one of the suggested options listed above.

US-07: Deploying to GitHub

You made it! You finished the first version of your game. Now, it's time to show it to the world so that your friends and potential employers can look at your work. Follow the instructions in the Git and GitHub module to deploy your game so that it becomes part of your portfolio.

Acceptance criteria

1. The project is deployed to GitHub.

Success criteria

Functionality:

• The sprites appear and disappear randomly, and the score is incremented when a player clicks on the sprite.
• The game includes a timer that tells the player how many seconds they have left.
• The game is deployed to GitHub.
• The game presents some aspects of originality and creativity, as specified in US-06.

General code organization:

• Minimal code duplication
• Comments are used to describe the functions.

Tips

• Start by completing the required HTML elements and then proceed to work on the JavaScript functions. It's recommended that you leave any CSS changes for last. Follow the order of the user stories.
• If you are stuck, take a careful look at the provided resources. If you are still stuck, ask a friend or a mentor for help.
• Read the user stories and tests carefully.