This is a Code Institute student project for Milestone 2, built to satisfy the requirements for the EKC DigitalLearn Diploma (Level 5) in Web Application Development.
This project has been created in order to provide 2D gaming entertainment on a deployed interactive website. The project was built using Gitpod.
The information has been presented in a way that ensures the users achieve their goals of:
- understanding what the site's function is
- understanding how to play the game
- being able to email suggestions to us
The site also enhances the owner's goals by:
- showcasing their gaming creativity
- showcasing their JavaScript programming skills
- showcasing their testing skills
- The technologies used were HTML, CSS and JavaScript.
- This interactive front end project contains one page with a JavaScript game and an email form for contacting us
- This README.md file explains what the project does and the value it provides for the users
- Version control is provided by Git and GitHub
- External code, libraries, templates, images, information, etc. will be listed in the Credits, at the bottom of this README.
- This project is deployed via GitHub Pages and the code in a GitHub repository.
The aim of the project is provide an easy to play game for most ages and to provide a non-taxing escape from daily stress. This game is based on the popular arcade and 2D retro versions of Whac-A-Mole.
The site is designed to be responsive and accessible on a range of devices, making it easy to use for potential users.
As this is a brand new site with limited features, so the user stories were taken from the perspective of the visiting or anonymous user. We don't have any traffic data yet and we don't really know who are users are at this point.
- As a visiting user, I would like to connect with the company via email.
- As a visiting user, I would like to easily understand how to play the game.
- As a visiting user, I would like to play with increasing difficulty.
- As a visiting user, I would like to see my score.
- I would like to build a retro 2D game.
- I would like to build a family game which is easy for both children and adults to use.
- I would like the game to be visually attractive and fun to play.
-
This game is inspired by the mini course Learn JavaScript by building 7 games by Ania Kubow on freeCodeCamp. In particular, the tutorial Whac-a-mole starting at time 1:04:37.
-
What is this game? In the original arcade game of Whac-A-Mole, the player tries to hit the 'moles' which pop up through various holes in a cabinet top. Points are scored depending on how fast the 'moles' can be hit. The game starts out slow enough for most people to hit the 'moles', but eventually speeds up with them popping up for shorter periods. In this 2D version of the game, the 'moles' are replaced by coloured square targets, randomly generated within a 3x3 grid. Points are scored by clicking or touching the target, but the player can only score a maximum of one point per appearance. The game currently increases in difficulty, by moving faster as the user gains more points.
-
Why this game? This game was developed for anyone who just wanted a few moments of escapism or to get out of their current head-space. A minimalistic design with bright colours was developed to make it fun but not overly cluttered or busy. The game design lends it to be easily scaled up or down depending on the device screen size. This 60 second version is just short enough to play whilst waiting in a queue, or to pass between a group of players for some friendly competition.
-
View the game design flowchart to see how the functions are connected:
These functions are:
-
initialiseGame() - sets up the game before play and runs when the DOMContentLoaded event is triggered (once the basic HTML document is loaded):
- start button is enabled
- replay button is disabled
- grid generated by calling the createGrid() function
- all elements with the class of 'tile' are selected
- event listeners for 'click' are added for starting and reseting the game
-
createGrid() - 3x3 grid of 9 tiles was created using JavaScript. In order to create each tile:
- a 'div' with the class of 'tile' was generated
- tile was given a unique id between 0 and 8
- the tile was appended to the grid
-
startGame() - on selecting the start button,
- game defaults are set
- score is 0
- time left is 60 seconds
- enableReplay() function is called
- countDown() function is called and the countdown timer interval is set to 1 second, i.e. the time left decremented every second from 60 seconds.
- randomTarget() function is called and the random target generation interval for creating the target is set initially at 1 second. This gave the appearance of a target being generated every second.
- isTargetHit() function called to check if target was hit.
- game defaults are set
-
enableReplay()
- disables start button
- enables replay button
-
countDown() - throughout the game, the time left counts down every second until 0 is reached. When 0 is reached:
- clearTheIntervals() function is called to clear the countdown and random target timers
- the game ends by calling the gameOver() function.
-
clearTheIntervals() - clears the game's intervals for:
- countdown timer
- random target timer
-
randomTarget() - this function creates the random target:
- firstly removes any target generated, by removing the associated class of 'target' from the tile, otherwise the board will be filled with coloured targets - only one is required
- generates a random integer between 0 and 8
- assigns the tile with the id equal to this random integer, as the new target by giving it the class of 'target'
- a potential hit postion is now assigned to the target tile
-
isTargetHit() - this function checks if the target has been clicked on by a mouse or touched via a touchscreen:
- adds an event listener for 'click' for each tile - this checks for either mouse or touch selection
- checks if tile selected is the correct hit position of the target. If yes:
- onTileClicked() function is called
- if the target has not been hit, the score and the random target generation interval stay the same i.e. the target will keep moving at the current speed
-
onTileClicked - because the target has been hit:
- the random target generation interval is cleared
- the score is incremented and displayed on the screen
- the hit position is cleared to stop multiple successful hits on the one position (thought it is possible to randomly generate the same position twice in succession)
- a new random target generation interval, less than the previous one is assigned - this gives the effect of a faster moving target
-
resetGame() - on selecting the replay button:
- clearTheIntervals() function is called
- screen displays for score and time left are set back to 0 and 60 seconds respectively
- the removeTarget() function is called
- if 'Game Over!' is visible, it is removed
- startGame() function is called to automatically restart the game - this is a common feature of such games
-
removeTarget() - removes the event listener for each tile and the ability to restart the game by randomly clicking on the grid, by:
- removing the class of 'target' from any tile
- making sure any potential hit position is cleared
- removing the event listener, so that clicking on the grid results on no action
-
gameOver() - is called when the time left is 0
- 'Game Over!' text is generated
- removetarget() function is called
- enableReplay() function is called
- White (#ffffff) grid on a black (#000000) background are used for the game board.
- Electric Blue (#04eeff) for the moving target, main h1 heading and icons.
- Persian Rose (#fe2da3) for other headings.
- Lavender Floral (#a381ce) for the footer icons.
This colour scheme was chosen for simplicity, readability and fun. The game was given a retro feel, which would appeal to adults and children alike. Inspiration was taken from palette number 4 (Gentle Lilac) of the blog post "30 Trendy Neon Color Palettes for Bold Designs" by Maria Sibirtseva.
For the site, Raleway font is used for good readability and contrast when required. It is considered to be number eight in the The 10 Best Google Fonts in 2023, so should suit most sites. If this font is unavailable, san serif is used as a fallback.
Game visuals were inspired by Sean Young's Breakout Game.
Mobile
Tablet
Desktop
This website consists of one page containing the game area, instructions and contact form. It was decided to produce the game on a black background as the gave a more polished look to the product and looked much better on mobile devices. The site will look the same on all devices.
There is no navigation as this is a small one-page site.
This page features:
- a coloured title, which tells the user the name of the game
- the 'Score' which will increment with each allowed hit on the coloured moving target
- the 'Time Left' in the current game, which counts down from 60 seconds on clicking the 'Start' button
- the game board of 9 tiles, one of which will initially have a randomly generated coloured target tile every 1 second. It will seem like the target is moving position every second, but time period between each random generation will decrease with each increase of the score - the target will speed up
- 'Start' button to start play and generate the moving target
- 'Restart' button which resets the game before immediately restarting it
- 'Instructions' to how to play the game
- contact area where users can email in their game idea
- footer with a link to a GitHub account
As this is a one-page site, there is an automatic redirect back to the home page from the 404 page.
After asking for advice from mentor, other gamers and developers, further features could be implemented:
-
Instead of having a 'Start' and 'Replay' button, have only one button visible at a time. For example: have 'Start' only, visible on loading the game and after 'Start' is pressed, only have 'Replay' button visible. This will make the board much tidier.
-
Show highest score attained so far by using localStorage.
-
Create an higher level where points are deducted when the user hits a black tile.
-
Create higher levels where the number of tiles increases, for example:
- 4x4 grid = 16 tiles
- 5x5 grid = 25 tiles
- 6x6 grid = 36 tiles
-
Make the game for 2 players, by generating 2 different coloured tiles with separate scoring.
-
Develop an accessible level for those who require a larger game board with slower moving targets, by maximising the grid size for larger tablets and desktops.
- HTML5 and CSS3 for building and custom styling the site.
- JavaScript which is used to make the web pages interactive.
- EmailJS provides the JavaScript library for sending emails without the need for server-side technology.
- Wireframes from Balsamiq.
- Developer platform from Gitpod.
- IDE integrated into Gitpod from Visual Studio Code.
- Debugging assisted by Chrome Developer Tools.
- Version control integrated into Gitpod from Git.
- Project deployment provided by GitHub Pages.
- Raleway font from Google Fonts.
- Colour palette generated by Coolors.
- Icon library and toolkit from Font Awesome.
- Favicon created on favicon.cc.
- Online photo editor from Pixlr.
- Stock photos from Unsplash.
- Paint from Microsoft
- Snip and Sketch from Microsoft
- PDF Reader from Adobe Acrobat Reader
- Flowchart by Lucidchart
- Automated testing provided by Jest.
- HTML validation from W3C.
- CSS validation from Jigsaw (W3C).
- JavaScript validation from JSHint
- Web page quality improvements assisted by Lighthouse.
- Web Accessibility Evaluation Tools by WAVE
See the document TESTING.md for the code validation, automated and manual tests.
- To run a frontend (HTML, CSS, Javascript only) application in Gitpod, in the terminal, type:
python3 -m http.server
- A blue button should appear to click: Make Public,
- Another similar blue button should appear to click: Open Browser. If this is not seen, click on the:
- Ports icon 1 then the port address or globe icon 2 to run the project in a new browser tab.
The ports can also be accessed via the bottom blue banner, where it shows Ports: 8000
In Gitpod you have superuser security privileges by default. Therefore you do not need to use the sudo (superuser do) command in the bash terminal.
The project was deployed to GitHub Pages using the following steps...
- Log in to GitHub and locate the GitHub Repository
- At the top of the Repository (not top of page), locate the "Settings" Button on the menu.
- Scroll down the Settings page until you locate the "Pages" Section on the left hand side.
- Under "Branch", click the dropdown called "None" and select "main".
- Branch section should look like this screenshot. Wait a few minutes for the page to automatically refresh.
- Scroll back to top of the page to locate the now published site in the "GitHub Pages" section. Copy this link.
- Go back to your repository and select the Setting gear icon to the right of "About".
- Paste your url into the box under "Website" and click the "Save Changes" button.
- You now have a link for everyone to use from your repository.
By forking the GitHub Repository we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original repository by using the following steps...
- Log in to GitHub and locate the GitHub Repository
- At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.
- You should now have a copy of the original repository in your GitHub account.
- Log in to GitHub and locate the GitHub Repository
- Under the repository name, click "Clone or download".
- To clone the repository using HTTPS, under "Clone with HTTPS", copy the link.
- Open Git Bash
- Change the current working directory to the location where you want the cloned directory to be made.
- Type
git clone, and then paste the URL you copied in Step 3.
$ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY
- Press Enter. Your local clone will be created.
$ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY
> Cloning into `CI-Clone`...
> remote: Counting objects: 10, done.
> remote: Compressing objects: 100% (8/8), done.
> remove: Total 10 (delta 1), reused 10 (delta 1)
> Unpacking objects: 100% (10/10), done.
Click Here to retrieve pictures for some of the buttons and more detailed explanations of the above process.
A huge thank you to the following people and organisations, because without you, the website would not have been produced in it's present form.
Sample README and GitHub deployment instructions from Code Institute
Markdown Cheatsheet from Adam Pritchard
Whac-A-Mole by Wikipedia
Girl playing Whac-A-Mole by sa_ku_ra / sakura on Flickr
- Attribution 2.0 Generic (CC BY 2.0)
Wallpaper for 404 page from Maxim Berg on Unsplash
Although the code is the work of the author, some of the code has been sourced from or inspired by others.
Many of the references have been embedded as links throughout this document and indicated by the active blue text links.
Learn JavaScript by building 7 games by Ania Kubow on freeCodeCamp
Build your own CANDY CRUSH using JavaScript, HTML and CSS by Ania Kubow on YouTube
Convert px to rem - An effective workflow by Swastik Yadav on DEV Community
Typical Device Breakpoints from W3 Schools
Sending Emails Using EmailJS tutorial by Code Institute
How to Change the Time Interval of setinterval() Method at RunTime using JavaScript ? on Geeks for Geeks
Creating a custom 404 page for your GitHub Pages site by GitHub Docs
Custom redirects are not supported by Simon Willison
Rohit Sharma - Code Institute Mentor, for the continuous feedback and guidance in industry standards.
Rachel Furlong - EKC DigitalLearn Course Facilitator, for generous support and advice.