Build a dinosaur runner game with Deno, pt. 5

Based on the article, this is part 5 of a series guiding readers through building a browser-based dinosaur runner game using Deno. This stage focuses on adding player identity and customization features, including modals for entering a player name and customizing the dinosaur's color, background theme, and difficulty. The update also involves creating new database tables and API endpoints to persist these player preferences and display them on a global leaderboard.

Build a dinosaur runner game with Deno, pt. 5 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 and customization - Observability, metrics, and alerting Player Profiles & Customization In Stage 4, we wired Oak, PostgreSQL, and a leaderboard route so every run could be recorded. The UI was still anonymous though: everyone shared the same dino, the same desert background, and you had to hard refresh the page each time you wanted to switch difficulty. In Stage 5, we’ll keep that leaderboard code, but layer on player identity and customization so the experience matches what ships in the game-tutorial-stage-4 https://github.com/thisisjofrank/game-tutorial-stage-4 repository. What you’ll build By the end of this stage you will have: - Added player-name and customization modals to public/index.html public/index.html . - Styled those surfaces with reusable modal utilities in public/css/styles.css public/css/styles.css . - Extended public/js/game.js public/js/game.js with a settings lifecycle: prompt for a name, load cached preferences, sync with the server, and apply themes/difficulty multipliers instantly. - Created players , player settings , and high scores tables plus the /api/customization endpoints that persist those choices in PostgreSQL. - Verified the global leaderboard page now reflects the player’s chosen name, color, and score in real time. 1. Upgrade the UI with identity & customization controls Start by extending the markup in public/index.html https://github.com/thisisjofrank/game-tutorial-stage-4/blob/main/public/index.html . We add three things near the game canvas: - A “Customize Game” button so players can open the modal mid-run. - A player-name modal that appears the first time someone loads the page. - A customization modal that exposes color, theme, and difficulty controls. <section class="container canvas-container" <canvas id="gameCanvas" width="800" height="220" </canvas <div class="game-ui" <div class="score" Score: <span id="score" 0</span </div <div class="high-score" High Score: <span id="highScore" 0</span </div <div class="btn btn-primary" id="gameStatus" Click to Start </div </div <button onclick="openCustomization " class="btn btn-primary btn-block" Customize Game </button </section < -- Player Name Modal -- <div class="modal" id="playerModal" <div class="modal-content" <h3 🎮 Welcome to Dino Runner </h3 <p Enter your name to save scores and compete on the global leaderboard:</p <input type="text" id="playerNameInput" placeholder="Your name" maxlength="20" / <div class="modal-buttons" <button onclick="savePlayerName " class="btn btn-primary" Save &amp; Play </button <button onclick='closeModal "playerModal" ' class="btn btn-secondary" Play Anonymous </button </div </div </div < -- Customization Modal -- <div class="modal" id="customizationModal" <div class="modal-content" <h3 🎨 Customize Your Game</h3 <div class="customization-options" <div class="option-group" <label for="dinoColorPicker" Dino Color:</label <input type="color" id="dinoColorPicker" value=" 4CAF50" / </div <div class="option-group" <label for="backgroundTheme" Background Theme:</label <select id="backgroundTheme" <option value="desert" 🏜️ Desert</option <option value="forest" 🌲 Forest</option <option value="night" 🌙 Night</option <option value="rainbow" 🌈 Rainbow</option <option value="space" 🚀 Space</option </select </div <div class="option-group" <label for="difficultyPreference" Difficulty:</label <select id="difficultyPreference" <option value="easy" 😊 Easy</option <option value="normal" 😐 Normal</option <option value="hard" 😈 Hard</option </select </div </div <div class="modal-buttons" <button onclick="saveCustomization " class="btn btn-primary" Save Changes </button <button onclick='closeModal "customizationModal" ' class="btn btn-secondary" Cancel </button </div </div </div The modal triggers call helper functions we’ll add in game.js so there’s no framework dependency—plain DOM APIs keep things deploy-friendly. 2. Style the modal surfaces Layer in the modal utility classes inside public/css/styles.css public/css/styles.css . They reuse the existing btn palette from earlier stages, so everything feels cohesive. .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba 0, 0, 0, 0.5 ; z-index: 1000; animation: fadeIn 0.3s ease; } .modal.show { display: flex; justify-content: center; align-items: center; } .modal-content { background: white; border: 2px solid var --secondary ; padding: 2rem; max-width: 500px; width: 90%; box-shadow: 4px 8px 0px 0px var --tertiary ; animation: slideIn 0.3s ease; } .customization-options { margin-bottom: 1.5rem; } .option-group label { display: block; margin-bottom: 0.5rem; font-weight: 500; } .option-group select, .option-group input type="color" { width: 100%; padding: 0.75rem; border: 1px solid var --secondary ; } Feel free to tweak the palette The logic we’ll add next pulls the chosen colors right into the canvas background and dino sprite. 3. Teach game.js to orchestrate settings With the UI in place we can extend the DinoGame class inside public/js/game.js https://github.com/thisisjofrank/game-tutorial-stage-4/blob/main/public/js/game.js , the key additions are: - tracked playerName , settings , and theme definitions. - lifecycle methods showPlayerNamePrompt , loadPlayerSettings , applyCustomizations , savePlayerSettings . - global helpers openModal , closeModal , saveCustomization , etc. so the HTML buttons can talk to the class without bundlers. Constructor upgrades class DinoGame { constructor { this.canvas = document.getElementById "gameCanvas" ; this.ctx = this.canvas.getContext "2d" ; this.scoreElement = document.getElementById "score" ; this.statusElement = document.getElementById "gameStatus" ; this.highScoreElement = document.getElementById "highScore" ; this.playerName = localStorage.getItem "playerName" || null; this.settings = { dinoColor: " 4CAF50", backgroundTheme: "desert", soundEnabled: true, difficultyPreference: "normal", }; this.themes = { desert: { sky: " 87CEEB", ground: " DEB887" }, forest: { sky: " 98FB98", ground: " 228B22" }, night: { sky: " 191970", ground: " 2F4F4F" }, rainbow: { sky: " FF69B4", ground: " FFD700" }, space: { sky: " 000000", ground: " 696969" }, }; this.init ; } Prompt for a player name showPlayerNamePrompt looks for saved state; if none is found it opens the modal and focuses the input. showPlayerNamePrompt { if this.playerName || this.playerName === "" || this.playerName === "null" { setTimeout = { const modal = document.getElementById "playerModal" ; if modal { window.openModal "playerModal" ; const input = document.getElementById "playerNameInput" ; if input { input.focus ; input.addEventListener "keypress", this.handlePlayerNameEnter ; } } }, 1000 ; } } Load, apply, and save settings Once a player name exists we look up settings on the server, fall back to localStorage , and immediately apply the palette + difficulty multipliers. js async loadPlayerSettings { try { if this.playerName { const response = await fetch /api/customization/${this.playerName} ; if response.ok { const data = await response.json ; this.settings = data.settings; this.applyCustomizations ; } } else { const savedSettings = localStorage.getItem "gameSettings" ; if savedSettings { this.settings = { ...this.settings, ...JSON.parse savedSettings }; this.applyCustomizations ; } } } catch error { console.log "Using default settings:", error ; } } applyCustomizations { const theme = this.themes this.settings.backgroundTheme || this.themes.desert; this.canvas.style.background = linear-gradient to bottom, ${theme.sky} 0%, ${theme.sky} 75%, ${theme.ground} 75%, ${theme.ground} 100% ; const multipliers = { easy: 0.8, normal: 1.0, hard: 1.3 }; this.initialGameSpeed = 3 multipliers this.settings.difficultyPreference || 1.0 ; this.gameSpeed = this.initialGameSpeed; console.log 🎨 Applied theme: ${this.settings.backgroundTheme}, difficulty: ${this.settings.difficultyPreference} ; } async savePlayerSettings { if this.playerName { await fetch "/api/customization", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify { playerName: this.playerName, ...this.settings } , } ; } else { localStorage.setItem "gameSettings", JSON.stringify this.settings ; } } Global helpers for the modals Instead of wiring everything through class instances, game.js exposes a few functions on window . They open/close modals, persist names, and populate the customization controls. js window.openModal = function modalId { const modal = document.getElementById modalId ; if modal { modal.classList.add "show" ; modal.style.display = "flex"; } }; window.saveCustomization = function { const colorPicker = document.getElementById "dinoColorPicker" ; const themeSelect = document.getElementById "backgroundTheme" ; const difficultySelect = document.getElementById "difficultyPreference" ; if window.dinoGame { window.dinoGame.settings = { ...window.dinoGame.settings, dinoColor: colorPicker?.value || window.dinoGame.settings.dinoColor, backgroundTheme: themeSelect?.value || window.dinoGame.settings.backgroundTheme, difficultyPreference: difficultySelect?.value || window.dinoGame.settings.difficultyPreference, }; window.dinoGame.applyCustomizations ; window.dinoGame.savePlayerSettings ; } window.closeModal "customizationModal" ; }; Hook everything up inside window.addEventListener "load", ... so the health check runs, the DinoGame instance is created, and your modals are ready the moment the DOM finishes loading. 4. Persist player choices in PostgreSQL Stage 4 already introduced a database connection pool, migrations runner, and a high scores table. To store customization data we add players and player settings tables to src/database/schema.sql https://github.com/thisisjofrank/game-tutorial-stage-4/blob/main/src/database/schema.sql : CREATE TABLE IF NOT EXISTS players id SERIAL PRIMARY KEY, username VARCHAR 50 UNIQUE NOT NULL, email VARCHAR 100 UNIQUE, avatar url TEXT, created at TIMESTAMP DEFAULT NOW , updated at TIMESTAMP DEFAULT NOW ; CREATE TABLE IF NOT EXISTS player settings id SERIAL PRIMARY KEY, player id INTEGER REFERENCES players id ON DELETE CASCADE, dino color VARCHAR 7 DEFAULT ' 4CAF50', background theme VARCHAR 20 DEFAULT 'desert', sound enabled BOOLEAN DEFAULT true, difficulty preference VARCHAR 20 DEFAULT 'normal', updated at TIMESTAMP DEFAULT NOW , UNIQUE player id ; high scores still stores anonymous runs player name , but if someone has a registered player id we can connect their customization + leaderboard data in one query. 5. Expose /api/customization routes All API logic lives in src/routes/customization.routes.ts src/routes/customization.routes.ts . We reuse the ctx.state.db pool set by middleware, so every handler can grab a client from the pool, execute queries, and release connections. js import { Router } from "@oak/oak"; const router = new Router ; router.get "/api/customization/:playerName", async ctx = { const pool = ctx.state.db; const playerName = ctx.params.playerName; let settings = { dinoColor: " 4CAF50", backgroundTheme: "desert", soundEnabled: true, difficultyPreference: "normal", }; const client = await pool.connect ; try { const playerResult = await client.query SELECT id FROM players WHERE username = $1 , playerName , ; if playerResult.rows.length 0 { const playerId = Number playerResult.rows 0 .id ; const settingsResult = await client.query SELECT dino color, background theme, sound enabled, difficulty preference FROM player settings WHERE player id = $1 , playerId , ; if settingsResult.rows.length 0 { const row = settingsResult.rows 0 ; settings = { dinoColor: row.dino color, backgroundTheme: row.background theme, soundEnabled: row.sound enabled, difficultyPreference: row.difficulty preference, }; } } } finally { client.release ; } ctx.response.body = { success: true, playerName, settings }; } ; router.post "/api/customization", async ctx = { const pool = ctx.state.db; const body = await ctx.request.body.json ; const { playerName, dinoColor, backgroundTheme, soundEnabled, difficultyPreference, } = body; const client = await pool.connect ; try { const playerResult = await client.query INSERT INTO players username VALUES $1 ON CONFLICT username DO UPDATE SET updated at = NOW RETURNING id , playerName , ; const playerId = Number playerResult.rows 0 .id ; await client.query INSERT INTO player settings player id, dino color, background theme, sound enabled, difficulty preference VALUES $1, $2, $3, $4, $5 ON CONFLICT player id DO UPDATE SET dino color = $2, background theme = $3, sound enabled = $4, difficulty preference = $5, updated at = NOW , playerId, dinoColor, backgroundTheme, soundEnabled, difficultyPreference, , ; } finally { client.release ; } ctx.response.body = { success: true, message: "Customization settings saved successfully", }; } ; export { router as customizationRoutes }; There’s also a simple /api/customization/options handler that returns available themes, colors, and difficulty presets for future UI work. 6. Serve everything with Oak The rest of the backend is Oak boilerplate. src/middleware/database.ts https://github.com/thisisjofrank/game-tutorial-stage-4/blob/main/src/middleware/database.ts attaches the pool to every request. src/main.ts https://github.com/thisisjofrank/game-tutorial-stage-4/blob/main/src/main.ts initializes the schema, registers middleware, and mounts the routers before falling back to the static file server: js import { Application } from "@oak/oak/application"; import { apiRouter } from "./routes/api.routes.ts"; import { leaderboardRoutes } from "./routes/leaderboard.routes.ts"; import { customizationRoutes } from "./routes/customization.routes.ts"; import { databaseMiddleware } from "./middleware/database.ts"; import { initializeDatabase } from "./database/migrations.ts"; await initializeDatabase ; const app = new Application ; app.use databaseMiddleware ; app.use async context, next = { try { if context.request.url.pathname === "/leaderboard" { await context.send { root: ${Deno.cwd }/public , path: "leaderboard.html", } ; return; } await context.send { root: ${Deno.cwd }/public , index: "index.html" } ; } catch { await next ; } } ; app.use apiRouter.routes ; app.use leaderboardRoutes.routes ; app.use customizationRoutes.routes ; app.listen { port: PORT } ; With those pieces in place the leaderboard API, customization API, and static assets all share a single Deploy project or run locally via deno task dev . 7. Exploring your databases with Deno Deploy You can view and edit your PostgreSQL databases directly from the Deno Deploy dashboard. This is especially useful for inspecting the players , player settings , and high scores tables as you test your game. To access the database: - Go to your Deno Deploy project dashboard and log in. - Click on the “Apps” tab and select your game project. - Navigate to the “Databases” section in the sidebar. Here you can see a list of your databases, a production database, a preview database and a database you can use for local testing. - Click the Explore button on the database you want to explore e.g., the production database . - From here you can search and edit your tables to inspect player data, scores, and settings. 8. Validate the full loop At this point you should have a fully functional game with player identities, customizable themes, and persistent preferences. To validate everything is wired up correctly: - Run deno task dev or deno run --allow-net --allow-read --allow-env --env-file src/main.ts inside game-tutorial-stage-4 . - Open localhost http://localhost:8000 and enter a name when prompted. - Customize the color/theme/difficulty, then start a run. When you crash the game, the POST /api/scores handler records the attempt, while POST /api/customization persists your palette. - Visit /leaderboard served via public/leaderboard.html public/leaderboard.html and watch public/js/leaderboard.js public/js/leaderboard.js call /api/leaderboard?limit=50 every 30 seconds. - Reload the main page—your dino should immediately apply the stored palette and speed multiplier fetched from /api/customization/:playerName . You can explore the full reference implementation and Deploy link here: https://game-tutorial-stage-4.thisisjofrank.deno.net/ https://game-tutorial-stage-4.thisisjofrank.deno.net/ Stage 5 accomplishments - ✅ Player-name prompt and customization modal wired directly into the game UI. - ✅ Responsive modal styles that reuse the existing Stage 2–4 design system. - ✅ game.js settings lifecycle: fetch, apply, persist, and rehydrate themes plus difficulty multipliers. - ✅ PostgreSQL schema + Oak routes that store both scores and preferences. - ✅ Leaderboard page that reflects personalized player identities in real time. What’s next? Stage 6 will concentrate on observability—metrics, logging, and alerting—so you can understand how players behave at scale. We’ll wire up structured logs, shipping analytics events, and dashboards that track leaderboard health and customization adoption. For now, enjoy the custom player experience you just delivered 🦕✨ What else are you building with Deno? Let us know on Twitter, Bluesky, or Discord.