Title:                                 "Monster Game project"

Specifications:
1. When the page loads (and each time you defeat a monster) a random monster is selected and its associated image is displayed.

2. The Hero and each new Monster starts with 100 health.
 
3. Each time you click “Fight,” the hero randomly deals between 10 and 17 damage (inclusive) to the Monster and the Monster randomly deals between 1 and 4 damage (inclusive) to the Hero.
 - A descriptive message should appear on the screen summarizing the battle. For example, the message might say something like “Batman has dealt 11 damage, and the Joker has dealt 3    damage.” If you click “Fight!” a second time, the message might say “Batman has dealt 15 damage, and the Joker has dealt 5 damage.”
 - Each time you click “Fight,” all counters on the screen for Hero and Monster health should be updated for each round of battle.

4. When the Hero defeats a monster, show a message on screen showing that the monster was defeated and update appropriate counters. 
 - Give the main button a value of “Next Monster” and give it an appropriate event handler.

5. When the Hero defeats 5 monsters, tell the player that he/she won the game.
 - Give the main button a value of “Play Again” and give it an appropriate event handler. 

6. When the player runs out of health before defeating 5 monsters, tell the player that he/she lost.
 - Give the main button a value of “Play Again” and give it an appropriate event handler.

7. The “Play Again” and “Next Monster” buttons should generate a new random Monster, update global variable values, and update displayed information as appropriate.
 
Category:
Computer Science

Sub-Category:
Programming / Game

Project Description:
Coded the following features in the project.
1. Standard HTML and CSS elements (a title, custom CSS styling, a header)

2. Descriptive code comments (including a comment before every function, code citations when appropriate, and citations for all images used)

3. At least 5 monster names and images

4. At least 5 hero names and images

5. Stored important data in global variables:
 a. The Hero’s current health 
 b. The Monster’s current health
 c. The number of monsters
 d. The index of the currently-selected monster
 e. The index of the currently-selected hero
 f. Two parallel arrays of hero names and image filenames
 g. Two parallel arrays of monster names and associated image filenames

6. Coded for a select box that allows the player to change avatars at any time during the game

7. Appropriate <div> elements that allowed to display updated information on the screen:
 a. Counters that keep track of the Hero Health, Monster Health, Number of Monsters Defeated
 b. Descriptive messages that give the player information about the game (how much damage the hero dealt, how much damage the monster dealt, whether the player has defeated the monster, and whether the player has won/lost the entire game)
 c. A button that has the correct value and onClick event for the current state of the game  i. Example: “Fight!”, “Next Monster”, and “Play Again”
 
6. Coded all processing in functions, using appropriate programming structures - output strings, decision statements, local and global variables to keep track of various information, loops, arrays, etc.
 
7. Written quality code, that included appropriate comments, formatting, indenting and descriptive variable names.
 
Tools:
HTML, JS and CSS.

Platforms: 
Windows

Things I learned:
Learned how to use an external style sheet for styling on the pages.
Learned how to Programmatically code for different scenarios.
Learned how to use Arrays, assign and retrieve values for proccessing within the code.
Learned how to Programmatically track variables and values for different scenarios and display them at an appropriate place.
Learned how to code a reusable function.
Learned how to code for creating a custom button and change the characteristics.
Learned how to code for Standard HTML elements (a title, a header, buttons, and <div> elements).
Learned how to document code comments (including a comment before each function, code citations when appropriate, and citations for any images used).
Learned how to write a quality code that includes consistent formatting, indenting and descriptive variables.

Contribution: 
Individual.

Credits:
Mr. Charles B. Nichols, AP Computer Science Teacher.

Monster Game
Published:

Monster Game

Monster Game which is a fun fighting game between a Hero and Monster.

Published: