A classic arcade-style Whack-A-Mole game built with vanilla HTML, CSS, and JavaScript. Test your reflexes as moles pop up randomly from holes – click them before they disappear!
Try the game live: whack-a-mole-1.netlify.app
- Progressive Difficulty System – The game gets faster as your score increases:
- Easy (0-49 points): Moles stay visible for 1.5 seconds
- Medium (50-69 points): Moles stay visible for 1.2 seconds
- Hard (70+ points): Moles stay visible for 1.0 second
- 60-Second Timer – Race against the clock to maximize your score
- Custom Cursor – Hammer cursor with click animation for immersive gameplay
- Sound Effects – Satisfying smash sound when you hit a mole
- Visual Feedback – Mole changes appearance when whacked
- Responsive Design – Works on both desktop and mobile devices
- Watch as moles randomly appear from the 9 holes
- Click on a mole before it disappears to score 10 points
- The game difficulty increases as your score goes up
- Try to get the highest score within 60 seconds
- HTML5 – Game structure
- CSS3 – Styling with Grid layout, custom animations, and media queries
- JavaScript (ES6+) – Game logic, timer, event handling
-
Clone the repository:
git clone https://github.com/syed-ahmad-global/whack-a-mole.git
-
Navigate to the project directory:
cd whack-a-mole -
Open
index.htmlin your web browser or use a local server:# Using Python python -m http.server 8000 # Or using Node.js npx serve
-
Play and enjoy!
- Scoring: Each successful whack awards 10 points
- Mole Behavior: Moles appear at random intervals in random holes
- Level Progression: Speed increases based on total score
- Game Over: After 60 seconds, your final score is displayed
This project is open source and available for educational purposes.
Built with vanilla web technologies – no frameworks or libraries required!
- 📧 Email: ahmad53.work@gmail.com
- 🐛 Issues: GitHub Issues
- 💬 Discussions: GitHub Discussions
Built with ❤️ using vanilla HTML, CSS, JS