Whack-a-Mole Game Using HTML, CSS, and JavaScript

📌 Project Description:

Whack-a-Mole is a fast-paced browser-based mini-game built using HTML, CSS, and JavaScript. Moles randomly pop up from holes on the screen, and the player has to click (whack) them as quickly as possible before they disappear.

This project is perfect for beginners and intermediate developers looking to understand DOM manipulation, timing functions, randomization, and basic game mechanics using web technologies. It’s a fun way to learn interactivity and animation with vanilla JS.

🚀 Features:

• Responsive and interactive game layout

• Randomized mole appearance using JavaScript

• Score counter that updates in real-time

• Game timer with auto-stop when time runs out

• Clean UI and smooth animations with CSS

• Sound effects support (optional)

🎮 How to Play:

1. Click the Start button to begin the game.

2. Moles will randomly pop up from the holes.

3. Click (or tap) the moles to score points before they hide again.

4. The game lasts for a set time (e.g., 30 seconds).

5. Your final score will be displayed when time is up.

6. You can press Restart to play again.

🧠 Learning Outcomes:

• Use of setInterval() and setTimeout() for timed events

• Basic collision logic with event listeners

• DOM selection and dynamic styling

• Creating an interactive UI with pure JavaScript