AI game creator

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

No:11247

←

Prev Next

→

Snake Game
Developer No｜Date and time 23/8/9 5:33:06
Build time 29.719 sec｜Game capacity 3.621KB｜

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>
  <style>
    #game-board {
      display: flex;
      flex-wrap: wrap;
      width: 300px;
      height: 300px;
      border: 1px solid black;
    }
    
    .cell {
      width: 10%;
      height: 10%;
      border: 1px solid lightgray;
    }
    
    .snake {
      background-color: green;
    }
    
    .food {
      background-color: red;
    }
  </style>
</head>
<body>
  <div id="game-board"></div>
  
  <script>
    // Snake Game
    
    const boardSize = 30;
    const cellSize = 10;
    const initialSnakeLength = 3;
    let snake = [];
    let direction = "right";
    let foodPosition = { x: 0, y: 0 };
    let gameInterval;
    
    function setup() {
      const gameBoard = document.getElementById("game-board");
      
      for(let i = 0; i < boardSize; i++) {
        for(let j = 0; j < boardSize; j++) {
          const cell = document.createElement("div");
          cell.classList.add("cell");
          cell.id = `cell_${i}_${j}`;
          gameBoard.appendChild(cell);
        }
      }
      
      for(let i = 0; i < initialSnakeLength; i++) {
        snake.push({ x: i, y: 0 });
      }
      
      placeFood();
      draw();
      
      gameInterval = setInterval(update, 300);
      
      document.addEventListener("keydown", handleKeyPress);
    }
    
    function update() {
      const head = { ...snake[0] };
      
      switch(direction) {
        case "up":
          head.y--;
          break;
        case "down":
          head.y++;
          break;
        case "left":
          head.x--;
          break;
        case "right":
          head.x++;
          break;
      }
      
      if (head.x < 0 || head.y < 0 || head.x >= boardSize || head.y >= boardSize || isCollidingWithSnake(head)) {
        clearInterval(gameInterval);
        alert("Game Over!");
        return;
      }
      
      snake.unshift(head);
      
      if (isCollidingWithFood(head)) {
        placeFood();
      } else {
        snake.pop();
      }
      
      draw();
    }
    
    function draw() {
      const gameBoard = document.getElementById("game-board");
      
      for(let i = 0; i < boardSize; i++) {
        for(let j = 0; j < boardSize; j++) {
          const cell = document.getElementById(`cell_${i}_${j}`);
          cell.classList.remove("snake");
          cell.classList.remove("food");
        }
      }
      
      snake.forEach(segment => {
        const { x, y } = segment;
        const cell = document.getElementById(`cell_${x}_${y}`);
        cell.classList.add("snake");
      });
      
      const { x, y } = foodPosition;
      const cell = document.getElementById(`cell_${x}_${y}`);
      cell.classList.add("food");
    }
    
    function placeFood() {
      const x = Math.floor(Math.random() * boardSize);
      const y = Math.floor(Math.random() * boardSize);
      foodPosition = { x, y };
    }
    
    function isCollidingWithSnake(position) {
      return snake.some(segment => segment.x === position.x && segment.y === position.y);
    }
    
    function isCollidingWithFood(position) {
      return position.x === foodPosition.x && position.y === foodPosition.y;
    }
    
    function handleKeyPress(event) {
      switch(event.key) {
        case "ArrowUp":
          direction = "up";
          break;
        case "ArrowDown":
          direction = "down";
          break;
        case "ArrowLeft":
          direction = "left";
          break;
        case "ArrowRight":
          direction = "right";
          break;
      }
    }
    
    setup();
  </script>
</body>
</html>