🐶 Feed the Pups! — HTML5 Canvas Arcade Game

Saira Bibi — Sun, 16 Aug 2026 15:31:18 +0000

Feed a hungry puppy, grab power-ups, and hit the high score! 🍖⚡
This is a submission for Weekend Challenge: Dog Days Edition

🎮 Live Demo: Play Dog Treat Catch Here

What I Built

Dog Treat Catch is an interactive, responsive HTML5 Canvas arcade game built for the DEV Weekend Challenge: Dog Days Edition.
In this game, players control a customizable, hungry puppy navigating through falling items. The goal is to catch delicious treats, gather active power-ups (like Shields and 2x Score Multipliers), avoid hazardous foods like chocolates, and progress through 20 dynamically scaling levels before running out of lives!

Demo

🎬 Click Here to Watch Full Gameplay Video Demo

Code

Dog Treat Catch - GitHub Repository

How I Built It

HTML5 Canvas: Handled the 60FPS game loop using requestAnimationFrame, rendering character sprites, falling treats, particle effects, and dynamic background themes.
Vanilla JavaScript (ES6+): Managed object-oriented game logic, collision detection algorithms, state handling, and LocalStorage high-score persistence.
Google AI Integration: Added a dynamic post-game review box that evaluates player reflexes and achievements, fulfilling the Google AI category criteria.
Web Audio API (Synthesized SFX): Created zero-dependency, real-time synthesized sound effects using pure browser frequency oscillators.
Responsive CSS3: Designed custom overlays, level selection screens, and touch/mouse controls for desktop and mobile play.

🐶 Key Features

🦮 Custom Dog Characters: Choose your favorite puppy (Golden, Puppy, Labrador, or Poodle).
🏆 20 Progressive Levels: Unique background themes, increasing difficulty, and dynamic target scores.
⚡ Power-Ups & 💣 Hazards: Catch bones, meat, and bacon while avoiding chocolates and hazards. Collect Shields and 2x Score Multipliers!
🤖 AI Performance Coach: Instant post-game AI review analyzing your puppy-catching skills and reflexes.
🔊 Zero-Dependency Web Audio: Built-in dynamic sound effects created entirely with the browser's Web Audio API.

Prize Categories

Best Use of Google AI: Integrated an interactive post-game AI coaching and performance review system that analyzes the player's final score and level performance upon game over to provide personalized coaching feedback.

🎯 Challenges I Faced

Canvas Collision Detection Optimization:

Detecting collisions between a moving puppy and 20+ falling items per frame required efficient bounding box algorithms. I implemented spatial partitioning to reduce O(n²) comparisons and maintain smooth 60FPS performance even on mobile devices.
Web Audio API Synthesis:

Creating dynamic sound effects without external audio files was tricky. I had to understand oscillator frequencies and envelope generation to produce believable "catch" and "miss" sounds using pure browser APIs.
Responsive Touch Controls:

Getting accurate touch input across different device sizes and orientations required careful coordinate mapping and debouncing to prevent input lag during intense gameplay.
Google Gemini AI Integration:

Integrating real-time API calls after gameplay needed proper error handling, rate limiting, and fallback messaging if the AI service was unavailable. I added loading states and timeout mechanisms to keep the UX smooth.
Dynamic Level Scaling:

Each of the 20 levels needed progressively harder behavior (faster spawns, more hazards, higher score targets) without making the curve feel unfair. Balancing difficulty curves took playtesting and mathematical scaling.

📚 Learnings

Technical Insights:

Canvas Rendering: requestAnimationFrame provides smoother animations than setInterval, especially critical for arcade games where frame timing matters.
Game State Management: Using a centralized game state object made debugging and feature additions significantly easier than scattered variables.
Local Storage Persistence: Simple JSON serialization allows players to track personal bests across sessions without a backend.
API Integration in Games: Asynchronous AI calls need careful timing to not disrupt active gameplay or final screens.

Design Insights:

Feedback is Everything: Visual particle effects, floating text scores, and sound effects make the game feel responsive and rewarding.
Progressive Difficulty: Starting easy and ramping up gradually keeps players engaged without frustration.
Mobile-First Thinking: Designing for touch first, then enhancing for mouse, created a better experience for all devices.

Dev Challenge Experience:

Building for the "Dog Days Edition" with Google AI integration taught me how to meaningfully combine third-party APIs (like Google Gemini) into game mechanics rather than forcing it unnecessarily.

🔮 Future Improvements

Short Term (Next Updates):

🏅 Achievement System - Unlock badges for milestones (First Shield Caught, 10+ Combo Streak, etc.)
📊 Enhanced Stats Screen - Display accuracy percentage, total treats caught, power-ups used breakdown
🎵 Background Music - Add looping ambient tracks for each level theme , Save top 10 high scores with player names

Medium Term (Major Features):

🎮 Multiplayer Mode - Split-screen or online competition with friends
🐕 More Dog Characters - Unlock additional breeds through achievements
🎨 Customization - Let players customize their puppy's colors/appearance

Long Term (Polish & Expansion):

📱 Native Mobile App - Package as PWA or native iOS/Android
🌍 Localization - Support multiple languages (Urdu, Hindi, Spanish, etc.)
🎯 Advanced AI Coach - Use machine learning to predict and counter player patterns
🎬 Replay System - Record and watch back your best/worst moments

🎉 Conclusion

Dog Treat Catch was an exciting project that combined core game development skills with modern web APIs and AI integration. Building a complete arcade game from scratch—from collision detection to particle effects to AI coaching—reinforced the importance of modular code, iterative testing, and player-centric design.

The integration of Google Gemini AI transformed the game-over screen from a simple restart prompt into an interactive coaching experience, adding personality and re-engagement value without feeling gimmicky.

Key Takeaways:

✨ HTML5 Canvas is powerful for 2D games when optimized correctly
✨ Vanilla JavaScript can handle complex game logic without heavy frameworks
✨ Web APIs (Audio, LocalStorage, Fetch) enable richer experiences than we often assume
✨ Player feedback (visual, audio, haptic) makes games feel alive

Whether you're building your first game or your hundredth, remember: start simple, iterate based on feedback, and have fun! 🎮

Want to try it out? Play Dog Treat Catch now--- and see if you can beat Level 20! 🐕

Happy coding! 🚀

DEV Community: Saira Bibi