{"slug": "build-a-dinosaur-runner-game-with-deno-pt-5", "title": "Build a dinosaur runner game with Deno, pt. 5", "summary": "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.", "body_md": "# Build a dinosaur runner game with Deno, pt. 5\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 and customization\n- Observability, metrics, and alerting\n\nPlayer Profiles & Customization\n\nIn Stage 4, we wired Oak, PostgreSQL, and a leaderboard route so every run could\nbe recorded. The UI was still anonymous though: everyone shared the same dino,\nthe same desert background, and you had to hard refresh the page each time you\nwanted to switch difficulty. In Stage 5, we’ll keep that leaderboard code, but\nlayer on player identity and customization so the experience matches what ships\nin the\n[ game-tutorial-stage-4](https://github.com/thisisjofrank/game-tutorial-stage-4)\nrepository.\n\nWhat you’ll build\n\nBy the end of this stage you will have:\n\n- Added player-name and customization modals to\n[public/index.html](public/index.html). - Styled those surfaces with reusable modal utilities in\n[public/css/styles.css](public/css/styles.css). - Extended\n[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\n`players`\n\n,`player_settings`\n\n, and`high_scores`\n\ntables plus the`/api/customization`\n\nendpoints that persist those choices in PostgreSQL. - Verified the global leaderboard page now reflects the player’s chosen name, color, and score in real time.\n\n1. Upgrade the UI with identity & customization controls\n\nStart by extending the markup in\n[ public/index.html](https://github.com/thisisjofrank/game-tutorial-stage-4/blob/main/public/index.html).\nWe add three things near the game canvas:\n\n- A “Customize Game” button so players can open the modal mid-run.\n- A player-name modal that appears the first time someone loads the page.\n- A customization modal that exposes color, theme, and difficulty controls.\n\n```\n<section class=\"container canvas-container\">\n  <canvas id=\"gameCanvas\" width=\"800\" height=\"220\"></canvas>\n  <div class=\"game-ui\">\n    <div class=\"score\">Score: <span id=\"score\">0</span></div>\n    <div class=\"high-score\">High Score: <span id=\"highScore\">0</span></div>\n    <div class=\"btn btn-primary\" id=\"gameStatus\">Click to Start!</div>\n  </div>\n  <button onclick=\"openCustomization()\" class=\"btn btn-primary btn-block\">\n    Customize Game\n  </button>\n</section>\n\n<!-- Player Name Modal -->\n<div class=\"modal\" id=\"playerModal\">\n  <div class=\"modal-content\">\n    <h3>🎮 Welcome to Dino Runner!</h3>\n    <p>Enter your name to save scores and compete on the global leaderboard:</p>\n    <input\n      type=\"text\"\n      id=\"playerNameInput\"\n      placeholder=\"Your name\"\n      maxlength=\"20\"\n    />\n    <div class=\"modal-buttons\">\n      <button onclick=\"savePlayerName()\" class=\"btn btn-primary\">\n        Save &amp; Play\n      </button>\n      <button onclick='closeModal(\"playerModal\")' class=\"btn btn-secondary\">\n        Play Anonymous\n      </button>\n    </div>\n  </div>\n</div>\n\n<!-- Customization Modal -->\n<div class=\"modal\" id=\"customizationModal\">\n  <div class=\"modal-content\">\n    <h3>🎨 Customize Your Game</h3>\n    <div class=\"customization-options\">\n      <div class=\"option-group\">\n        <label for=\"dinoColorPicker\">Dino Color:</label>\n        <input type=\"color\" id=\"dinoColorPicker\" value=\"#4CAF50\" />\n      </div>\n      <div class=\"option-group\">\n        <label for=\"backgroundTheme\">Background Theme:</label>\n        <select id=\"backgroundTheme\">\n          <option value=\"desert\">🏜️ Desert</option>\n          <option value=\"forest\">🌲 Forest</option>\n          <option value=\"night\">🌙 Night</option>\n          <option value=\"rainbow\">🌈 Rainbow</option>\n          <option value=\"space\">🚀 Space</option>\n        </select>\n      </div>\n      <div class=\"option-group\">\n        <label for=\"difficultyPreference\">Difficulty:</label>\n        <select id=\"difficultyPreference\">\n          <option value=\"easy\">😊 Easy</option>\n          <option value=\"normal\">😐 Normal</option>\n          <option value=\"hard\">😈 Hard</option>\n        </select>\n      </div>\n    </div>\n    <div class=\"modal-buttons\">\n      <button onclick=\"saveCustomization()\" class=\"btn btn-primary\">\n        Save Changes\n      </button>\n      <button\n        onclick='closeModal(\"customizationModal\")'\n        class=\"btn btn-secondary\"\n      >\n        Cancel\n      </button>\n    </div>\n  </div>\n</div>\n```\n\nThe modal triggers call helper functions we’ll add in `game.js`\n\nso there’s no\nframework dependency—plain DOM APIs keep things deploy-friendly.\n\n2. Style the modal surfaces\n\nLayer in the modal utility classes inside\n[public/css/styles.css](public/css/styles.css). They reuse the existing `btn`\n\npalette from earlier stages, so everything feels cohesive.\n\n```\n.modal {\n  display: none;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(0, 0, 0, 0.5);\n  z-index: 1000;\n  animation: fadeIn 0.3s ease;\n}\n\n.modal.show {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.modal-content {\n  background: white;\n  border: 2px solid var(--secondary);\n  padding: 2rem;\n  max-width: 500px;\n  width: 90%;\n  box-shadow: 4px 8px 0px 0px var(--tertiary);\n  animation: slideIn 0.3s ease;\n}\n\n.customization-options {\n  margin-bottom: 1.5rem;\n}\n\n.option-group label {\n  display: block;\n  margin-bottom: 0.5rem;\n  font-weight: 500;\n}\n\n.option-group select,\n.option-group input[type=\"color\"] {\n  width: 100%;\n  padding: 0.75rem;\n  border: 1px solid var(--secondary);\n}\n```\n\nFeel free to tweak the palette! The logic we’ll add next pulls the chosen colors right into the canvas background and dino sprite.\n\n3. Teach `game.js`\n\nto orchestrate settings\n\nWith the UI in place we can extend the `DinoGame`\n\nclass inside\n[public/js/game.js](https://github.com/thisisjofrank/game-tutorial-stage-4/blob/main/public/js/game.js),\nthe key additions are:\n\n- tracked\n`playerName`\n\n,`settings`\n\n, and theme definitions. - lifecycle methods (\n`showPlayerNamePrompt`\n\n,`loadPlayerSettings`\n\n,`applyCustomizations`\n\n,`savePlayerSettings`\n\n). - global helpers (\n`openModal`\n\n,`closeModal`\n\n,`saveCustomization`\n\n, etc.) so the HTML buttons can talk to the class without bundlers.\n\nConstructor upgrades\n\n```\nclass DinoGame {\n  constructor() {\n    this.canvas = document.getElementById(\"gameCanvas\");\n    this.ctx = this.canvas.getContext(\"2d\");\n    this.scoreElement = document.getElementById(\"score\");\n    this.statusElement = document.getElementById(\"gameStatus\");\n    this.highScoreElement = document.getElementById(\"highScore\");\n\n    this.playerName = localStorage.getItem(\"playerName\") || null;\n    this.settings = {\n      dinoColor: \"#4CAF50\",\n      backgroundTheme: \"desert\",\n      soundEnabled: true,\n      difficultyPreference: \"normal\",\n    };\n\n    this.themes = {\n      desert: { sky: \"#87CEEB\", ground: \"#DEB887\" },\n      forest: { sky: \"#98FB98\", ground: \"#228B22\" },\n      night: { sky: \"#191970\", ground: \"#2F4F4F\" },\n      rainbow: { sky: \"#FF69B4\", ground: \"#FFD700\" },\n      space: { sky: \"#000000\", ground: \"#696969\" },\n    };\n\n    this.init();\n  }\n```\n\nPrompt for a player name\n\n`showPlayerNamePrompt()`\n\nlooks for saved state; if none is found it opens the\nmodal and focuses the input.\n\n```\nshowPlayerNamePrompt() {\n  if (!this.playerName || this.playerName === \"\" || this.playerName === \"null\") {\n    setTimeout(() => {\n      const modal = document.getElementById(\"playerModal\");\n      if (modal) {\n        window.openModal(\"playerModal\");\n        const input = document.getElementById(\"playerNameInput\");\n        if (input) {\n          input.focus();\n          input.addEventListener(\"keypress\", this.handlePlayerNameEnter);\n        }\n      }\n    }, 1000);\n  }\n}\n```\n\nLoad, apply, and save settings\n\nOnce a player name exists we look up settings on the server, fall back to\n`localStorage`\n\n, and immediately apply the palette + difficulty multipliers.\n\n``` js\nasync loadPlayerSettings() {\n  try {\n    if (this.playerName) {\n      const response = await fetch(`/api/customization/${this.playerName}`);\n      if (response.ok) {\n        const data = await response.json();\n        this.settings = data.settings;\n        this.applyCustomizations();\n      }\n    } else {\n      const savedSettings = localStorage.getItem(\"gameSettings\");\n      if (savedSettings) {\n        this.settings = { ...this.settings, ...JSON.parse(savedSettings) };\n        this.applyCustomizations();\n      }\n    }\n  } catch (error) {\n    console.log(\"Using default settings:\", error);\n  }\n}\n\napplyCustomizations() {\n  const theme = this.themes[this.settings.backgroundTheme] || this.themes.desert;\n  this.canvas.style.background = `linear-gradient(to bottom, ${theme.sky} 0%, ${theme.sky} 75%, ${theme.ground} 75%, ${theme.ground} 100%)`;\n\n  const multipliers = { easy: 0.8, normal: 1.0, hard: 1.3 };\n  this.initialGameSpeed = 3 * (multipliers[this.settings.difficultyPreference] || 1.0);\n  this.gameSpeed = this.initialGameSpeed;\n\n  console.log(`🎨 Applied theme: ${this.settings.backgroundTheme}, difficulty: ${this.settings.difficultyPreference}`);\n}\n\nasync savePlayerSettings() {\n  if (this.playerName) {\n    await fetch(\"/api/customization\", {\n      method: \"POST\",\n      headers: { \"Content-Type\": \"application/json\" },\n      body: JSON.stringify({ playerName: this.playerName, ...this.settings }),\n    });\n  } else {\n    localStorage.setItem(\"gameSettings\", JSON.stringify(this.settings));\n  }\n}\n```\n\nGlobal helpers for the modals\n\nInstead of wiring everything through class instances, `game.js`\n\nexposes a few\nfunctions on `window`\n\n. They open/close modals, persist names, and populate the\ncustomization controls.\n\n``` js\nwindow.openModal = function (modalId) {\n  const modal = document.getElementById(modalId);\n  if (modal) {\n    modal.classList.add(\"show\");\n    modal.style.display = \"flex\";\n  }\n};\n\nwindow.saveCustomization = function () {\n  const colorPicker = document.getElementById(\"dinoColorPicker\");\n  const themeSelect = document.getElementById(\"backgroundTheme\");\n  const difficultySelect = document.getElementById(\"difficultyPreference\");\n\n  if (window.dinoGame) {\n    window.dinoGame.settings = {\n      ...window.dinoGame.settings,\n      dinoColor: colorPicker?.value || window.dinoGame.settings.dinoColor,\n      backgroundTheme: themeSelect?.value ||\n        window.dinoGame.settings.backgroundTheme,\n      difficultyPreference: difficultySelect?.value ||\n        window.dinoGame.settings.difficultyPreference,\n    };\n\n    window.dinoGame.applyCustomizations();\n    window.dinoGame.savePlayerSettings();\n  }\n\n  window.closeModal(\"customizationModal\");\n};\n```\n\nHook everything up inside `window.addEventListener(\"load\", ...)`\n\nso the health\ncheck runs, the `DinoGame`\n\ninstance is created, and your modals are ready the\nmoment the DOM finishes loading.\n\n4. Persist player choices in PostgreSQL\n\nStage 4 already introduced a database connection pool, migrations runner, and a\n`high_scores`\n\ntable. To store customization data we add `players`\n\nand\n`player_settings`\n\ntables to\n[src/database/schema.sql](https://github.com/thisisjofrank/game-tutorial-stage-4/blob/main/src/database/schema.sql):\n\n```\nCREATE TABLE IF NOT EXISTS players (\n  id SERIAL PRIMARY KEY,\n  username VARCHAR(50) UNIQUE NOT NULL,\n  email VARCHAR(100) UNIQUE,\n  avatar_url TEXT,\n  created_at TIMESTAMP DEFAULT NOW(),\n  updated_at TIMESTAMP DEFAULT NOW()\n);\n\nCREATE TABLE IF NOT EXISTS player_settings (\n  id SERIAL PRIMARY KEY,\n  player_id INTEGER REFERENCES players(id) ON DELETE CASCADE,\n  dino_color VARCHAR(7) DEFAULT '#4CAF50',\n  background_theme VARCHAR(20) DEFAULT 'desert',\n  sound_enabled BOOLEAN DEFAULT true,\n  difficulty_preference VARCHAR(20) DEFAULT 'normal',\n  updated_at TIMESTAMP DEFAULT NOW(),\n  UNIQUE(player_id)\n);\n```\n\n`high_scores`\n\nstill stores anonymous runs (`player_name`\n\n), but if someone has a\nregistered `player_id`\n\nwe can connect their customization + leaderboard data in\none query.\n\n5. Expose `/api/customization`\n\nroutes\n\nAll API logic lives in\n[src/routes/customization.routes.ts](src/routes/customization.routes.ts). We\nreuse the `ctx.state.db`\n\npool set by middleware, so every handler can grab a\nclient from the pool, execute queries, and release connections.\n\n``` js\nimport { Router } from \"@oak/oak\";\n\nconst router = new Router();\n\nrouter.get(\"/api/customization/:playerName\", async (ctx) => {\n  const pool = ctx.state.db;\n  const playerName = ctx.params.playerName;\n  let settings = {\n    dinoColor: \"#4CAF50\",\n    backgroundTheme: \"desert\",\n    soundEnabled: true,\n    difficultyPreference: \"normal\",\n  };\n\n  const client = await pool.connect();\n  try {\n    const playerResult = await client.query(\n      `SELECT id FROM players WHERE username = $1`,\n      [playerName],\n    );\n\n    if (playerResult.rows.length > 0) {\n      const playerId = Number(playerResult.rows[0].id);\n      const settingsResult = await client.query(\n        `SELECT dino_color, background_theme, sound_enabled, difficulty_preference\n         FROM player_settings WHERE player_id = $1`,\n        [playerId],\n      );\n\n      if (settingsResult.rows.length > 0) {\n        const row = settingsResult.rows[0];\n        settings = {\n          dinoColor: row.dino_color,\n          backgroundTheme: row.background_theme,\n          soundEnabled: row.sound_enabled,\n          difficultyPreference: row.difficulty_preference,\n        };\n      }\n    }\n  } finally {\n    client.release();\n  }\n\n  ctx.response.body = { success: true, playerName, settings };\n});\n\nrouter.post(\"/api/customization\", async (ctx) => {\n  const pool = ctx.state.db;\n  const body = await ctx.request.body.json();\n  const {\n    playerName,\n    dinoColor,\n    backgroundTheme,\n    soundEnabled,\n    difficultyPreference,\n  } = body;\n\n  const client = await pool.connect();\n  try {\n    const playerResult = await client.query(\n      `INSERT INTO players (username) VALUES ($1)\n       ON CONFLICT (username) DO UPDATE SET updated_at = NOW()\n       RETURNING id`,\n      [playerName],\n    );\n\n    const playerId = Number(playerResult.rows[0].id);\n\n    await client.query(\n      `INSERT INTO player_settings (player_id, dino_color, background_theme, sound_enabled, difficulty_preference)\n       VALUES ($1, $2, $3, $4, $5)\n       ON CONFLICT (player_id) DO UPDATE SET\n         dino_color = $2,\n         background_theme = $3,\n         sound_enabled = $4,\n         difficulty_preference = $5,\n         updated_at = NOW()`,\n      [\n        playerId,\n        dinoColor,\n        backgroundTheme,\n        soundEnabled,\n        difficultyPreference,\n      ],\n    );\n  } finally {\n    client.release();\n  }\n\n  ctx.response.body = {\n    success: true,\n    message: \"Customization settings saved successfully\",\n  };\n});\n\nexport { router as customizationRoutes };\n```\n\nThere’s also a simple `/api/customization/options`\n\nhandler that returns\navailable themes, colors, and difficulty presets for future UI work.\n\n6. Serve everything with Oak\n\nThe rest of the backend is Oak boilerplate.\n[src/middleware/database.ts](https://github.com/thisisjofrank/game-tutorial-stage-4/blob/main/src/middleware/database.ts)\nattaches the pool to every request.\n[src/main.ts](https://github.com/thisisjofrank/game-tutorial-stage-4/blob/main/src/main.ts)\ninitializes the schema, registers middleware, and mounts the routers before\nfalling back to the static file server:\n\n``` js\nimport { Application } from \"@oak/oak/application\";\nimport { apiRouter } from \"./routes/api.routes.ts\";\nimport { leaderboardRoutes } from \"./routes/leaderboard.routes.ts\";\nimport { customizationRoutes } from \"./routes/customization.routes.ts\";\nimport { databaseMiddleware } from \"./middleware/database.ts\";\nimport { initializeDatabase } from \"./database/migrations.ts\";\n\nawait initializeDatabase();\n\nconst app = new Application();\napp.use(databaseMiddleware);\n\napp.use(async (context, next) => {\n  try {\n    if (context.request.url.pathname === \"/leaderboard\") {\n      await context.send({\n        root: `${Deno.cwd()}/public`,\n        path: \"leaderboard.html\",\n      });\n      return;\n    }\n\n    await context.send({ root: `${Deno.cwd()}/public`, index: \"index.html\" });\n  } catch {\n    await next();\n  }\n});\n\napp.use(apiRouter.routes());\napp.use(leaderboardRoutes.routes());\napp.use(customizationRoutes.routes());\n\napp.listen({ port: PORT });\n```\n\nWith those pieces in place the leaderboard API, customization API, and static\nassets all share a single Deploy project (or run locally via `deno task dev`\n\n).\n\n7. Exploring your databases with Deno Deploy\n\nYou can view and edit your PostgreSQL databases directly from the Deno Deploy\ndashboard. This is especially useful for inspecting the `players`\n\n,\n`player_settings`\n\n, and `high_scores`\n\ntables as you test your game. To access the\ndatabase:\n\n- Go to your Deno Deploy project dashboard and log in.\n- Click on the “Apps” tab and select your game project.\n- 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.\n- Click the\n**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.\n\n8. Validate the full loop\n\nAt this point you should have a fully functional game with player identities, customizable themes, and persistent preferences. To validate everything is wired up correctly:\n\n- Run\n`deno task dev`\n\n(or`deno run --allow-net --allow-read --allow-env --env-file src/main.ts`\n\n) inside`game-tutorial-stage-4`\n\n. - Open\n[localhost](http://localhost:8000)and enter a name when prompted. - Customize the color/theme/difficulty, then start a run. When you crash the\ngame, the POST\n`/api/scores`\n\nhandler records the attempt, while POST`/api/customization`\n\npersists your palette. - Visit\n`/leaderboard`\n\n(served via[public/leaderboard.html](public/leaderboard.html)) and watch[public/js/leaderboard.js](public/js/leaderboard.js)call`/api/leaderboard?limit=50`\n\nevery 30 seconds. - Reload the main page—your dino should immediately apply the stored palette and\nspeed multiplier fetched from\n`/api/customization/:playerName`\n\n.\n\nYou can explore the full reference implementation and Deploy link here:\n[https://game-tutorial-stage-4.thisisjofrank.deno.net/](https://game-tutorial-stage-4.thisisjofrank.deno.net/)\n\nStage 5 accomplishments\n\n- ✅ Player-name prompt and customization modal wired directly into the game UI.\n- ✅ Responsive modal styles that reuse the existing Stage 2–4 design system.\n- ✅\n`game.js`\n\nsettings lifecycle: fetch, apply, persist, and rehydrate themes plus difficulty multipliers. - ✅ PostgreSQL schema + Oak routes that store both scores and preferences.\n- ✅ Leaderboard page that reflects personalized player identities in real time.\n\nWhat’s next?\n\nStage 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! 🦕✨\n\n*What else are you building with Deno? Let us know on\nTwitter,\nBluesky, or\nDiscord.*", "url": "https://wpnews.pro/news/build-a-dinosaur-runner-game-with-deno-pt-5", "canonical_source": "https://deno.com/blog/build-a-game-with-deno-5", "published_at": "2026-02-09 15:00:00+00:00", "updated_at": "2026-05-22 12:19:29.264001+00:00", "lang": "en", "topics": ["developer-tools", "open-source"], "entities": ["Deno", "Oak", "PostgreSQL"], "alternates": {"html": "https://wpnews.pro/news/build-a-dinosaur-runner-game-with-deno-pt-5", "markdown": "https://wpnews.pro/news/build-a-dinosaur-runner-game-with-deno-pt-5.md", "text": "https://wpnews.pro/news/build-a-dinosaur-runner-game-with-deno-pt-5.txt", "jsonld": "https://wpnews.pro/news/build-a-dinosaur-runner-game-with-deno-pt-5.jsonld"}}