Snake Game's game | AI game creator

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

No:45916

90

Snake Game
Developer User19746｜Date and time 24/2/22 2:15:27
Build time 17.754 sec｜Game capacity 2.292KB｜

→ 　

0　

0　

　
　
　
　

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

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

(C)2023 HisashiApp

<!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>

<script>
    const canvas = document.getElementById("gameCanvas");
    const ctx = canvas.getContext("2d");

const snakeSize = 10;
    const gridSize = canvas.width / snakeSize;
    
    let snake = [];
    snake[0] = {
      x: Math.floor(gridSize / 2) * snakeSize,
      y: Math.floor(gridSize / 2) * snakeSize
    };
    
    let food = {
      x: Math.floor(Math.random() * gridSize) * snakeSize,
      y: Math.floor(Math.random() * gridSize) * snakeSize
    };
    
    let vx = 0;
    let vy = 0;
    
    function drawSnakePart(part) {
      ctx.fillStyle = "green";
      ctx.fillRect(part.x, part.y, snakeSize, snakeSize);
    }
    
    function drawFood() {
      ctx.fillStyle = "red";
      ctx.fillRect(food.x, food.y, snakeSize, snakeSize);
    }
    
    function drawGame() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      
      snake.forEach(drawSnakePart);
      drawFood();
      
      let head = { x: snake[0].x + vx, y: snake[0].y + vy };
      
      if (head.x === food.x && head.y === food.y) {
        food.x = Math.floor(Math.random() * gridSize) * snakeSize;
        food.y = Math.floor(Math.random() * gridSize) * snakeSize;
      } else {
        snake.pop();
      }
      
      if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height || snake.some(part => part.x === head.x && part.y === head.y)) {
        clearInterval(gameLoop);
        alert("Game Over!");
        location.reload();
      }
      
      snake.unshift(head);
    }
    
    function keyDownHandler(e) {
      switch (e.keyCode) {
        case 37:
          vx = -snakeSize;
          vy = 0;
          break;
        case 38:
          vx = 0;
          vy = -snakeSize;
          break;
        case 39:
          vx = snakeSize;
          vy = 0;
          break;
        case 40:
          vx = 0;
          vy = snakeSize;
          break;
      }
    }
    
    document.addEventListener("keydown", keyDownHandler);
    let gameLoop = setInterval(drawGame, 100);

</script>
</body>
</html>