On researching projects and javascript notes I reviewed a widely used game called "Whack A Mole" and decided to go with a similar idea for the project i am undertaking. The game that i am building has a slight twist on the "Whack A Mole" game. I have decided to use a black cat instead of a mole and the game is called "Catch The Black Cat Game" instead of "Whack A Mole". The goal is to provide people with a fun game that the player can spend a few minutes playing or spend a bit of time playing at the different levels. The player can play at two different levels which are level easy and level hard. Level Easy gives the player 30 seconds and the rate that the cat appears at is 1000. Level Hard is where the player is given 20 seconds and a rate of 700 at which the cat displays. When the player chooses the level and starts the game the countdown timer begins and successfull hits are recorded in the score section. When the game finishes an alert message will be displayed to the user saying the game has finished and displys the total number of scores. The user can click ok on this message and then play the game again if they wish.

1. User Experience
2. Features
3. Technologies Used
4. Testing
5. Finished Product On Desktop And Mobile
6. Deployment
7. Credits
8. Acknowledgements

A. Project Goals and Target Audience

Project Goals For Player and Developer

Player Goals:

• A game that is easy to play and just for fun.
• A game that provides an appealing interactive user experience.
• Different levels to be included in the game so that the player can test the different levels and is challenging.
• Instructions that are easy to follow in order to play the game.
• Play a game that is responsive across a number of devices.

Developer Goals:

• To build a game that is easy to play.
• To provide a positive user experience.
• Provide a game where the player can challenge themselves.
• Provide a timer so that the player can see exactly how much time they have remaining to play the game.
• Provide a score counter that keeps track of scores for the player.
• Advise the player when the game is completed.

Target Audience

• This game can be played by all age groups to pass a little time. It is an easy and interactive short game and the player can play for longer at differnt levels.

B. User Stories

• Provide a game that is easy to play.
• A game with an attractive user design/interface.
• Provide a game with clear instructions for the player on how to play the game.
• A game that provides different levels to play at.
• Address responsiveness so that the player can play the game across different devices.
• Provide a timer so the player knows exactly what time is reamining.
• Provide a score counter so that the player can see exactly their successful hits.
• Provide confirmation to the player when the game is over.

C. Color Scheme

The color scheme chosen for this background was as follows:

• Black is the main background color.
• Orange is used for the majority of the text on the page, borders and highlighting the different level button when a game is in play.
• Red is used to show the time remaining and is also used as a hover effect over the close button in the instructions section.
• Blue is used to show the score counter.
• The horizontal rule at the top and the bottom of the page have a fill color of darkslategray and an orange border.
• The background color for the circles is again blackslategray and orange and these circles have an orange shadow effect and sit on a blackslategray background.

The color palette was done up on coolors.co website a link to this site is below along with a copy of the color palette.

https://coolors.co/000000-ff9900-2f4f4f-ff0000-0000ff

D. Typography

The font that was chosen throughout this project is Montserrat. It is a very clear font and is also easy to read in the selected font colors of orange, red and blue.

https://en.wikipedia.org/wiki/Montserrat_(typeface)

A link to google fonts has also been included in the head section of the index.html file.

https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap

The backup font which has been used is Arial again it is a very clear font and can be easily seen with the selected colors for this project.

https://en.wikipedia.org/wiki/Arial

The only exception is for the instructions section. Arial is used as the main font but if this should not be available there are fallback fonts of Helvetica and sans-serif. Helvetica is a clear font and can be easily read with the colors on the website.
https://en.wikipedia.org/wiki/Helvetica

Again sans-serif is a very clear font and easy to read.
https://en.wikipedia.org/wiki/List_of_sans_serif_typefaces

E. Wireframes

Wireframes were drawn up in Balsamiq for Desktop and Mobile.
The following are the desktop wireframes.

The following are the wireframes which were drawn up for mobile.

Back to Table of Contents

B. Page Showing Game In Play

C. When Game Ends Message Displayed To Player

• Instructions

• levels

• Timer

When the start game button is clicked the timer will begin counting down and the cat displays randomly and will continue untill the time runs out. If the player wants to play at the same level again they can just click on start game else they can choose the hard level and click on start game.

• Score Counter

• Game Completion

• Start Game

The game provides a start button in which the user can play the game when they wish.

• Reset Game

• Score counter for cats who have not being caught.
• Add button to stop game.
• Popup message when starting game - when start button is clicked popup displays alerting user game is about to start with an ok button and the countdown timer will then start.
• Adding a sound effect when the cat is caught.

Back to Table of Contents

a) Languages Used

• HTML5 was used to build the structure of the page - https://en.wikipedia.org/wiki/HTML5

b) Frameworks, Libraries and Programs Used

