Advanced Chrome Dino Game (HTML + JS + Sprites)

🎮 Add a Chrome Dino Game Clone to Your Website

Why not make users smile while they wait? Here's a mini Chrome-style dinosaur game you can embed in your site.

🕹️ Live Game Demo

Score: 0

Press Enter to Start / Jump

💥 Game Over! Final score:

📄 Full Game Code

Below is the exact code used above. You can copy and paste it into your own page:

<canvas id="gameCanvas" width="800" height="200"></canvas>
<div id="score">Score: 0</div>
<div id="gameOver" style="display:none;">
  💥 Game Over! Final score: <span id="finalScore"></span><br>
  <button onclick="restartGame()">Restart</button>
</div>

<script>
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");
const dinoImg = new Image();
dinoImg.src = "https://i.imgur.com/6b8aR0y.png";
const cactusImg = new Image();
cactusImg.src = "https://i.imgur.com/L3h1uVJ.png";

let dino = {
  x: 50, y: 150, width: 44, height: 47,
  vy: 0, gravity: 0.6, jumpForce: -12, grounded: true
};
let obstacles = [], score = 0, speed = 6, frame = 0, gameRunning = true;

function spawnObstacle() {
  obstacles.push({ x: canvas.width, y: 150, width: 25, height: 40 });
}
function drawDino() {
  ctx.drawImage(dinoImg, dino.x, dino.y - dino.height, dino.width, dino.height);
}
function drawObstacle(obs) {
  ctx.drawImage(cactusImg, obs.x, obs.y - obs.height, obs.width, obs.height);
}
function update() {
  if (!gameRunning) return;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawDino();
  dino.vy += dino.gravity;
  dino.y += dino.vy;
  if (dino.y > 150) {
    dino.y = 150;
    dino.vy = 0;
    dino.grounded = true;
  }
  for (let i = obstacles.length - 1; i >= 0; i--) {
    let obs = obstacles[i];
    obs.x -= speed;
    drawObstacle(obs);
    if (
      dino.x < obs.x + obs.width &&
      dino.x + dino.width > obs.x &&
      dino.y > obs.y - obs.height
    ) {
      gameRunning = false;
      document.getElementById("finalScore").textContent = score;
      document.getElementById("gameOver").style.display = "block";
      return;
    }
    if (obs.x + obs.width < 0) {
      obstacles.splice(i, 1);
      score++;
      document.getElementById("score").textContent = "Score: " + score;
      if (score % 5 === 0) speed += 0.5;
    }
  }
  if (frame % 90 === 0) spawnObstacle();
  frame++;
  requestAnimationFrame(update);
}
function restartGame() {
  location.reload(); // Or re-call your init function if structured
}
document.addEventListener("keydown", (e) => {
  if ((e.code === "Space" || e.code === "ArrowUp") && dino.grounded) {
    dino.vy = dino.jumpForce;
    dino.grounded = false;
  }
});
update();
</script>

🔗 Dino & Cactus Images Used

• Dino Sprite
• Cactus Sprite

💡 Tips

You can delay showing the game if a background process takes longer than expected:

<div id="dino-game" style="display:none;">...</div>

setTimeout(() => {
  document.getElementById("dino-game").style.display = 'block';
}, 3000);