This game is based on the popular 1970/80s arcade game whack a mole game or somtimes called whack em all. This idea is to whac as many moles that pop in the main game area. Each time you hit a mole you get a point, the more times you hit the target the more points you can get. The game is fun and fast and displaying the highscore encourages the user to keep playing to beat this. The game demonstrate how to use JavaScript to make a fun and interactive game. The game is coulourful and colors are bright and playful.

Whac-Em-All Heading - main heading clear and centered.

• Featured at the top of the page, the Whac-Em-all heading is easy and clear to see for the user.
• Upon viewing the page, the user will be able to see the name of the game.

The Score Area

• Scores areas - this has the score which is updated as you hit the mole.
• Highscore - This keeps track of your high score encouring you to keep playing to beat this score.
• The score area included score which increases as you click or mouse-over the mole that pops up from hole.
• The high score which also increase as you score but will be saved to local Storage at end of game.
• When you click play button again it will show the highest score that has being achieved and clear the score to 0.

Time-Left - This diplays the 30sec timer to let you know when game is about to end.

The Game Area

• This section will allow the user to play the Whac-Em-All game. The user will be able to easily see a mole pop up for the user to hit/whac with cursor / hammer.
• The main goal of the game is to hit the mole as many time as you can within the limited time frame.
• The user will also be able to see the highscore to beat. To start the game you click on the play button.

Background Image

• The game features a fun and cartoonish background which ties into the look and feel of the game to give it color brightness.

• Levels Easy,Medium,Hard which would increase the speed of target.
• Planned to have different targets pop up from holes.
• Animate hammer when clicked on.
• Background Music

- I have tested page on Chrome,Firefox,Safari,Edge
- I have tested page with Google lighthouse
- I have tested with W3C HTML Validator
- I have tested with W3C CSS Validator
- I have tested with JSHint
- My toddler tested the game for me :) 

Bugs

• Score was not clearing when pressed play function - fixed
• The time-left timer jumps on screen when it starts - fixed

• Updated body tag to correct position.

• Removed this line as it was un-needed.

Lighthouse First test with lighthouse desktop show missing meta data updated this.

• HTML
  • No errors were returned when passing through the official W3C validator

• CSS
  • No errors were found when passing through the official (Jigsaw) validator

• JavaScript
• No errors, only warnings about semicolons at the end of lines which is optional using https://jshint.com/
• No erros on console when testing or playing game.

Metrics

There are 9 functions in this file.

Function with the largest signature take 1 arguments, while the median is 0.

Largest function has 7 statements in it, while the median is 2.

The most complex function has a cyclomatic complexity value of 2 while the median is 1.

• Mobile
• Desktop

Can still click on target at end of game - need to remove or lock target.

This site was designed and planned out with wireframes before deployment.

• The site was deployed to GitHub pages. The steps to deploy are as follows:
  • In the GitHub repository, navigate to the Settings tab
  • From the source section drop-down menu, select the Master Branch
  • Once the master branch has been selected, the page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.

The live link can be found here - https://niallos11.github.io/whac-em-all-game/

• Code Institute
• My Mentor for helping & guiding me.

• I looked into simular games that existed and download apps on Android & iPad to test how they looked and played. eg: https://mole.onge.uk/ https://lagged.com/play/1537/ https://www.calculators.org/games/whack-em-all/ https://www.ducksters.com/games/whack_em_all.php

• I needed to use many google searches to find how to do some things that were not covered in course content.

https://medium.com/@divyamcm/whack-a-mole-game-using-html-css-and-javascript-84b108ec5c8e https://jsbeginners.com/whack-a-mole-game-javascript-project/ https://learnersbucket.com/tutorials/js-projects/whack-a-mole-game-in-javascript/ https://codepen.io/AlexsandroSA/pen/ZXGZag https://css-tricks.com/using-css-cursors/ https://michael-karen.medium.com/how-to-save-high-scores-in-local-storage-7860baca9d68 https://stackoverflow.com/questions/29370017/adding-a-high-score-to-local-storage https://stackoverflow.com/questions/64113076/javascript-high-score-update-regardless-of-whether-new-score-is-higher-or-not

• I watched multiable YouTube video tutorials to help me figure out how to setup and structure game.

https://www.youtube.com/watch?v=toNFfAaWghU https://www.youtube.com/watch?v=rJU3tHLgb_c https://www.youtube.com/watch?v=UnrtgpQlAz4&t=2025s https://www.youtube.com/watch?v=D9ZfzXaCPuI&t=202s https://www.youtube.com/watch?v=he1Obo8bi_M&t=1136s https://www.youtube.com/watch?v=iYMx3Z5sTSI&t=1818s https://www.youtube.com/watch?v=b20YueeXwZg&t=877s https://www.youtube.com/watch?v=UX9HRC74cLA&t=283s https://www.youtube.com/watch?v=z0cKwzPF9cQ

• The fonts were taken from google fonts - https://fonts.google.com/specimen/Short+Stack

• The images used for the background page were taken from a Open Source site.
• The hammer cursor icon was taken form - https://www.cursors-4u.com
• The fav icon was taken from - https://www.favicon.cc
• This image was taken from a Open Source site used as the target mole in game.
• https://www.clipartmax.com/download/m2i8i8d3i8m2A0Z5_mole-clipart-whack-a-mole-from-whack-a-mole/
• The images was edited to make transparent with https://www12.lunapic.com/editor/