Math Catcher – Sharpen Your Mind, One Catch at a Time

#devchallenge #awschallenge #ai #webdev

This is a submission for the Amazon Q Developer "Quack The Code" Challenge: That's Entertainment!

🎮 What I Built

Math Catcher is a fast-paced, educational arcade game built for the browser where players catch falling balls that display correct answers to math questions.

The concept is simple but engaging:

A math question appears at the top of the screen.
Several balls fall from above, each with a potential answer.
Players move the catcher left or right to grab the correct one.
Score increases with every right catch, and the game gets faster.

The game is built with JavaScript, HTML5 Canvas, and a Custom CSS with minimal use of Tailwind classes for a sleek retro feel. It’s perfect for kids learning arithmetic or adults who want a brain workout!

🚀 Demo

Math Catcher Gameplay

🔐 Test Credentials (if needed for admin/user login):

Admin:
username: admin
password: 2025DEVChallenge

User:
username: newuser
password: 2025DEVChallenge

🎥 Gameplay Preview:

🧠 Code Repository

📂 GitHub: Math-Catcher-Sharpen-Your-Mind-One-Catch-at-a-Time

🤖 How I Used Amazon Q Developer

Amazon Q Developer was an essential assistant throughout the creation of Math Catcher:

🧠 Debugging Help: When balls were falling out of sync or answers weren't registering, Q helped me troubleshoot logic errors in my animation frame and key event listeners.
🎨 Tailwind Tweaks: I asked Q, "How can I refactor my JavaScript math-catching game to use classes for better modularity and scalability?", and it created utility classes to polish the look of buttons, scoreboards, and catch zones.
📦 Optimization: Q helped me refactor my game logic, implement a dynamic timer, and scale difficulty smoothly for mobile responsiveness.

🔍 Pro Tip: Asking Amazon Q specific questions like "How can I make my HTML5 Canvas math game more accessible and mobile-friendly?" gave me precise and usable solutions.