• link

• The aim of this game is to create a simple but fun interactive adaptation of Whack a Mole.
• It will have a count down clock with the aim of whacking as many piggies as possible in the time frame, each piggy hit will increase your score by 5 the game ends once the count down timer hits 0.
• The game also has a start button and when the game ends has the option to restart the game to play again.
• I feel the game doesnt need a lot of explanation so the start game has one line of instructions with the title of the game and the start button.
• The main game starts as soon as you click start with the piggy moving randomly and the timer counting down in 1 second increment from 30 until 0.
• The end game page shows once the count down reaches 0 and shows you your final score and gives the option to restart the game with a button.
• This project will include HTML, CSS and Javascript with the main focus being on using JavaScript to make the game interactive.
• Target audience for this game is for people looking for a light and fun game which tests reflexes on how fast you can react to catch a moving object.

• I want the game to be easy to use with clear istructions
• I want the user to enjoy playing the game
• I want the game to be entertaining
• I want to be able to upgrade the game as my knowledge increases

• I want a simple fun game
• I want to understand the game
• I want the game to be engaging and interesting

• The main colours I have picked for the site are #404E5C,(charcole) is used for the text colour.
• #FF86C8(persian pink) is the main game colour used for the background of the start over lay page, the main game page and the end game over lay page.
• and #FFFBFE(snow) which is used for the game buttons.
• I have picked these colours using Coolers and have imported them from this site.
• These colours work well together and I think they will make the game bright and fun.

• The font style I chose is Gloria Hallelujah with a back up of Sans Serif. GH was imported from Google fonts. I choose this style as I felt it kept the game light and fun.

• The images have been taken from adobe stock as I have an account with them.
• 

• The start page Wire frame of the game https://balsamiq.cloud/s4oxsno/px38y2x
• This is a very basic wire frame for how the game will look https://balsamiq.cloud/s4oxsno/px38y2x/rB19D
• The end game wire frame of the game https://balsamiq.cloud/s4oxsno/px38y2x/r9D16
• screen shots of the game wireframes, the main game wire frame has changed slightly as i have decided to only put the game title on the game start overlay page and have reduced the number of circles to 9.
• During the game development I realised the game is a tad bit simple to have a 90 second timer so I have decided to reduce the time to 30 seconds.

• A timer which allowes the user 30 seconds before the game ends.
• A random moving image that the user must try click in time to increment their score.
• A score counter which allows the user to see their score.
• A start game button which begins the game once clicked.
• A restart game button which starts the game again once clicked.

• An option for the player to put in a username.
• A leader board which shows the highest score
• A personal leader board for the user to see their own personal highest score
• Levels which make the piggy move faster and with a bigger amount of circle options.
• Audio when the piggy is correctly clicked .
• An image and audio when an incorrect circle is clicked.
• Fix known bug listed below with a cannot click funtion

• HTML5
• CSS
• JavaScript

• Google Fonts
• Stack Overflow
• Coolers
• Balsamiq
• w3Schools
• Adobe stock
• Youtube
• Github
• Gitpod
• Favicon

• The W3C Markup Validator and W3C CSS Validator Services are going to be used to validate every page of the project to ensure there are no syntax errors in the project.
• Images of the validated HTML and CSS
• JavaScript was tested using jshint
• A test was also carried out on lighthouse using chrome dev tools screeshot below

• TO NOTE this project is not suited for Firefox and Edge, and may not work correctly on breakpoints not listed below.

• I carried out testing for this project using mainly chrome dev tools to check and see what devices it is responsive on. This project was built for a laptop originally then tablets, mobiles and then larger screens. While writing the js code I used the console.log to continuiously test my JS. I tested the functionality of the game after each function was add in JS to ensure functionality had not changed.

• Most testing for the resonsive aspect of the game was done using chrome dev tools, a physical iPhone 11, a Samsung s21, Laptop and Ipad.

• Dev tools was used to test:

• iPhone 5/5 SE

• iPhone 6/7/8

• iPhone 6/7/8 plus

• iPhone X

• Ipad

• Ipad pro

• Small laptop (1280 x 802)

• 24 inch screen (1920 x 1080)

• 1440p screen (2560 x 1440)

• Issue with getting the count down timer to begin once the start game button has been clicked, this issue has now been resovled I was calling the countDownTimer at the wrong time.
• Another development bug I ran into was when I clicked the restart button to call the startGame() function again it would add a new event listener each time which was multiplying the score wit each restart. To fix this I added the eventEventListeners to their own function and called it on page load as the rest of the elements manipulate the DOM to hide and show containers.

• A user can double click a piggy to increment their score if they are quick enough, I am aware this bug exists and have tried resolving it by trying to implement a cannot click function but I have not been able to get this to work correctly and I do not have enough time on hand to rectify this bug.

• My mentor advised it would look better to change the backgroud of the circles and not to leave them plain so I have implemented this by using an inset shadowbox in the background.
• Also advised that the responsive aspect could be better which I am aware of, as I was running out of time to get the entire project finished I have tested the responsive aspect on the devices listed in the testing section of this readMe

I would like to credit my mentor Narender for his support during the development of my project. This project is for educational purposes only. It was created as a second milestone project for Code Institutes full stack web development course.