Dino Jumps Project Report
1. The Concept
Dino Jumps is a browser-based 2D endless runner game inspired by Chrome Dino. The player controls a pixel-art character, jumps over obstacles, collects coins, and tries to achieve a new high score.
Unlike the original Chrome Dino game, Dino Jumps includes double jumping, collectible coins, rare ×3 and ×5 coins, unlockable characters, and purchasable obstacle themes. The game supports both desktop and mobile devices.
2. The Stack
The Stack: HTML5 Canvas, CSS3, JavaScript, Web Audio API, and Local Storage.
HTML provides the game structure, CSS creates the responsive interface, and JavaScript controls gameplay, animation, collision detection, scoring, coins, shops, and character selection. Local Storage saves the player’s high score, collected coins, purchased characters, and selected obstacle theme.
The AI Assist: Codex assisted with planning the game, implementing gameplay mechanics, fixing bugs, improving mobile performance, and redesigning the pixel-art characters, coins, obstacles, and shop interface.
3. The 1 Day Sprint
Morning (Hours 1–3): I planned the game and created the basic HTML, CSS, and JavaScript structure. I built the Canvas game area, added the main character, implemented running and jumping, generated obstacles, and created collision detection and scoring.
Afternoon (Hours 4–6): I added double jumping, collectible coins, rare ×3 and ×5 rewards, sound effects, and saved game data with Local Storage. I also created shops where players can purchase and select different characters and obstacle themes.
The Finish Line (Hours 7–8): I improved the UI/UX, redesigned the pixel-art characters and obstacles, removed unnecessary borders and buttons, and optimized the game for mobile landscape mode. Finally, I tested character selection, purchases, animation, jumping, collision detection, and saved progress.
4. The Roadblocks
Roadblocks: The main challenges were creating recognizable pixel-art characters, making the character face the correct direction, keeping its position stable while the world moved, and ensuring that purchased characters appeared correctly during gameplay. Mobile performance was another challenge because the animation initially felt slow and unsmooth. The shop layout, touch controls, sprite sizes, collision boxes, and responsive Canvas scaling also required several improvements.
5. Key Takeaways
This project helped me understand how an endless runner game works, including the game loop, gravity, jumping physics, collision detection, animation frames, obstacle generation, and difficulty progression.
I also learned how to build a responsive Canvas game, optimize gameplay for mobile devices, create a persistent reward system with Local Storage, and improve a project through continuous testing and user feedback.
My final thought: Dino Jumps started as a simple Chrome Dino-inspired project, but it developed into a more complete game with collectible coins, unlockable content, customizable characters, obstacle themes, and mobile support. It is a valuable portfolio project that demonstrates my JavaScript, game-development, UI/UX, and problem-solving skills.