Whack-a-Mole
Whack-a-Mole is a fun, fast-paced game where players click on moles popping up from holes to score points. With a 30-second timer, bonus moles, sound effects, and confetti, it's a challenging game!
Published Nov 9, 2024
##Inspiration
The timeless appeal of arcade games inspired this modern web adaptation of Whack-a-Mole. We wanted to create a game that maintains the simple fun of the original while adding contemporary features that today's players expect.
##What it does
Players click or tap moles as they randomly pop up from holes in a 3x3 grid. Regular moles are worth 10 points, while special bonus moles (in red) award 20 points. The game runs for 30 seconds, featuring sound effects and a celebratory confetti finale. The game’s score and progress are stored and synced in real-time through Amazon Q and other AWS services.
##How we built it
HTML5 for structure
CSS3 for styling and animations (Grid, Flexbox, Keyframes)
Vanilla JavaScript for game logic
Web Audio API for sound effects
AWS Amplify for deployment and hosting the application
##Challenges we ran into
Managing mole appearance timing without overlaps
Optimizing confetti animation performance
##Accomplishments that we're proud of
Smooth, satisfying animations
Balanced gameplay mechanics
Modern, responsive design
##What we learned
Advanced CSS animation techniques
JavaScript timing and interval management
Browser audio implementation
Performance optimization strategies
Responsive design patterns
Integration of Amazon Q Developer
Using AWS services like Amplify
##What's next for Whack-A-Mole
High score leaderboard powered by AWS
Multiple difficulty levels
Power-ups system
Multiplayer mode
Custom themes
Progressive difficulty scaling
Achievement system
Social sharing features
Enhanced mobile support
Accessibility improvements