AI game creator

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

No:49301

111

←

Prev Next

→

Snake Game
Developer User20998｜Date and time 24/3/4 10:09:40
Build time 12.926 sec｜Game capacity 2.731KB｜

Script

←

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>Snake Game</title>
</head>
<body>
<canvas id="gameCanvas" width="400" height="400"></canvas>

const boxSize = 10;
const canvasWidth = canvas.width;
const canvasHeight = canvas.height;

let snake = [
  { x: 200, y: 200 },
  { x: 190, y: 200 },
  { x: 180, y: 200 }
];

let score = 0;

let food = { x: 0, y: 0 };
generateFood();

document.addEventListener('keydown', changeDirection);

let dx = boxSize;
let dy = 0;

let isGameOver = false;

function generateFood() {
  food.x = Math.floor(Math.random() * (canvasWidth / boxSize)) * boxSize;
  food.y = Math.floor(Math.random() * (canvasHeight / boxSize)) * boxSize;

snake.forEach(segment => {
    if (segment.x === food.x && segment.y === food.y) {
      generateFood();
    }
  });
}

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

if (keyPressed === 'ArrowLeft' && dx === 0) {
    dx = -boxSize;
    dy = 0;
  }

if (keyPressed === 'ArrowUp' && dy === 0) {
    dx = 0;
    dy = -boxSize
  }

if (keyPressed === 'ArrowRight' && dx === 0) {
    dx = boxSize;
    dy = 0;
  }

if (keyPressed === 'ArrowDown' && dy === 0) {
    dx = 0;
    dy = boxSize;
  }
}

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

function moveSnake() {
  const head = { x: snake[0].x + dx, y: snake[0].y + dy };
  snake.unshift(head);

if (head.x === food.x && head.y === food.y) {
    generateFood();
    score++;
  } else {
    snake.pop();
  }

if (head.x < 0 || head.y < 0 || head.x >= canvasWidth || head.y >= canvasHeight || checkCollision()) {
    isGameOver = true;
  }
}

function checkCollision() {
  for (let i = 1; i < snake.length; i++) {
    if (snake[i].x === snake[0].x && snake[i].y === snake[0].y) {
      return true;
    }
  }
  return false;
}

function drawFood() {
  ctx.fillStyle = 'red';
  ctx.fillRect(food.x, food.y, boxSize, boxSize);
}

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

function drawGameOverScreen() {
  ctx.fillStyle = 'black';
  ctx.font = '30px Arial';
  ctx.fillText('Game Over', 150, 200);
  ctx.fillText(`Score: ${score}`, 170, 240);
}

function mainLoop() {
  if (isGameOver) {
    drawGameOverScreen();
    return;
  }

ctx.clearRect(0, 0, canvasWidth, canvasHeight);

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

setTimeout(mainLoop, 100);
}

mainLoop();
</script>

</body>
</html>