Whack a mole is a game in which players have 10 seconds to hit as many moles as possible.Players must react quickly and have good hand-eye coordination to succeed in this game.
Whack-a-Mole game has been designed to be fun and engaging for players of all ages and skill levels. The game has been designed to be visually appealing and the screen is optimized for different screen sizes and resolutions, ensuring that it looks great on both desktop and mobile devices.
The game includes a "Start" button that users can click to begin playing the game, providing a clear and easy way to initiate the game.
Start button hovered on it:
The game track and display the player's score. One mole hit = 1 point
The game has a built-in time limit of 10 seconds, providing a sense of urgency and challenge for players to whack as many moles as possible.
When the time runs out an alert pops up with the final score.
The game includes a 3x2 grid of mole holes
The moles appear in random locations within the 3x2 grid, providing a dynamic and unpredictable gameplay experience for users.
When the user clicks on the "How to Play"
an alert pops up with the rules of the game, providing users with a quick and easy way to understand the gameplay mechanics.
- HTML5
- CSS3
- Javascript ES6.
- Google Fonts - Gloria Hallelujah
- GitHub as cloud repository
- Midjurney for generating all images
Extensive testing was conducted to confirm that everything were functioning correctly. To identify any potential issues, the site and documentation were reviewed by friends and family members. Furthermore, the W3C Markup Validator, W3C CSS Validator and JShint Services were employed to scrutinize for any errors. Also Lighthouse testing to evaluate performance for both the desktop and mobile versions.
desktop:
mobile:
To deploy the project, I followed these steps, beginning from the main project repository here
- Navigated to the Settings option in the repository's navigation menu.
- Selected the Pages option on the sidebar.
- In the first dropdown menu labeled Source, I chose the main branch from the available options.
- Left the next dropdown labeled /root as the default option.
- Selected the Save button.
- Received a notification from GitHub indicating that the project was being deployed.
- Code Institute for providing the LMS videos, tutorials, support
- Love Maths Project for inspiration and guidance
- W3schools.com for assistance with the code
- Youtube chanels: Code with Ania Kubów,Kenny Yip Coding
- Google Fonts
- Midjurney for the images
I would like to extend a special thanks to Alan Bushell, who provided valuable guidance and support throughout the development of this project.