AI game creator

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

No:17239

120

←

Prev Next

→

Snake Game
Developer User7614｜Date and time 23/9/22 19:40:01
Build time 39.633 sec｜Game capacity 3.421KB｜

Script

Sure! Here's a simple implementation of the Snake game using HTML and JavaScript:

Please note that this is a basic implementation of the Snake game and may not include advanced features or optimizations. You can further enhance this game by adding score tracking, levels, and additional functionalities.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's a simple implementation of the Snake game using HTML and JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Snake Game</title>
  <style>
    canvas {
      border: 1px solid #000;
      background-color: #fff;
    }
  </style>
</head>
<body>
  <canvas id="snakeCanvas" width="400" height="400"></canvas>

// Keyboard event listeners
      document.addEventListener("keydown", direction);

// Change snake direction based on arrow key input
      function direction(event) {
        if (event.keyCode === 37 && d !== "RIGHT") {
          d = "LEFT";
        } else if (event.keyCode === 38 && d !== "DOWN") {
          d = "UP";
        } else if (event.keyCode === 39 && d !== "LEFT") {
          d = "RIGHT";
        } else if (event.keyCode === 40 && d !== "UP") {
          d = "DOWN";
        }
      }

// Check if two coordinates are the same
      function equalCoords(a, b) {
        return a.x === b.x && a.y === b.y;
      }

// Check if snake hits its own body
      function collision() {
        for (let i = 1; i < snake.length; i++) {
          if (equalCoords(snake[0], snake[i])) {
            return true;
          }
        }
        return false;
      }

// Draw everything on the canvas
      function draw() {
        // Clear the canvas
        ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw the snake
        for (let i = 0; i < snake.length; i++) {
          ctx.fillStyle = i === 0 ? "green" : "lightgreen";
          ctx.fillRect(snake[i].x, snake[i].y, box, box);
          ctx.strokeStyle = "black";
          ctx.strokeRect(snake[i].x, snake[i].y, box, box);
        }

// Draw the food
        ctx.fillStyle = "red";
        ctx.fillRect(food.x, food.y, box, box);

// Move the snake
        let snakeX = snake[0].x;
        let snakeY = snake[0].y;

if (d === "LEFT") snakeX -= box;
        if (d === "UP") snakeY -= box;
        if (d === "RIGHT") snakeX += box;
        if (d === "DOWN") snakeY += box;

// Check if snake eats the food
        if (equalCoords(snake[0], food)) {
          food = { x: Math.floor(Math.random() * canvasSize) * box, y: Math.floor(Math.random() * canvasSize) * box };
        } else {
          snake.pop();
        }

// Create new head for the snake
        let newHead = { x: snakeX, y: snakeY };

// Game over conditions
        if (snakeX < 0 || snakeY < 0 || snakeX >= canvas.width || snakeY >= canvas.height || collision()) {
          clearInterval(game);
        }

snake.unshift(newHead);
      }

// Start the game
      let game = setInterval(draw, 200);

})();
  </script>
</body>
</html>
```