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

No:46216

113

←

Prev Next

→

Snake game .snake finds the apple gets score and g..ALL
Developer User18896｜Date and time 24/2/24 1:29:18
Build time 15.438 sec｜Game capacity 2.908KB｜

Script

Snake Game

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
  <head>
    <title>Snake Game</title>
    <style>
      body {
        background: #2C3E50;
        text-align: center;
        color: #FFF;
        font-family: Arial, sans-serif;
      }
      canvas {
        border: 1px solid #FFF;
      }
    </style>
  </head>
  <body>
    <h1>Snake Game</h1>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <script>
      const canvas = document.getElementById("gameCanvas");
      const ctx = canvas.getContext("2d");
      const box = 20;
      
      let snake = [];
      snake[0] = {
        x: 10 * box,
        y: 10 * box
      };
      
      let apple = {
        x: Math.floor(Math.random() * 20) * box,
        y: Math.floor(Math.random() * 20) * box
      };
      
      let score = 0;
      
      let direction;
      
      function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        ctx.fillStyle = "red";
        ctx.fillRect(apple.x, apple.y, box, box);
        
        for (let i = 0; i < snake.length; i++) {
          ctx.fillStyle = (i === 0) ? "green" : "white";
          ctx.fillRect(snake[i].x, snake[i].y, box, box);
        }
        
        let snakeX = snake[0].x;
        let snakeY = snake[0].y;
        
        if (direction === "LEFT") snakeX -= box;
        if (direction === "UP") snakeY -= box;
        if (direction === "RIGHT") snakeX += box;
        if (direction === "DOWN") snakeY += box;
        
        if (snakeX === apple.x && snakeY === apple.y) {
          score++;
          apple = {
            x: Math.floor(Math.random() * 20) * box,
            y: Math.floor(Math.random() * 20) * box
          };
        } else {
          snake.pop();
        }
        
        let newHead = {
          x: snakeX,
          y: snakeY
        };
        
        if (snakeX < 0 || snakeX >= canvas.width || snakeY < 0 || snakeY >= canvas.height || collision(newHead)) {
          clearInterval(game);
          alert("Game Over! Your score: " + score);
          location.reload();
        }
        
        snake.unshift(newHead);
        
        ctx.fillStyle = "white";
        ctx.font = "20px Arial";
        ctx.fillText("Score: " + score, 10, 30);
      }
      
      function collision(head) {
        for (let i = 0; i < snake.length; i++) {
          if (head.x === snake[i].x && head.y === snake[i].y) {
            return true;
          }
        }
        return false;
      }
      
      document.addEventListener("keydown", (e) => {
        const key = e.keyCode;
        if (key === 37 && direction !== "RIGHT") direction = "LEFT";
        if (key === 38 && direction !== "DOWN") direction = "UP";
        if (key === 39 && direction !== "LEFT") direction = "RIGHT";
        if (key === 40 && direction !== "UP") direction = "DOWN";
      });
      
      let game = setInterval(draw, 100);
    </script>
  </body>
</html>