AI game creator

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

No:50703

158

←

Prev Next

→

Snake Game
Developer User21391｜Date and time 24/3/9 12:36:00
Build time 8.324 sec｜Game capacity 2.19KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

```html
<!DOCTYPE html>
<html>
<head>
<title>Snake Game</title>
<style>
  canvas {
    border: 1px solid black;
    display: block;
    margin: 0 auto;
  }
</style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="400"></canvas>
<script>
  const canvas = document.getElementById("gameCanvas");
  const context = canvas.getContext("2d");
  
  const box = 20;
  let snake = [{x: 200, y: 200}];
  let direction = "right";
  let food = {x: 100, y: 100};
  
  function draw() {
    context.clearRect(0, 0, canvas.width, canvas.height);
    
    context.fillStyle = "green";
    snake.forEach(segment => {
      context.fillRect(segment.x, segment.y, box, box);
    });
    
    context.fillStyle = "red";
    context.fillRect(food.x, food.y, box, box);
  }
  
  function move() {
    let headX = snake[0].x;
    let headY = snake[0].y;
    
    if (direction === "left") headX -= box;
    if (direction === "right") headX += box;
    if (direction === "up") headY -= box;
    if (direction === "down") headY += box;
    
    snake.unshift({x: headX, y: headY});
    
    if (headX === food.x && headY === food.y) {
      food.x = Math.floor(Math.random() * 20) * box;
      food.y = Math.floor(Math.random() * 20) * box;
    } else {
      snake.pop();
    }
  }
  
  function changeDirection(event) {
    const key = event.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";
  }
  
  function gameOver() {
    if (snake[0].x < 0 || snake[0].x >= canvas.width || snake[0].y < 0 || snake[0].y >= canvas.height) {
      clearInterval(game);
      alert("Game Over!");
    }
    
    for (let i = 1; i < snake.length; i++) {
      if (snake[0].x === snake[i].x && snake[0].y === snake[i].y) {
        clearInterval(game);
        alert("Game Over!");
      }
    }
  }
  
  function gameLoop() {
    draw();
    move();
    gameOver();
  }
  
  document.addEventListener("keydown", changeDirection);
  const game = setInterval(gameLoop, 100);
</script>
</body>
</html>
```