Giter Club home page Giter Club logo

whack-a-mole-2's Introduction

Whack a Mole

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.

Responsive screenshot

contents

  1. UX
  2. Features
  3. Technology used
  4. Testing
  5. Deployment
  6. Credits
  7. Acknowledgements

UX

Site Goals

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.

Page Wireframe

Page Wireframe

Features

Start Button

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
Start button hovered on it:
Start button hovered on it

Scoring system

The game track and display the player's score. One mole hit = 1 point
score

Time limit

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.
time left
When the time runs out an alert pops up with the final score.
game over alert

Game field

The game includes a 3x2 grid of mole holes
game field

Randomized mole appearances

The moles appear in random locations within the 3x2 grid, providing a dynamic and unpredictable gameplay experience for users.
random mole

Alert with rules

When the user clicks on the "How to Play"
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.
alert how to play

Technology

Languages Used

  1. HTML5
  2. CSS3
  3. Javascript ES6.

Programs and others

  • Google Fonts - Gloria Hallelujah
  • GitHub as cloud repository
  • Midjurney for generating all images

Testing

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.

Google Lighthouse Testing

desktop:
desktop
mobile:
mobile

HTML Validation

html

CSS Validation

CSS

JShint

html

Deployment

To deploy the project, I followed these steps, beginning from the main project repository here

  1. Navigated to the Settings option in the repository's navigation menu.
  2. Selected the Pages option on the sidebar.
  3. In the first dropdown menu labeled Source, I chose the main branch from the available options.
  4. Left the next dropdown labeled /root as the default option.
  5. Selected the Save button.
  6. Received a notification from GitHub indicating that the project was being deployed.

Credits

  1. Code Institute for providing the LMS videos, tutorials, support
  2. Love Maths Project for inspiration and guidance
  3. W3schools.com for assistance with the code
  4. Youtube chanels: Code with Ania Kubów,Kenny Yip Coding
  5. Google Fonts
  6. Midjurney for the images

Acknowledgements

I would like to extend a special thanks to Alan Bushell, who provided valuable guidance and support throughout the development of this project.

whack-a-mole-2's People

Contributors

karoskodev avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.