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
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.
By the end of this stage, you will have learned:
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();
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() {}
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):
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;
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 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.
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"; } }
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:
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, ); } }
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() { this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); this.drawObstacles(); this.drawDino(); if (this.gameState === "waiting") { this.drawInstructions(); } if (this.gameState === "gameOver") { this.drawGameOver(); } }
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++; this.dino.velocityY += this.gravity; this.dino.y += this.dino.velocityY; if (this.dino.y >= this.dino.groundY) { this.dino.y = this.dino.groundY; this.dino.velocityY = 0; this.dino.isJumping = false; } this.score += 0.1; this.updateScore(); this.updateObstacles(); this.checkCollisions(); this.updateGameDifficulty(); }
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() { this.ctx.fillStyle = "rgba(0, 0, 0, 0.8)"; this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height); 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, ); this.ctx.font = "20px Arial"; this.ctx.fillText( `Final Score: ${Math.floor(this.score)}`, this.canvas.width / 2, this.canvas.height / 2 - 5, ); 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, ); } 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, ); }
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:
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!", ); });
When you run your game, you should see this!
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:
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.
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。