DEV Community

Cover image for 🐶 Feed the Pups! — HTML5 Canvas Arcade Game
Saira Bibi
Saira Bibi

Posted on

🐶 Feed the Pups! — HTML5 Canvas Arcade Game

#devchallenge #weekendchallenge #webdev #javascript

DEV Weekend Challenge: Dog Days Edition Submission 🐕

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

Dog Treat Catch Gameplay Animation showing puppy catching treats

  • 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.

Dog Treat Catch Technology Stack Architecture Overview

🎯 Challenges I Faced

  1. 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.

  2. 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.

  3. 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.

  4. 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.

  5. 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! 🚀

Top comments (0)