Skip to main content
Deno 2.6 is here 🎉
Learn more
Building a game with Deno.

Build a dinosaur runner game with Deno, pt. 3

Obstacles and collision detection

In Stage 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:

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:

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 simiple running animation. Update the drawDino() method to the following:

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:

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!",
  );
});

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 competetive!

What else are you building with Deno? Let us know on Twitter, Bluesky, or Discord.