AI game creator

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

No:49478

←

Prev Next

→

Dino runner
Developer User21066｜Date and time 24/3/5 5:50:27
Build time 9.412 sec｜Game capacity 1.487KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

<!DOCTYPE html>
<html>
<head>
<title>Dino Runner Game</title>
<style>
#gameCanvas {
  border: 1px solid black;
  display: block;
  margin: 0 auto;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="200"></canvas>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

let dinoX = 50;
let dinoY = 150;
let obstacleX = 400;
let obstacleY = 170;
let score = 0;
let gameSpeed = 3;

function drawDino() {
  ctx.fillStyle = 'green';
  ctx.fillRect(dinoX, dinoY, 20, 20);
}

function drawObstacle() {
  ctx.fillStyle = 'red';
  ctx.fillRect(obstacleX, obstacleY, 20, 20);
}

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

function updateGameArea() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

drawDino();
  drawObstacle();
  drawScore();

obstacleX -= gameSpeed;

if (obstacleX < 0) {
    obstacleX = 400;
    score++;
  }

if (dinoX + 20 > obstacleX && dinoX < obstacleX + 20 && dinoY + 20 > obstacleY) {
    alert('Game Over! Your Score: ' + score);
    obstacleX = 400;
    score = 0;
  }

if (score > 0 && score % 5 == 0) {
    gameSpeed += 0.5;
  }
}

function moveDino(event) {
  if (event.key === 'ArrowUp' && dinoY > 0) {
    dinoY -= 5;
  } else if (event.key === 'ArrowDown' && dinoY < 180) {
    dinoY += 5;
  }
}

document.addEventListener('keydown', moveDino);

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