Shape Clicker Game using HTML, CSS & JavaScript

How fast are your reflexes? Test your clicking speed with the Shape Clicker Game, a quick-response reflex game built using HTML, CSS, and JavaScript. Random shapes appear at different positions, and your task is to click them as fast as possible — your reaction time in seconds will be shown immediately after each click.

🎮 Features:

• Randomly appears different shapes (circle, square, triangle)

• Shapes pop up at random positions and intervals

• Real-time reaction time tracking in seconds (e.g., “It took 0.758 seconds to click.”)

• Clean UI with shape color changes

• Responsive and works well on mobile and desktop

🧰 Technologies Used:

• HTML5 – Structure and container for the game elements

• CSS3 – Styling shapes, animations, responsive layout

• JavaScript – Handles random appearance, timing, click detection, and reaction time display

🕹️ How to Play the Shape Clicker Game

1. Wait for a random shape to appear on the screen.

2. As soon as it appears, click it as fast as you can.

3. Your reaction time will be displayed:
   👉 “It took 0.758 seconds to click.”

4. A new shape will appear after a random delay — keep going and try to improve your time!

💡 Learning Highlights:

• Use of Math.random() for unpredictability

• Tracking time difference using Date.now()

• Event handling for DOM clicks

• Styling and animating with shapes using CSS

🛠 Customization Ideas:

• Add a countdown or leaderboard

• Track average and fastest reaction times

• Change shapes or add emojis

• Use audio or visual effects on fast clicks