Progressive Full Stack Application Development with Live Projects

Shopping cart
No products in the cart.
JavaScriptJavaScript Activity

Code a Dino Run Game in JavaScript

Creating a simple “Dino Run” game (like the one from Chrome when offline) in JavaScript without using images is quite straightforward and fun! Below is an implementation that uses basic HTML5 canvas and JavaScript.

How the Game Works

HTML (index.html)

				
					<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dino Run Game</title>
</head>
<body>
  <canvas id="gameCanvas"></canvas>

  <script src="game.js"></script>
</body>
</html>

CSS (style.css)

				
					body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #f0f0f0;
    }
    canvas {
      display: block;
      margin: auto;
      background-color: #f4f4f4;
    }

JavaScript (game.js)

				
					// Get the canvas and its context
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

// Set up the canvas size
canvas.width = 800;
canvas.height = 200;

// Variables for the game
let dino = {
  x: 50,
  y: canvas.height - 50,
  width: 40,
  height: 40,
  speed: 0,
  gravity: 0.8,
  jumpHeight: -12,
  jumping: false
};

let obstacles = [];
let score = 0;

// Event listener for jumping
document.addEventListener('keydown', (event) => {
  if (event.key === ' ' && !dino.jumping) { // Spacebar for jump
    dino.speed = dino.jumpHeight;
    dino.jumping = true;
  }
});

// Function to update the dino's position
function updateDino() {
  dino.y += dino.speed;
  dino.speed += dino.gravity;

  if (dino.y > canvas.height - dino.height) {
    dino.y = canvas.height - dino.height;
    dino.jumping = false;
    dino.speed = 0;
  }
}

// Function to create new obstacles
function createObstacle() {
  const gap = 100; // Space between obstacles
  const height = Math.floor(Math.random() * 50) + 20;
  const width = 20;
  obstacles.push({ x: canvas.width, y: canvas.height - height, width, height });
}

// Function to update the obstacles
function updateObstacles() {
  for (let i = 0; i < obstacles.length; i++) {
    obstacles[i].x -= 5; // Move obstacles to the left

    // Check for collision with the dino
    if (
      dino.x + dino.width > obstacles[i].x &&
      dino.x < obstacles[i].x + obstacles[i].width &&
      dino.y + dino.height > obstacles[i].y
    ) {
      gameOver();
    }

    // Remove obstacles that are out of screen
    if (obstacles[i].x + obstacles[i].width < 0) {
      obstacles.splice(i, 1);
      score++;
    }
  }
}

// Function to handle the game over state
function gameOver() {
  alert(`Game Over! Your score was: ${score}`);
  document.location.reload(); // Reload the game
}

// Function to draw the dino on the canvas
function drawDino() {
  ctx.fillStyle = 'green';
  ctx.fillRect(dino.x, dino.y, dino.width, dino.height);
}

// Function to draw obstacles
function drawObstacles() {
  ctx.fillStyle = 'red';
  for (let i = 0; i < obstacles.length; i++) {
    ctx.fillRect(obstacles[i].x, obstacles[i].y, obstacles[i].width, obstacles[i].height);
  }
}

// Function to draw the score
function drawScore() {
  ctx.font = '20px Arial';
  ctx.fillStyle = 'black';
  ctx.fillText('Score: ' + score, 10, 30);
}

// Main game loop
function gameLoop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas

  updateDino(); // Update dino position
  updateObstacles(); // Update obstacle positions

  drawDino(); // Draw dino
  drawObstacles(); // Draw obstacles
  drawScore(); // Draw score

  // Create new obstacle every 100 frames
  if (Math.random() < 0.02) {
    createObstacle();
  }

  requestAnimationFrame(gameLoop); // Keep the loop running
}

// Start the game loop
gameLoop();

Explanation

  • Canvas Setup: The game is rendered using an HTML <canvas> element. The canvas size is set to 800×200.
  • Dino Object: The dino is a simple rectangle. We manage its gravity, jump, and vertical position.
  • Obstacles: Obstacles are randomly generated and move from right to left. When an obstacle goes off-screen, it is removed from the array, and the score increases.
  • Jumping Logic: The spacebar (keydown event) makes the dino jump by applying an upward velocity. Gravity affects the dino’s movement, making it fall back down.
  • Collision Detection: The game checks if the dino collides with an obstacle using rectangle collision logic.
  • Game Over: If the dino collides with an obstacle, a “Game Over” alert pops up, and the game reloads.

How to Run?

  • Save the HTML code in a file called index.html.
  • Save the JavaScript code in a file called game.js in the same folder.
  • Open the index.html file in a web browser to play the game.