Crea el juego de snake que se juegue automaticamente's game

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

No:30294

←

Prev Next

→

Crea el juego de snake que se juegue automaticamen..ALL
Developer User14018｜Date and time 23/12/21 5:23:39
Build time 22.628 sec｜Game capacity 3.589KB｜

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: 20px;
      height: 20px;
      background-color: white;
      border: 1px solid grey;
    }
  </style>
</head>
<body>
  <div id="game-board"></div>
  <script>
    window.onload = function() {
      const boardSize = 15;
      const cellSize = 20;
      const snakeColor = "green";
      const appleColor = "red";

let board = [];
      let snake = [];
      let direction = "right";
      let int;

// Create the game board
      const gameBoard = document.getElementById("game-board");
      gameBoard.style.width = cellSize * boardSize + "px";
      gameBoard.style.height = cellSize * boardSize + "px";

for (let i = 0; i < boardSize; i++) {
        for (let j = 0; j < boardSize; j++) {
          const cell = document.createElement("div");
          cell.className = "cell";
          gameBoard.appendChild(cell);
          board.push(cell);
        }
      }

// Initialize the snake
      const initialSnakePosition = Math.floor(boardSize * boardSize / 2) + Math.floor(boardSize / 2);
      snake.push(board[initialSnakePosition]);
      snake[0].style.backgroundColor = snakeColor;

// Move the snake automatically
      int = setInterval(moveSnake, 200);

// Handle arrow key events
      document.onkeydown = function(event) {
        const keyCode = event.keyCode;
        if (keyCode === 37 && direction !== "right") direction = "left";
        if (keyCode === 38 && direction !== "down") direction = "up";
        if (keyCode === 39 && direction !== "left") direction = "right";
        if (keyCode === 40 && direction !== "up") direction = "down";
      };

// Move the snake
      function moveSnake() {
        const currentHeadIndex = board.indexOf(snake[0]);

// Get the next head position coordinates based on the current direction
        let x = currentHeadIndex % boardSize;
        let y = Math.floor(currentHeadIndex / boardSize);

if (direction === "left") x--;
        if (direction === "up") y--;
        if (direction === "right") x++;
        if (direction === "down") y++;

// Check if the snake hits the wall or itself
        if (
          x < 0 ||
          x >= boardSize ||
          y < 0 ||
          y >= boardSize ||
          board[y * boardSize + x].style.backgroundColor === snakeColor
        ) {
          clearInterval(int);
          alert("Game Over!");
          return;
        }

const newHead = board[y * boardSize + x];

// Check if the snake eats the apple
        if (newHead.style.backgroundColor === appleColor) {
          // Increase the snake size by one
          snake.unshift(newHead);
          newHead.style.backgroundColor = snakeColor;
          generateApple();
          return;
        }

// Move the snake
        snake[snake.length - 1].style.backgroundColor = "white";
        snake.pop();
        snake.unshift(newHead);
        newHead.style.backgroundColor = snakeColor;
      }

// Generate an apple randomly on the board
      function generateApple() {
        const randomIndex = Math.floor(Math.random() * board.length);
        const randomCell = board[randomIndex];

if (randomCell.style.backgroundColor === "") {
          randomCell.style.backgroundColor = appleColor;
        } else {
          generateApple();
        }
      }
    };
  </script>
</body>
</html>