Build a dinosaur runner game with Deno, pt. 1 This article is the first part of a series that guides readers through building a browser-based dinosaur runner game using Deno. It explains how to set up a basic Deno project, configure a local server using the Oak framework, and serve static files before eventually deploying the game to Deno Deploy. The post covers project initialization, file structure, environment variables, and basic HTML setup. Build a dinosaur runner game with Deno, pt. 1 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 The first thing we’ll need in order to build a browser-based game is a web server to serve our static files HTML, CSS, JS . In Stage 1, we will set up a basic Deno project that serves these files locally and we’ll deploy it to the web with Deno Deploy. Keep reading and build along or view the entire source here. What You’ll Learn - Setting up a basic Deno project - Configuring and running the project - Creating a local server - Adding routes - Deploying to Deno Deploy Setting up a basic deno project Setting up a basic Deno project is straightforward. We can use the deno init command to create a new project folder with a deno.json configuration file. deno init dino-runner This will set you up with a new directory called dino-runner containing a deno.json file where you can define tasks and configurations for your Deno project. We’re going to build out a basic server that serves static files from a public/ directory and will serve API requests in later stages. Set up the following structure in your new project, create empty files as needed, we’ll fill them in as we go: Project Structure 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 Project Configuration First up, we’ll install the packages that we’ll need to use in this project. Firstly we’ll need the Oak framework to help us set up the server. deno add jsr:@oak/oak Then we’ll add some tasks to our deno.json file to help us run the server easily. In your deno.json , overwrite the tasks section with the following: "tasks": { "dev": "deno run --allow-net --allow-read --allow-env --env-file --watch src/main.ts", "start": "deno run --allow-net --allow-read --allow-env --env-file src/main.ts" }, - These tasks will allow us to run the server in development mode with file watching deno task dev and in production mode without watching deno task start . - The --allow-net and--allow-read flags are necessary to allow the server to listen for network requests and read static files from the filesystem. Deno keeps your project secure by default, so you need to explicitly grant these permissions to allow the code access to these sensitive APIs. - The --env-file flag allows the server to access a.env file, which is useful for configuring the host and port and other variables we’ll need later on. Lets set up some environment variables in our newly created .env file at the root the project folder: PORT=8000 HOST=localhost Basic HTML Next we’ll set up a basic index.html file in the public/ folder with links to the assets we’ll use later: < DOCTYPE html