Build a dinosaur runner game with Deno, pt. 2 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. Build a dinosaur runner game with Deno, pt. 2 This series of blog posts will guide you through building a simple browser-based dinosaur runner game using Deno. Setup a basic project Game loop, canvas, and controls Obstacles and collision detection Databases and global leaderboards - Player profiles, customization, and live tuning - Observability, metrics, and alerting Setting up the Game Loop, Canvas & Controls In Stage 1 /blog/build-a-game-with-deno-1 , we set up the foundation of the Dino Runner game: an HTTP server with static file serving, and a basic page which we deployed to the web with Deno Deploy /deploy . Stage 2 is where we’ll start to bring the game to life. We’ll turn that simple landing page into a moving canvas with a jumping character with keyboard and mouse controls. We’ll also learn about game loops using requestAnimationFrame . Keep reading and build along or view the entire source here https://github.com/thisisjofrank/game-tutorial . What you’ll Learn By the end of this stage you will have: - Set up an HTML5 canvas as the main game area - Implemented a game loop using requestAnimationFrame - Added keyboard and mouse/touch input for jumping - Built a basic physics system gravity + jumping - Deployed your new project to the cloud. Project structure Stage 2 uses a simple but realistic full-stack layout, building on what we set up in Stage 1: Runner Game/ ├── src/ Server-side source code │ ├── main.ts Server entry point │ └── routes/ Route definitions │ └── api.routes.ts API route definitions ├── public/ Client-side static files │ ├── index.html Main landing page & game canvas │ ├── js/ │ │ └── game.js Client-side game logic │ └── css/ │ └── styles.css Styling ├── deno.json Deno configuration └── .env Environment variables - Server-side code src/ is written in TypeScript and served by Deno + Oak. - Client-side public/ is where your game canvas, JS game engine and CSS live. - deno.json and env files keep things easy to configure and deploy. Setting up the HTML5 Canvas The core of the game will be rendered inside an HTML5