-
Logo
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
Whack-a-Mole is a fast-paced game where players tap or click moles that appear in a 3x3 grid. Regular moles earn 10 points, and special bonus moles award 20 points. Players compete for high scores during a 30-second gameplay session, enhanced by animations, sound effects, and a celebratory confetti finale. The game is hosted on AWS Amplify, which provides reliable and scalable hosting. It synchronizes game scoreboards and ensures that the web application remains available and responsive to all players.
How we built it
HTML5, CSS3, JavaScript Web Audio API for sound effects AWS Amplify: Used for deployment and hosting the application, ensuring global availability and reliability Amazon Q Developer: Enabled efficient debugging and optimization of the JavaScript code, ensuring mole timing was accurate, animations were smooth, and score tracking remained flawless during stress testing. The tool provided real-time insights and actionable suggestions to improve performance
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
Log in or sign up for Devpost to join the conversation.