AI game creator

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

No:40057

←

Prev Next

→

Snake Game
Developer User17956｜Date and time 24/1/31 21:49:24
Build time 20.616 sec｜Game capacity 4.26KB｜

Script

Sure, here's a simple implementation of the Snake game as a single HTML file using JavaScript. You can copy and paste the code into an HTML file and open it in a web browser to play the game.

This implementation displays a simple grid-based game board, where the player controls a snake using arrow keys on their smartphone. The goal is to eat food and grow bigger without hitting the walls or colliding with itself. Once the game is over, the player can restart by pressing OK on the alert dialog.

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

Sure, here's a simple implementation of the Snake game as a single HTML file using JavaScript. You can copy and paste the code into an HTML file and open it in a web browser to play the game.

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    #game-board {
      width: 400px;
      height: 400px;
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <div id="game-board"></div>

// Game variables
    let snake = [
      { x: 10, y: 10 }
    ];
    let direction = { x: 0, y: 0 };
    let food = generateFoodPosition();
    let isGameOver = false;

// Game board element
    const gameBoard = document.getElementById("game-board");

// Handle keyboard input
    document.addEventListener("keydown", handleKeyPress);

// Start the game
    gameLoop();

// Game loop
    function gameLoop() {
      if (isGameOver) {
        return;
      }

setTimeout(() => {
        clearBoard();
        moveSnake();
        drawSnake();
        drawFood();
        checkCollision();
        gameLoop();
      }, GAME_SPEED);
    }

// Clear the game board
    function clearBoard() {
      gameBoard.innerHTML = "";
    }

// Move the snake
    function moveSnake() {
      const head = { x: snake[0].x + direction.x, y: snake[0].y + direction.y };
      snake.unshift(head);

if (head.x === food.x && head.y === food.y) {
        // Snake ate the food
        food = generateFoodPosition();
      } else {
        snake.pop();
      }
    }

// Draw the snake on the game board
    function drawSnake() {
      snake.forEach(segment => {
        const snakeElement = document.createElement("div");
        snakeElement.style.gridRowStart = segment.y;
        snakeElement.style.gridColumnStart = segment.x;
        snakeElement.classList.add("snake");
        gameBoard.appendChild(snakeElement);
      });
    }

// Draw the food on the game board
    function drawFood() {
      const foodElement = document.createElement("div");
      foodElement.style.gridRowStart = food.y;
      foodElement.style.gridColumnStart = food.x;
      foodElement.classList.add("food");
      gameBoard.appendChild(foodElement);
    }

// Check for collision with walls or self
    function checkCollision() {
      const head = snake[0];

// Check collision with walls
      if (
        head.x < 1 ||
        head.x > BOARD_SIZE ||
        head.y < 1 ||
        head.y > BOARD_SIZE
      ) {
        gameOver();
      }

// Check self collision
      for (let i = 1; i < snake.length; i++) {
        if (snake[i].x === head.x && snake[i].y === head.y) {
          gameOver();
        }
      }
    }

// Handle keyboard key press
    function handleKeyPress(event) {
      const keyPressed = event.key.toLowerCase();

// Set snake direction based on arrow keys
      if (keyPressed === "arrowup" && direction.y !== 1) {
        direction = { x: 0, y: -1 };
      } else if (keyPressed === "arrowdown" && direction.y !== -1) {
        direction = { x: 0, y: 1 };
      } else if (keyPressed === "arrowleft" && direction.x !== 1) {
        direction = { x: -1, y: 0 };
      } else if (keyPressed === "arrowright" && direction.x !== -1) {
        direction = { x: 1, y: 0 };
      }
    }

// Generate a random position for the food
    function generateFoodPosition() {
      return {
        x: Math.floor(Math.random() * BOARD_SIZE) + 1,
        y: Math.floor(Math.random() * BOARD_SIZE) + 1
      };
    }

// Game over logic
    function gameOver() {
      isGameOver = true;
      alert("Game Over! Press OK to restart.");
      resetGame();
    }

// Reset the game state
    function resetGame() {
      snake = [{ x: 10, y: 10 }];
      direction = { x: 0, y: 0 };
      food = generateFoodPosition();
      isGameOver = false;
      gameLoop();
    }
  </script>
</body>
</html>
```