Build a dinosaur runner game with Deno, pt. 3

This article is the third part of a tutorial series on building a browser-based dinosaur runner game using Deno. It focuses on implementing obstacles and collision detection, teaching readers how to spawn and manage obstacles, detect collisions between the dinosaur and obstacles, and update the game state accordingly. The post includes code examples for setting up obstacle properties, spawning random cactus obstacles, and moving them across the screen while increasing the player's score.

Build a dinosaur runner game with Deno, pt. 3 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 Obstacles and collision detection In Stage 2 /blog/build-a-game-with-deno-2/ , we set up the basic game loop and rendering for our dinosaur runner game, but it still isn’t really a game, there’s nothing to ‘play’. In Stage 3, we will introduce obstacles for the dino to jump over, as well as implement collision detection to determine if the dino hits an obstacle, and ends the game. What you’ll Learn By the end of this stage, you will have learned: - How to create and manage obstacles in the game - Implementing collision detection between the dino and obstacles - Updating game state based on collisions Setting up the game state We’re going to add some new properties to our game state to manage obstacles and scoring. Open up your game.js file and locate the constructor of your DinoGame class. In here we’ll add properties to the game state to set the initial game speed, the frame count that we’ll need to animate the dino and a high score tracker: this.initialGameSpeed = 3; this.frameCount = 0; this.highScore = this.loadHighScore ; Scaffolding out the game methods Our game currently has a startGame and a resetGame method. We’ll be adding several new methods to handle obstacle spawning, updating, collision detection, and scoring. For now lets add empty method stubs to the class so we can fill them in later. Add these just below your existing methods: gameOver {} loadHighScore {} saveHighScore {} updateHighScore {} drawGameOver {} The obstacle system In game design terms, obstacles are typically represented as objects with properties such as position, size, and type. They have a bounding box that can be used for collision detection. We’ll implement a simple obstacle system where obstacles are spawned at random intervals and move towards the dino. The player must jump over these obstacles to avoid collisions. As they successfully avoid obstacles, their score increases, and the game speed ramps up to increase difficulty. In our game.js , lets add some more properties to the constructor to manage obstacles these can go just before the this.init ; call : // Obstacle properties this.obstacles = ; this.obstacleSpawnTimer = 0; this.obstacleSpawnRate = 120; this.minObstacleSpawnRate = 60; This creates an empty array to hold active obstacles, a timer to track when to spawn the next obstacle, and a spawn rate that determines how often obstacles appear. The minObstacleSpawnRate will ensure that obstacles don’t spawn too frequently as the game speeds up. in the startGame method, set the obstacle timer to zero so it starts fresh each round: this.obstacleSpawnTimer = 0; Spawning and updating obstacles Obstacles are just rectangles that enter from the right edge and move left at the current game speed. Add these methods to the class, they can go below the jump method: js spawnObstacle { const obstacleTypes = { width: 20, height: 40, type: "cactus-small" }, { width: 25, height: 50, type: "cactus-medium" }, { width: 30, height: 35, type: "cactus-wide" }, ; const obstacle = obstacleTypes Math.floor Math.random obstacleTypes.length ; this.obstacles.push { x: this.canvas.width, y: this.groundY - obstacle.height, width: obstacle.width, height: obstacle.height, type: obstacle.type, } ; } updateObstacles { if this.gameState == "playing" return; this.obstacleSpawnTimer++; if this.obstacleSpawnTimer = this.obstacleSpawnRate { this.spawnObstacle ; this.obstacleSpawnTimer = 0; } for let i = this.obstacles.length - 1; i = 0; i-- { this.obstacles i .x -= this.gameSpeed; if this.obstacles i .x + this.obstacles i .width < 0 { this.obstacles.splice i, 1 ; this.score += 10; } } } Here, we set up some obstacle types with different sizes. The spawnObstacle method randomly selects one and adds it to the obstacles array at the right edge of the canvas. The updateObstacles method increments the spawn timer and spawns a new obstacle when the timer exceeds the spawn rate. It also moves each obstacle left by the current game speed and removes any that have moved off-screen, awarding points for each successfully avoided obstacle. Collision detection and difficulty ramping Collision detection is how games determine if two objects have come into contact. We can check the bounding boxes of the dino and each obstacle to see if they overlap. If they do, the game ends. Collision detection just compares the dino’s rectangle with each obstacle’s rectangle. If they overlap, the run ends. Immediately after adding updateObstacles , drop in these helpers: checkCollisions { if this.gameState == "playing" return; for let obstacle of this.obstacles { const isOverlapping = this.dino.x < obstacle.x + obstacle.width && this.dino.x + this.dino.width obstacle.x && this.dino.y < obstacle.y + obstacle.height && this.dino.y + this.dino.height obstacle.y; if isOverlapping { this.gameOver ; return; } } } updateGameDifficulty { if this.gameState == "playing" return; const difficultyLevel = Math.floor this.score / 200 ; this.gameSpeed = this.initialGameSpeed + difficultyLevel 0.5; this.obstacleSpawnRate = Math.max this.minObstacleSpawnRate, 120 - difficultyLevel 10, ; } The difficultyLevel calculation increments every ~200 points, increasing both speed and spawn frequency so the game keeps getting harder the longer the player survives. Drawing obstacles To make the cacti feel less repetitive, each obstacle type gets a slightly different silhouette. Add this method to the class, it can go just below the drawDino method: js drawObstacles { this.ctx.fillStyle = "olive"; for let obstacle of this.obstacles { this.ctx.fillRect obstacle.x, obstacle.y, obstacle.width, obstacle.height, ; this.ctx.fillStyle = "darkolivegreen"; if obstacle.type === "cactus-small" { this.ctx.fillRect obstacle.x - 3, obstacle.y + 10, 6, 4 ; this.ctx.fillRect obstacle.x + obstacle.width - 3, obstacle.y + 20, 6, 4 ; } else if obstacle.type === "cactus-medium" { this.ctx.fillRect obstacle.x - 4, obstacle.y + 8, 8, 6 ; this.ctx.fillRect obstacle.x + obstacle.width - 4, obstacle.y + 15, 8, 6 ; this.ctx.fillRect obstacle.x + obstacle.width / 2 - 2, obstacle.y + 25, 4, 8 ; } else if obstacle.type === "cactus-wide" { this.ctx.fillRect obstacle.x - 5, obstacle.y + 5, 10, 8 ; this.ctx.fillRect obstacle.x + obstacle.width - 5, obstacle.y + 10, 10, 8 ; this.ctx.fillRect obstacle.x + obstacle.width / 2 - 3, obstacle.y + 20, 6, 6 ; } this.ctx.fillStyle = "olive"; } } Animating the dino The dino has two little legs that we can move up and down as it runs to make a very simple running animation. Update the drawDino method to the following: js drawDino { const legOffset = this.gameState === "playing" && this.dino.isJumping ? Math.floor this.frameCount / 10 % 2 2 : 0; this.ctx.fillStyle = "green"; this.ctx.fillRect this.dino.x, this.dino.y, this.dino.width, this.dino.height, ; this.ctx.fillStyle = "darkgreen"; this.ctx.fillRect this.dino.x + 25, this.dino.y + 8, 4, 4 ; this.ctx.fillRect this.dino.x + 30, this.dino.y + 20, 8, 2 ; if this.dino.isJumping { this.ctx.fillStyle = "green"; this.ctx.fillRect this.dino.x + 10, this.dino.y + 40 + legOffset, 6, 8 - legOffset, ; this.ctx.fillRect this.dino.x + 24, this.dino.y + 40 - legOffset, 6, 8 + legOffset, ; } } Rendering the game components We now need to update the render method to draw the obstacles and the dino, and to overlay the instruction and game-over screens when appropriate: Update the render method so it clears the canvas, calls drawObstacles , then drawDino , and overlays the instruction and game-over screens when appropriate: render { // Clear canvas this.ctx.clearRect 0, 0, this.canvas.width, this.canvas.height ; // Draw obstacles this.drawObstacles ; // Draw dino this.drawDino ; // Draw instructions if waiting if this.gameState === "waiting" { this.drawInstructions ; } // Draw game over screen if this.gameState === "gameOver" { this.drawGameOver ; } } Hooking it up to physics, game start and reset We now need to update the startGame and resetGame methods to ensure the obstacle system is properly initialized and cleared when starting or resetting the game. Update the startGame method to reset the obstacles array when the game starts, and set the game speed and frame count to their initial values: startGame { this.gameState = "playing"; this.score = 0; this.gameSpeed = this.initialGameSpeed; this.obstacles = ; this.obstacleSpawnTimer = 0; this.frameCount = 0; this.updateScore ; this.updateStatus "" ; } Then update the resetGame method to clear out any leftover obstacles so restarting feels instant: resetGame { this.gameState = "waiting"; this.score = 0; this.gameSpeed = this.initialGameSpeed; this.obstacles = ; this.obstacleSpawnTimer = 0; this.frameCount = 0; this.dino.y = this.dino.groundY; this.dino.velocityY = 0; this.dino.isJumping = false; this.updateScore ; this.updateStatus "Click to Start " ; console.log "Game reset " ; } And finally, add the obstacle updates and collision checks to the updatePhysics method: updatePhysics { if this.gameState == "playing" return; this.frameCount++; // Apply gravity this.dino.velocityY += this.gravity; this.dino.y += this.dino.velocityY; // Ground collision if this.dino.y = this.dino.groundY { this.dino.y = this.dino.groundY; this.dino.velocityY = 0; this.dino.isJumping = false; } // Update score continuous scoring this.score += 0.1; this.updateScore ; // Update obstacles this.updateObstacles ; // Check collisions this.checkCollisions ; // Update difficulty this.updateGameDifficulty ; } Game over So far we have the dino jumping and obstacles moving, but nothing happens when they collide. Let’s fix that When a collision is detected, we need to end the game and display the game over screen. Update the gameOver method stub, to set the game state to “gameOver”, save the high score, and log a message: gameOver { this.gameState = "gameOver"; this.saveHighScore ; this.updateHighScore ; this.updateStatus "Game Over Click to restart" ; console.log Game Over Final Score: ${Math.floor this.score } ; } Next we’ll update the drawGameOver method to overlay a simple game over message on the canvas: drawGameOver { // Semi-transparent overlay this.ctx.fillStyle = "rgba 0, 0, 0, 0.8 "; this.ctx.fillRect 0, 0, this.canvas.width, this.canvas.height ; // Game Over text this.ctx.fillStyle = "white"; this.ctx.font = "36px Arial"; this.ctx.textAlign = "center"; this.ctx.fillText "GAME OVER", this.canvas.width / 2, this.canvas.height / 2 - 40, ; // Final score this.ctx.font = "20px Arial"; this.ctx.fillText Final Score: ${Math.floor this.score } , this.canvas.width / 2, this.canvas.height / 2 - 5, ; // High score if Math.floor this.score === this.highScore && this.highScore 0 { this.ctx.fillStyle = "gold"; this.ctx.fillText "🏆 NEW HIGH SCORE 🏆", this.canvas.width / 2, this.canvas.height / 2 + 25, ; } else if this.highScore 0 { this.ctx.fillStyle = " CCCCCC"; this.ctx.fillText High Score: ${this.highScore} , this.canvas.width / 2, this.canvas.height / 2 + 25, ; } // Restart instruction this.ctx.fillStyle = " FFFFFF"; this.ctx.font = "16px Arial"; this.ctx.fillText "Click or press SPACE to restart", this.canvas.width / 2, this.canvas.height / 2 + 55, ; } High scores We want players to feel rewarded for their best runs, so let’s implement a simple high score system using localStorage to store scores. We’ll create some methods to load, save, and update the high score, as well as modify the game over and reset logic to incorporate high score tracking. Update the stubbed methods to your DinoGame class: loadHighScore { return parseInt localStorage.getItem "dinoHighScore" || 0; } saveHighScore { if Math.floor this.score this.highScore { this.highScore = Math.floor this.score ; localStorage.setItem "dinoHighScore", this.highScore ; console.log New High Score: ${this.highScore} ; } } updateHighScore { if this.highScoreElement { this.highScoreElement.textContent = this.highScore; } } Now we need to update the init method to call the updateHighScore method to and update the high score display when the game starts, add the following line to the init method: this.updateHighScore ; Finalizing Stage 3 Outside the class we keep the same health check from Stage 2 so you can verify the API route is alive when the page loads: js async function checkHealth { try { const response = await fetch "/api/health" ; const data = await response.json ; console.log "Server health check:", data ; } catch error { console.error "Health check failed:", error ; } } window.addEventListener "load", = { checkHealth ; new DinoGame ; console.log "Stage 3 complete: Full game with obstacles and collision detection ", ; } ; When you run your game, you should see this Deploy your updated game Now that we have a basic game loop, jumping dino, and score tracking, it’s time to deploy our updated game to the web In your terminal you can run the following command to update the project you previously deployed in Stage 2: deno deploy Once deployed, you’ll have a fully functional dinosaur runner game where the dino can jump over obstacles, and the game ends upon collision. You’ll also have a URL that you can share to let others play your game Stage 4 is coming up soon, where we’ll connect the game to a backend so you can save scores server-side and open the door to multiplayer leaderboards. It’s going to get competitive What else are you building with Deno? Let us know on Twitter, Bluesky, or Discord.