Click here for free DL of the app version that can save data.

No:47089

←

Prev Next

→

Offline dinosaur game
Developer User15380｜Date and time 24/2/27 7:51:47
Build time 7.262 sec｜Game capacity 1.515KB｜

Script

Offline Dinosaur Game

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

Click here for free DL of the app version that can save data.

```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Offline Dinosaur Game</title>
</head>
<body style="text-align: center;">
<h1>Offline Dinosaur Game</h1>
<canvas id="gameCanvas" width="400" height="200" style="border: 1px solid black;"></canvas>
<script>
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");

const dino = {
  x: 50,
  y: 150,
  width: 30,
  height: 30,
  speed: 3
};

const cactus = {
  x: 400,
  y: 170,
  width: 20,
  height: 20,
  speed: 5
};

function drawDino() {
  ctx.fillStyle = "green";
  ctx.fillRect(dino.x, dino.y, dino.width, dino.height);
}

function drawCactus() {
  ctx.fillStyle = "brown";
  ctx.fillRect(cactus.x, cactus.y, cactus.width, cactus.height);
}

function updateGameArea() {
  ctx.clearRect(0, 0, 400, 200);
  drawDino();
  drawCactus();
  dino.x += dino.speed;
  cactus.x -= cactus.speed;
  if (dino.x + dino.width > cactus.x && dino.x < cactus.x + cactus.width && dino.y + dino.height > cactus.y) {
    alert("Game Over!");
    dino.x = 50;
    cactus.x = 400;
  }
}

function moveUp() {
  if (dino.y > 100) {
    dino.y -= 10;
  }
}

function moveDown() {
  if (dino.y < 150) {
    dino.y += 10;
  }
}

document.addEventListener("keydown", function(event) {
  if (event.key === "ArrowUp") {
    moveUp();
  } else if (event.key === "ArrowDown") {
    moveDown();
  }
});

setInterval(updateGameArea, 20);
</script>
</body>
</html>
```