View website on GitHub pages

View website

Playing digital games has become one of the most popular leisure activities for people of all ages, genders and backgrounds. But it has more advantages but leasure as training the different capabilities like reducing reaction time without compromising accuracy. This is discussed in this publication from 2009 (https://www.ncbi.nlm.nih.gov/pmc/articles/PMC2871325/). On the basis of this input I decided to develop an easy click game known as "whack a mole" for my second project using html, css and javascript syntax. The game has two levels of difficultis based on how long time the mole is visable before it moves to a randome new square in the grid and scores are collected based on number of hits e.g. "click" a mole.

As a game user:

• I would like to have fun and spend some time to Whack a Mole
• I would like to understand the purpose with the game
• I would like to know how to start the game
• I would like to know what time is left for the game
• I would like to know my score
• I would like to have different levels of difficulties

As a site owner:

• I would like to give same game experiance no matter which device is used
• I would like the game to be intuitive
• I would like the User to continue to play the game on higher difficulties

Basic design structure was created with the ambition to focus on JavaScript part of the Whacka a Mole game Project and return to design in agail way of working. Time limitation made the design of game at acceptable level.

Based on the given user stories input and web search for whack a mole games a basic wireframe and functional diagram was created

Different color schemas was explored and the final decision was to go for a retro game style with strong clear colors. Below collor shema was selected from where three colors where piced out to be used in the game, "blue" background, "green" grid and "orange" text.

To be able to easely understand gama purpose a specific button is added. When clicking the button a popup box including instructions is shown. Instruction is removed by clicking the close button.

Two option of difficulti levels added with the difference of time interval between the move of mole. Selection is made by clicking one of the two buttons and game is started. Intervall has been tested iteratively and resultet in easy has an interval of 1 second and hard has an interval of 0.6 seconds.

At the start of game the timeleft start at 30 seconds and count down to 0 when the Game Over alert pops up.

In html-file 9 divs are created in the gamearea which is used to randomly add a class to the div. Mole Class is removed from existing div and assigned same or new randomly calculated div when time interval is ended.

Mouse down event listenere are added to squares in the game area and used to check if mose down event is registered at the same element as the randomly placed mole class. If this is true score is increase with 1, else nothing is happening with score.

When timeleft is 0 an alert pops up with the message of score achived during the game

• improve styling as the focus was on MVP and java script
• add a hammer for hitting the mole
• add a score message at the mole when hit
• add a mole animation when hit
• bug fix

Manual tests has been performed according to below test cases. One bug has been detacted related to re-start of game and Mole left from previouse game. When hitting the Mole you can gain one additional score prior to re-starting the game. Bug is acceptable as it has only minor impact to score.

Below browsers have been available and used for testing the UI. Responsiveness has an acceptable level with most frequent screen sizes managed in CSS media queries. Further improvement can be achieved with defining more media queries or re-design stylsheet.

• Google Chrome (desktop device) Game UI as expected however could be improved

• Microsoft Edge (desktop device) Game UI as expected however could be improved

• Safari (mobile device) Game UI as expected and one issu identified with Game instruction, image is not shown why alt text instead are visible.

Automated testing of html, css programming language has been done by using third party tools. Google Chorme extension devtools, Lighthouse, has been used for general improvements of webpage quality. It has audits for performance, accessibility, progressive web apps, SEO

1. HTML Validator by w3.org

• Result
  • passed without remarks

2. CSS Validator

• Result
  • Passed without remarks

3. JSHint JavaScript Validator

• Result

  • Passed with accapteble remarks

  

3. Google Chrome Lighthouse Extension

• Lighthouse test mobile:

• Lighthouse test desktop:

• Two issues detected during tesing
  • You could gain one additonal score prior to restarting game
  • Image in Game Instruction popup does not render and alt text is displayed in Safari on mobile device

1. Login into https://github.com/
2. Select Whack_A_Mole -> https://github.com/EvergSwe/Whack_A_Mole
3. Select Settings
4. Select Pages in the left menue
5. Select branch main, root and Save
6. Page is now successfully published on Github Pages

• code inspiration has been picked up from variouse sources

  • Code Institute Love Math project and course material
  • https://www.w3schools.com/jsref/
  • https://stackoverflow.com/
  • https://www.freecodecamp.org/

• code challanges has been resolved by reading different sources

  • Code Institute Slack
  • https://developer.mozilla.org/