• Microsoft word was used to re-size images

Back to Table of Contents

Link To Testing Details

Please refer to testing.md file for detailed breakdown on testing

a) Testing User Stories and Goals

b) Code Validation

c) Accessibility

d) Manual Testing

e) Known Bugs

Back to Table of Contents

Responsiveness was checkeked between 320px to 1920px

Desktop - Home Page showing game set to levelHard - 30 seconds

Desktop - Page showing game set to levelEasy - 20 seconds

Desktop - Page showing game in play

Desktop Page showing alert that the game has ended and provides final score to player

Mobile - Home Page showing game set to levelEasy which is the preselected level - 30 seconds with levelEasy highlighted so that the player knows at all times during the game what level they are playing at.

Mobile - Page showing levelHard selected where the button level is highlighted in orange and the timer reflects 20 seconds.

Mobile - Page which shows detailed instructions to the player.

Mobile - Page showing the game in play and successfull scores.

Mobile - Game completion alert which displays when game has ended

Back to Table of Contents

a) GitHub Pages This site was deployed to GitHub pages. The steps to deploy are the following:

• In GitHub repository, navigate to the settings tab.
• From the source section drop-down menu, select main branch
• once the main branch has been selected the page will be automaticlly refreshed with a detailed ribbon display to indicate the successful deployment.

The link can be found at the following -https://github.com/NBJIN/Project-2- (gh repo clone NBJIN/Project-2-)

b) Clone To Run Local

• In the respository section on Github click on the Code drop-down button next to the green Gitpod button.
• Download ZIP file and unpackage the file locally.

c) Forking

• On GitHub navigate to the repository that you want to fork.
• In the top right corner of the page click fork and this will fork the project.

Back to Table of Contents

a) Content

• All content for this website in so far as text was drawn up by the owner, images were sourced from pixabay.com -https://pixabay.com/

• Font Awesome was used for the arrow icon - https://fontawesome.com/search?q=arrow&o=r

b) Media

• Images were sourced from pixabay.com -https://pixabay.com/

• Font was sourced from google fonts - https://fontawesome.com/search?q=arrow&o=r

• When working on the favicon referenced the following site - https://favicon.io/

• Fontawesome was used for the arrow icon - https://fontawesome.com/

c) Code
In completing this project I accessed the following sources :

• Course Notes from CI LMS and the format and layout of the of the Love Maths Essentials Project - https://learn.codeinstitute.net/courses/course-v1:CodeInstitute+LM101+2021_T1/courseware/2d651bf3f23e48aeb9b9218871912b2e/234519d86b76411aa181e76a55dabe70/

• JavaScript For Dummies 4th Edition by Emily Vander Veer

• Whac-a-mole in JavaScript Tutorial by Ania Kubow - https://learn.codeinstitute.net/courses/course-v1:CodeInstitute+LM101+2021_T1/courseware/2d651bf3f23e48aeb9b9218871912b2e/234519d86b76411aa181e76a55dabe70/

• Whack-A-Mole Game - HTML, CSS and JavaScript by Angle Brace - https://learn.codeinstitute.net/courses/course-v1:CodeInstitute+LM101+2021_T1/courseware/2d651bf3f23e48aeb9b9218871912b2e/234519d86b76411aa181e76a55dabe70/

• Whack a Mole Game in Javascript HTML CSS by Kenny Yip Coding - https://learn.codeinstitute.net/courses/course-v1:CodeInstitute+LM101+2021_T1/courseware/2d651bf3f23e48aeb9b9218871912b2e/234519d86b76411aa181e76a55dabe70/

• Whack A Mole game using HTML, CSS and Javascript by Divya M C M - https://medium.com/@divyamcm/whack-a-mole-game-using-html-css-and-javascript-84b108ec5c8e

• Code Institute template in order to build code.

Back to Table of Contents

• Code Institute LMS for notes and videos and also template provided to build the project. - https://learn.codeinstitute.net/dashboard

• Javscript tutorials as mentioned above in section 7 for ideas and guidance.

• Slack for researching and problemsolving - https://slack.com/intl/en-ie/

• Slack channel project-portfolio 2 for researching ideas and design - https://app.slack.com/

• Slack channel for learning Javascript - https://app.slack.com/

• Stack Overflow for researching issues and problems with code - https://stackoverflow.com/

• Cohort Facilitator at CI for all their support.

• Cohort Lead and class for their invaluable help, ideas and brainstorming sessions.

• Tutor Assistance at CI who were so helpfull when i encountered problems and issues on the project.

• Student Care at CI - for All their help and support on this journey.

• Finally to my Mentor who was so helpful in giving of their experince, ideas and time.

Back to Table of Contents