AI game creator

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

No:19807

←

Prev Next

→

Snake Game
Developer User8837｜Date and time 23/10/7 0:16:30
Build time 27.058 sec｜Game capacity 4.505KB｜

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 {
      width: 400px;
      height: 400px;
      background-color: black;
      position: relative;
    }
    .snake {
      width: 20px;
      height: 20px;
      position: absolute;
      background-color: green;
      z-index: 1;
    }
    .food {
      width: 20px;
      height: 20px;
      position: absolute;
      background-color: red;
    }
  </style>
</head>
<body>
  <div id="game-board"></div>

// Create the game board with tiles
      function createBoard() {
        for (let i = 0; i < boardSize; i++) {
          const row = [];
          for (let j = 0; j < boardSize; j++) {
            const tile = document.createElement("div");
            tile.style.width = tileSize + "px";
            tile.style.height = tileSize + "px";
            tile.style.position = "absolute";
            tile.style.top = i * tileSize + "px";
            tile.style.left = j * tileSize + "px";

gameBoard.appendChild(tile);
            row.push(tile);
          }
          tiles.push(row);
        }
      }

// Generate random coordinates for the food
      function generateFood() {
        const x = Math.floor(Math.random() * boardSize);
        const y = Math.floor(Math.random() * boardSize);
        food = { x, y };

tiles[x][y].className = "food";
      }

// Initialize the snake
      function initializeSnake() {
        const x = Math.floor(boardSize / 2);
        const y = Math.floor(boardSize / 2);
        const head = { x, y };

snake.push(head);
      }

// Move the snake in the specified direction
      function moveSnake(direction) {
        const head = { ...snake[0] };

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

snake.unshift(head);

if (head.x === food.x && head.y === food.y) {
          // The snake has eaten the food
          tiles[food.x][food.y].className = "";
          generateFood();
        } else {
          const tail = snake.pop();
          tiles[tail.x][tail.y].className = "";
        }

if (isCollision()) {
          // Game over
          clearInterval(gameInterval);
          alert("Game Over! Your score: " + (snake.length - 1));
          resetGame();
        }

drawSnake();
      }

// Check for collisions
      function isCollision() {
        const head = snake[0];

if (
          head.x < 0 ||
          head.y < 0 ||
          head.x >= boardSize ||
          head.y >= boardSize
        ) {
          return true; // Snake hits the wall
        }

for (let i = 1; i < snake.length; i++) {
          if (snake[i].x === head.x && snake[i].y === head.y) {
            return true; // Snake hits itself
          }
        }

return false;
      }

// Draw the snake on the game board
      function drawSnake() {
        for (const segment of snake) {
          tiles[segment.x][segment.y].className = "snake";
        }
      }

// Reset the game
      function resetGame() {
        snake = [];
        tiles.forEach(row => {
          row.forEach(tile => (tile.className = ""));
        });
        initializeSnake();
        generateFood();
        gameInterval = setInterval(() => moveSnake(direction), 150);
      }

// Initialize the game
      createBoard();
      initializeSnake();
      generateFood();

// Handle user input
      let direction = "right";
      document.addEventListener("keydown", function(event) {
        if (event.key === "ArrowUp" && direction !== "down") {
          direction = "up";
        } else if (event.key === "ArrowDown" && direction !== "up") {
          direction = "down";
        } else if (event.key === "ArrowRight" && direction !== "left") {
          direction = "right";
        } else if (event.key === "ArrowLeft" && direction !== "right") {
          direction = "left";
        }
      });

// Start the game loop
      let gameInterval = setInterval(() => moveSnake(direction), 150);
    });
  </script>
</body>
</html>