{"slug": "build-a-dinosaur-runner-game-with-deno-pt-2", "title": "Build a dinosaur runner game with Deno, pt. 2", "summary": "This article is part two of a series on building a browser-based dinosaur runner game using Deno. It focuses on implementing the game loop, HTML5 canvas rendering, and keyboard/mouse controls for jumping, along with a basic physics system. The guide also covers project structure, UI styling, and deploying the game to the cloud.", "body_md": "# Build a dinosaur runner game with Deno, pt. 2\n\nThis series of blog posts will guide you through building a simple browser-based dinosaur runner game using Deno.\n\n[Setup a basic project][Game loop, canvas, and controls][Obstacles and collision detection][Databases and global leaderboards]- Player profiles, customization, and live tuning\n- Observability, metrics, and alerting\n\nSetting up the Game Loop, Canvas & Controls\n\n[In Stage 1](/blog/build-a-game-with-deno-1), we set up the foundation of the\nDino Runner game: an HTTP server with static file serving, and a basic page\nwhich we deployed to the web with [Deno Deploy](/deploy).\n\nStage 2 is where we’ll start to bring the game to life.\n\nWe’ll turn that simple landing page into a moving canvas with a jumping\ncharacter with keyboard and mouse controls. We’ll also learn about game loops\nusing `requestAnimationFrame`\n\n.\n\nKeep reading and build along or\n[view the entire source here](https://github.com/thisisjofrank/game-tutorial).\n\nWhat you’ll Learn\n\nBy the end of this stage you will have:\n\n- Set up an\n**HTML5 canvas** as the main game area - Implemented a\n**game loop** using`requestAnimationFrame`\n\n- Added\n**keyboard and mouse/touch input** for jumping - Built a basic\n**physics system**(gravity + jumping) - Deployed your new project to the cloud.\n\nProject structure\n\nStage 2 uses a simple but realistic full-stack layout, building on what we set up in Stage 1:\n\n```\nRunner Game/\n├── src/ # Server-side source code\n│ ├── main.ts # Server entry point\n│ └── routes/ # Route definitions\n│ └── api.routes.ts # API route definitions\n├── public/ # Client-side static files\n│ ├── index.html # Main landing page & game canvas\n│ ├── js/\n│ │ └── game.js # Client-side game logic\n│ └── css/\n│ └── styles.css # Styling\n├── deno.json # Deno configuration\n└── .env # Environment variables\n```\n\n- Server-side code (src/) is written in TypeScript and served by Deno + Oak.\n- Client-side (public/) is where your game canvas, JS game engine and CSS live.\n- deno.json and env files keep things easy to configure and deploy.\n\nSetting up the HTML5 Canvas\n\nThe core of the game will be rendered inside an\n[HTML5

🦕 Dino Runner

Controls