AI game creator

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

No:46434

←

Prev Next

→

Snake Game
Developer User20070｜Date and time 24/2/24 20:54:02
Build time 12.038 sec｜Game capacity 2.394KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

<!DOCTYPE html>
<html>
<head>
<title>Змейка</title>
</head>
<body>
<canvas id="gameCanvas" width="400" height="400"></canvas>

const box = 20;

let snake = [
  { x: 10, y: 10 },
  { x: 10, y: 11 },
  { x: 10, y: 12 }
];

let food = { x: 15, y: 15 };

let score = 0;

let direction = "right";

function drawSnake() {
  ctx.fillStyle = "green";
  snake.forEach(segment => {
    ctx.fillRect(segment.x * box, segment.y * box, box, box);
  });
}

function drawFood() {
  ctx.fillStyle = "red";
  ctx.fillRect(food.x * box, food.y * box, box, box);
}

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

function checkCollision() {
  if (
    snake[0].x < 0 ||
    snake[0].x > canvas.width / box ||
    snake[0].y < 0 ||
    snake[0].y > canvas.height / box
  ) {
    clearInterval(gameLoop);
    alert("Game Over! Your score was: " + score);
  }

snake.slice(1).forEach(segment => {
    if (segment.x === snake[0].x && segment.y === snake[0].y) {
      clearInterval(gameLoop);
      alert("Game Over! Your score was: " + score);
    }
  });
}

function updateSnake() {
  let headX = snake[0].x;
  let headY = snake[0].y;

if (direction === "right") headX++;
  else if (direction === "left") headX--;
  else if (direction === "up") headY--;
  else if (direction === "down") headY++;

snake.unshift({ x: headX, y: headY });
}

function changeDirection(event) {
  const key = event.keyCode;

if (key === 37 && direction !== "right") direction = "left";
  else if (key === 38 && direction !== "down") direction = "up";
  else if (key === 39 && direction !== "left") direction = "right";
  else if (key === 40 && direction !== "up") direction = "down";
}

drawSnake();
drawFood();
drawScore();

let gameLoop = setInterval(() => {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

updateSnake();
  drawSnake();
  drawFood();
  eatFood();
  drawScore();
  checkCollision();
}, 100);

document.addEventListener("keydown", changeDirection);
</script>
</body>
</html>