AI game creator

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

No:6614

224

←

Prev Next

→

Snake game
Developer もちきなこ｜Date and time 23/7/2 23:52:33
Build time 46.137 sec｜Game capacity 5.103KB｜

Script

Sure! Here's a simple implementation of the classic Snake Game using JavaScript and HTML. The game uses arrow keys to control the snake, and the objective is to eat the food and grow longer without hitting the walls or the snake's own body.

This code creates a simple Snake Game with a game board, snake, and food represented by colored cells. You can use the arrow keys to control the snake's movement. The game loop continuously moves the snake, checks for collisions, and updates the game state accordingly. When the game is over, an alert is displayed, and the game is reset.

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    #game-board {
      position: relative;
      width: 400px;
      height: 400px;
      margin: 0 auto;
      border: 1px solid black;
    }
    .cell {
      position: absolute;
      width: 20px;
      height: 20px;
      box-sizing: border-box;
      border: 1px solid #eaeaea;
    }
    .food {
      background-color: red;
    }
    .snake {
      background-color: green;
    }
  </style>
</head>
<body>
  <div id="game-board"></div>

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

// Create cells on the game board
        for (let i = 0; i < boardSize; i++) {
          for (let j = 0; j < boardSize; j++) {
            const cell = document.createElement("div");
            cell.className = "cell";
            cell.style.top = i * cellSize + "px";
            cell.style.left = j * cellSize + "px";
            gameBoard.appendChild(cell);
          }
        }

const cells = document.querySelectorAll(".cell");
        const startingIndex = 120; // Start position of the snake
        let snake = [startingIndex]; // Array to store the snake segments
        let direction = "right"; // Initial direction of the snake
        let foodIndex = generateFood(); // Randomly generate food

// Initial snake and food rendering
        renderSnake();
        renderFood();

// Main game loop
        setInterval(function() {
          moveSnake();
        }, 300);

// Handle keyboard input
        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 === "ArrowLeft" && direction !== "right") {
            direction = "left";
          } else if (event.key === "ArrowRight" && direction !== "left") {
            direction = "right";
          }
        });

// Move the snake
        function moveSnake() {
          const head = snake[0];
          let newHead;

if (direction === "up") {
            newHead = head - boardSize;
          } else if (direction === "down") {
            newHead = head + boardSize;
          } else if (direction === "left") {
            newHead = head - 1;
          } else if (direction === "right") {
            newHead = head + 1;
          }

// Check collision with walls or snake's own body
          if (isGameOver(newHead)) {
            alert("Game Over!");
            resetGame();
            return;
          }

// Check if snake eats the food
          const eatsFood = head === foodIndex;
          if (eatsFood) {
            // Increase snake length and generate a new food
            snake.unshift(newHead);
            foodIndex = generateFood();
            renderFood();
          } else {
            // Move the snake by adding a new segment in the front and removing the tail
            snake.unshift(newHead);
            snake.pop();
          }

// Render the snake on the game board
          renderSnake();
        }

// Render the snake on the game board
        function renderSnake() {
          // Clear previous snake rendering
          cells.forEach(function(cell) {
            cell.classList.remove("snake");
          });

// Render the snake on the current segments
          snake.forEach(function(segment) {
            cells[segment].classList.add("snake");
          });
        }

// Render the food on the game board
        function renderFood() {
          cells[foodIndex].classList.add("food");
        }

// Generate random position for the food
        function generateFood() {
          let randomIndex = Math.floor(Math.random() * (boardSize * boardSize));
          while (snake.includes(randomIndex)) {
            randomIndex = Math.floor(Math.random() * (boardSize * boardSize));
          }
          return randomIndex;
        }

// Check if the game is over (collision with walls or snake's own body)
        function isGameOver(head) {
          return (
            head < 0 ||
            head >= boardSize * boardSize ||
            snake.includes(head)
          );
        }

// Reset the game
        function resetGame() {
          snake = [startingIndex];
          direction = "right";
          foodIndex = generateFood();
          renderSnake();
          renderFood();
        }
      });
  </script>
</body>
</html>
```