Whack a Mole is a classic arcade game that was invented in 1976 by Aaron Fechter. The game consists of a cabinet with holes, and players use a mallet to hit toy moles that pop up randomly from the holes.

This is a submission to the Code Institute Project Portfolio 2, the aim was to create a basic yet efficient website with well-implemented JavaScript, so i decided to make a "whack-a-mole"-game with a little twist, you play as Will Smith and you slap Chris Rock that pops up. The project was designed to be simple yet functional, making it a perfect opportunity to apply some of the JavaScript concepts covered in the course so far.

The live website can be found here.

• Header

  • Featured at the top of the game, the header is integrated with the picture showing the name of the game "Whack-a-mole"

• The game-area

  • the JavaScript code chooses a random hole/dirt pile where Chris Rock pops out at a random time and random length of time.
  • The big white numbers in the middle are points that the JavaScript code adds up for every time you hit Chris Rock.
  • The smaller red numbers are the time left to play, when the time is up a message with "TIMES UP!" shows and if you press "Start!" again the clock starts over from 20 and counts down.

• Buttons

  • At the bottom of the game-area there are two buttons, one to start the game with and one for "how to" with a pop up-modal with brief information about the game and how to play

• The How to play

  • This section allows the user to read about the game and how to play it.

• In the future I would like to expand this game with different gameplays and add different levels of difficulties.

• I tested that the game works in different browsers: Chrome and Safari.

• The game is responsive and contains all the functions across different screen sizes using the dev tools device toolbar.

• I confirmed that all of the content is readable and easy to understand.

• I confirmed that the webpage are easy to read and accessible by running it through lighthouse in devtools.

• I had some trouble when I deployed my project to Github Pages, nothing worked and it was because I had used absolute file paths.
• I had some trouble with the media queries.
• I wasn't happy with the Lighthouse result so I converted the background image from png to Webp to get a higher score in performance.

• No reports of bugs.

• 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 were returned when passing through the official JSHint validator

  

• 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

HTML, CSS, Javascript

• Balsamiq - Used to create wireframes.

• Gitpod - For version control.

• Github - To save and store the files for the website.

• Google Fonts - To import the fonts used on the website.

• Google Dev Tools - To troubleshoot and test features, solve issues with responsiveness and styling.

• Tiny PNG To compress images.

• Birme To compress images in the webp format.

• Am I Responsive? To show the website image on a range of devices.

• I followed the tutorial from Franks Laboratory and Code with Ania Kubów for the layout of the game.
• I watched Web Dev Simplified tutorial for the "how to"-pop up.
• I watched Angel Brace tutorial for the cursor and sound effect.

• The background image with the Hollywood sign were downloaded from Unsplash and was taken by Gabe
• The image was then cropped and designed in Canva
• The picture of Will Smith were taken from DeviantArt
• The picture of Chris Rock were taken from Celebrities InfoSeeMedia
• The picture of sad Chris Rock were taken from Tenor
• The font is called Bebas Neue and were taken from Google Fonts