Snake Game's game | AI game creator

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

No:49963

75

Snake Game
Developer User21192｜Date and time 24/3/7 4:02:00
Build time 13.227 sec｜Game capacity 2.767KB｜

→ 　

0　

0　

　
　
　
　

[PR]現在の本の売れ筋ランキング

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
<head>
  <title>Snake Game</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>

<canvas id="gameCanvas" width="400" height="400"></canvas>

<script>
  const canvas = document.getElementById('gameCanvas');
  const ctx = canvas.getContext('2d');
  
  const box = 20;
  
  let snake = [
    { x: 200, y: 200 },
    { x: 190, y: 200 },
    { x: 180, y: 200 },
    { x: 170, y: 200 },
    { x: 160, y: 200 }
  ];
  
  let score = 0;
  let food = { x: 0, y: 0 };
  let dx = 0;
  let dy = 0;
  
  function drawSnake() {
    snake.forEach(segment => {
      ctx.fillStyle = 'green';
      ctx.fillRect(segment.x, segment.y, box, box);
      ctx.strokeStyle = 'black';
      ctx.strokeRect(segment.x, segment.y, box, box);
    });
  }
  
  function drawFood() {
    ctx.fillStyle = 'red';
    ctx.fillRect(food.x, food.y, box, box);
    ctx.strokeStyle = 'black';
    ctx.strokeRect(food.x, food.y, box, box);
  }
  
  function drawScore() {
    ctx.fillStyle = 'black';
    ctx.font = '20px Arial';
    ctx.fillText('Score: ' + score, 10, 30);
  }
  
  function createFood() {
    food.x = Math.floor(Math.random() * 20) * box;
    food.y = Math.floor(Math.random() * 20) * box;
  
    snake.forEach(segment => {
      if (segment.x === food.x && segment.y === food.y) {
        createFood();
      }
    });
  }
  
  function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
  
    drawSnake();
    drawFood();
    drawScore();
  
    let head = { x: snake[0].x + dx, y: snake[0].y + dy };
  
    if (head.x === food.x && head.y === food.y) {
      score++;
      createFood();
    } else {
      snake.pop();
    }
  
    snake.unshift(head);
  
    if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height || collision()) {
      clearInterval(gameInterval);
      alert('Game Over! Your score: ' + score);
      location.reload();
    }
  }
  
  function collision() {
    return snake.slice(1).some(segment => segment.x === snake[0].x && segment.y === snake[0].y);
  }
  
  function changeDirection(event) {
    const keyPressed = event.keyCode;
  
    if (keyPressed === 37 && dx !== box) {
      dx = -box;
      dy = 0;
    }
  
    if (keyPressed === 38 && dy !== box) {
      dx = 0;
      dy = -box;
    }
  
    if (keyPressed === 39 && dx !== -box) {
      dx = box;
      dy = 0;
    }
  
    if (keyPressed === 40 && dy !== -box) {
      dx = 0;
      dy = box;
    }
  }
  
  document.addEventListener('keydown', changeDirection);
  
  createFood();
  let gameInterval = setInterval(draw, 100);
</script>

</body>
</html>