Pixelated Target Web App

An interactive pixelated target that explodes when touched or when a loud noise is detected.

Features

• Pixelated circular target with alternating red and white rings
• Fullscreen mode - expands target to fit the screen's smallest dimension
• Touch interaction - tap/click the target to trigger explosion
• Audio detection - loud noises trigger the explosion
• Particle explosion animation - target breaks into pixels that fly apart
• Points display - shows "+50 Points" after explosion

How to Run

1. Make sure you have Node.js installed
2. Navigate to the project directory
3. Run:

   npm start

4. The app will automatically open in your browser at http://localhost:3000

Usage

• Click/Tap the target to make it explode
• Click the FULLSCREEN button to expand the target to full screen
• Make a loud noise (clap, shout, etc.) to trigger the explosion via microphone
• After explosion, the target will automatically reset after 3 seconds

Notes

• You may need to grant microphone permissions for audio detection to work
• Audio detection is initialized on the first click/tap for browser security reasons
• The target automatically scales to fit 60% of your screen's smallest dimension
• In fullscreen mode, the target expands to fit the entire screen
• Audio detection has a 12-second cooldown to prevent continuous triggering
• Click/tap triggers work anytime the target is visible (no cooldown)
• Audio threshold is tuned to detect sharp, loud noises (claps, shouts) while ignoring ambient noise

Browser Compatibility

Works in all modern browsers with support for:

• Canvas API
• Web Audio API
• Fullscreen API