Make game snake eat apple with's game

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

No:48228

←

Prev Next

→

Make game snake eat apple with
Developer User20718｜Date and time 24/3/1 19:59:27
Build time 11.262 sec｜Game capacity 2.068KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html>
<head>
  <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 grid = 20;
    let snake = [{x: 10, y: 10}];
    let apple = {x: 15, y: 15};
    let direction = {x: 1, y: 0};
    
    function drawSnake() {
      ctx.fillStyle = "green";
      snake.forEach(segment => {
        ctx.fillRect(segment.x * grid, segment.y * grid, grid, grid);
      });
    }
    
    function drawApple() {
      ctx.fillStyle = "red";
      ctx.fillRect(apple.x * grid, apple.y * grid, grid, grid);
    }
    
    function handleInput(e) {
      switch(e.key) {
        case "ArrowUp":
          direction = {x: 0, y: -1};
          break;
        case "ArrowDown":
          direction = {x: 0, y: 1};
          break;
        case "ArrowLeft":
          direction = {x: -1, y: 0};
          break;
        case "ArrowRight":
          direction = {x: 1, y: 0};
          break;
      }
    }
    
    function update() {
      const head = {x: snake[0].x + direction.x, y: snake[0].y + direction.y};
      
      if (head.x === apple.x && head.y === apple.y) {
        snake.unshift({x: apple.x, y: apple.y});
        apple.x = Math.floor(Math.random() * canvas.width / grid);
        apple.y = Math.floor(Math.random() * canvas.height / grid);
      } else {
        snake.pop();
      }
      
      if (head.x < 0 || head.x >= canvas.width / grid || head.y < 0 || head.y >= canvas.height / grid || snake.some(segment => segment.x === head.x && segment.y === head.y)) {
        alert("Game Over!");
        location.reload();
      }
      
      snake.unshift(head);
    }
    
    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      drawSnake();
      drawApple();
    }
    
    function gameLoop() {
      update();
      draw();
    }
    
    document.addEventListener("keydown", handleInput);
    setInterval(gameLoop, 100);
  </script>
</body>
</html>