{"slug": "build-a-dinosaur-runner-game-with-deno-pt-1", "title": "Build a dinosaur runner game with Deno, pt. 1", "summary": "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.", "body_md": "Build a dinosaur runner game with Deno, pt. 1\nThis series of blog posts will guide you through building a simple browser-based dinosaur runner game using Deno.\n- Setup a basic project\n- Game loop, canvas, and controls\n- Obstacles and collision detection\n- Databases and global leaderboards\n- Player profiles, customization, and live tuning\n- Observability, metrics, and alerting\nThe 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.\nKeep reading and build along or view the entire source here.\nWhat You’ll Learn\n- Setting up a basic Deno project\n- Configuring and running the project\n- Creating a local server\n- Adding routes\n- Deploying to Deno Deploy\nSetting up a basic deno project\nSetting up a basic Deno project is straightforward. We can use the\ndeno init\ncommand to\ncreate a new project folder with a deno.json\nconfiguration file.\ndeno init dino-runner\nThis will set you up with a new directory called dino-runner\ncontaining a\ndeno.json\nfile where you can define tasks and configurations for your Deno\nproject.\nWe’re going to build out a basic server that serves static files from a\npublic/\ndirectory and will serve API requests in later stages.\nSet up the following structure in your new project, create empty files as needed, we’ll fill them in as we go:\nProject Structure\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\nProject Configuration\nFirst 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.\ndeno add jsr:@oak/oak\nThen we’ll add some tasks to our deno.json\nfile to help us run the server\neasily. In your deno.json\n, overwrite the tasks section with the following:\n\"tasks\": {\n\"dev\": \"deno run --allow-net --allow-read --allow-env --env-file --watch src/main.ts\",\n\"start\": \"deno run --allow-net --allow-read --allow-env --env-file src/main.ts\"\n},\n- These tasks will allow us to run the server in development mode with file\nwatching (\ndeno task dev\n) and in production mode without watching (deno task start\n). - The\n--allow-net\nand--allow-read\nflags 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\n--env-file\nflag allows the server to access a.env\nfile, which is useful for configuring the host and port and other variables we’ll need later on.\nLets set up some environment variables in our newly created .env\nfile at the\nroot the project folder:\nPORT=8000\nHOST=localhost\nBasic HTML\nNext we’ll set up a basic index.html\nfile in the public/\nfolder with links\nto the assets we’ll use later:\n\n\n\n\n\n\n\n\n\n\n\nDino Runner\n\n\n

Dino Runner Game - Stage 1

This is a placeholder for the Dino Runner game.

\n\n\n\nsrc/main.ts\n)\nThe Server (We’ll create a very simple server using the\nOak framework to serve static files from the\npublic/\ndirectory.\nimport { Application } from \"@oak/oak/application\";\nconst PORT = parseInt(Deno.env.get(\"PORT\") || \"8001\");\nconst HOST = Deno.env.get(\"HOST\") || \"localhost\";\nconst app = new Application();\n// Serve static files from public directory\napp.use(async (context, next) => {\ntry {\nawait context.send({\nroot: `${Deno.cwd()}/public`,\nindex: \"index.html\",\n});\n} catch {\nawait next();\n}\n});\napp.listen({\nport: PORT,\n});\nconsole.log(`Server is running on http://${HOST}:${PORT}`);\nThis code spins up a local HTTP server that maps incoming requests directly to\nyour /public folder. Deno.cwd()\ngets the current working directory, ensuring that the server correctly locates\nthe public/\nfolder regardless of where the script is run from.\nYou should now be able to run the server locally with:\ndeno task dev\nThis should show you a very basic web page when you navigate to\nhttp://localhost:8000\nin your browser:\nsrc/routes/api.routes.ts\n)\nAdding routes (Next, we’ll set up a basic routing structure for our API endpoints. For now, this file will be mostly empty, but it sets the stage for future development.\nimport { Router } from \"@oak/oak/router\";\nexport const apiRouter = new Router({ prefix: \"/api\" });\n// Health check endpoint\napiRouter.get(\"/health\", (ctx) => {\nctx.response.body = {\nstatus: \"ok\",\nmessage: \"🦕 Stage 1 - Dino server is healthy!\",\n};\n});\nThis sets up a simple health check endpoint at /api/health\nthat we can use to\nverify that our server is running correctly.\nThen we’ll update the main server file to use this router. First, add an import\nfor the router at the top of src/main.ts\n:\nimport { apiRouter } from \"./routes/api.routes.ts\";\nThen, after the app.use\nfor static files, add the following:\n// API routes\napp.use(apiRouter.routes());\napp.use(apiRouter.allowedMethods());\nThis tells the Oak application to use the routes defined in apiRouter\n.\nNow, when you run the server, you can check the health endpoint by navigating to\nhttp://localhost:8000/api/health\n:\nDeploying to Deno Deploy\nLet’s deploy your new project to Deno Deploy, so that you can share it with the world!\nFirst, make sure you have a Deno Deploy account. If you don’t have one, you can sign up at https://console.deno.com/.\nThen, you can use the\ndeno deploy\ncommand to\ndeploy your project:\ndeno deploy\nThis command will guide you through the deployment process. It will ask you to\nselect a project name and will upload your code to Deno Deploy. Make sure to\nselect “Edit app config” and set the entry point for your application to\nsrc/main.ts\n:\nOnce the deployment is complete, you’ll receive a URL where your application is live.\nYou can visit this URL in your browser to see your basic HTML page ready to be developed into a dinosaur runner game!\nWhat’s Next?\nStage 2 introduces enhanced features — more interactivity, more refined structure, and the beginnings of real game logic. We’ll publish it next week! Stay tuned.\nWhat are you building with Deno? Let us know on Twitter, Bluesky, or Discord.", "url": "https://wpnews.pro/news/build-a-dinosaur-runner-game-with-deno-pt-1", "canonical_source": "https://deno.com/blog/build-a-game-with-deno-1", "published_at": "2025-12-08 15:00:00+00:00", "updated_at": "2026-05-22 12:22:27.141322+00:00", "lang": "en", "topics": ["developer-tools", "open-source", "cloud-computing"], "entities": ["Deno", "Deno Deploy"], "alternates": {"html": "https://wpnews.pro/news/build-a-dinosaur-runner-game-with-deno-pt-1", "markdown": "https://wpnews.pro/news/build-a-dinosaur-runner-game-with-deno-pt-1.md", "text": "https://wpnews.pro/news/build-a-dinosaur-runner-game-with-deno-pt-1.txt", "jsonld": "https://wpnews.pro/news/build-a-dinosaur-runner-game-with-deno-pt-1.jsonld"}}