AI game creator

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

No:18415

←

Prev Next

→

Snake Game
Developer User8149｜Date and time 23/9/29 6:35:42
Build time 41.651 sec｜Game capacity 5.107KB｜

Script

Certainly! Here's an example of a Snake Game implemented as a single HTML file using JavaScript:

This code sets up a basic Snake Game that you can play on a smartphone. The game board is displayed as a 400x400px square, and the snake (green) and food (red) are displayed as 20x20px squares. The snake moves every 200 milliseconds, and you can control its direction using the arrow keys. To play the game, simply open the HTML file in a browser on your smartphone. The snake will start moving automatically, and you need to use the arrow keys to change its direction and try to eat the food without hitting the boundaries or yourself. If the snake hits a boundary or itself, the game will end, and an alert will be displayed. Feel free to further customize the game's appearance and behavior to suit your preferences!

←

Prev　Next

→ 　

Back　

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

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

Certainly! Here's an example of a Snake Game implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Snake Game</title>
    <style>
      #game-board {
        width: 400px;
        height: 400px;
        border: 1px solid black;
        position: relative;
        overflow: hidden;
      }
      .snake,
      .food {
        width: 20px;
        height: 20px;
        position: absolute;
      }
      .snake {
        background-color: green;
      }
      .food {
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div id="game-board"></div>
    
    <script>
      // Snake Game Implementation
      
      // Game board size
      const BOARD_SIZE = 20;
    
      // Snake and food initial positions
      let snake = [{ x: 10, y: 10 }];
      let food = getNewFoodPosition();
    
      // Initial direction of the snake
      let direction = 'right';
    
      // Interval ID for game loop
      let gameLoop;
    
      function initGame() {
        // Display the snake and food on the game board
        renderSnake();
        renderFood();
    
        // Start the game loop
        gameLoop = setInterval(moveSnake, 200);
    
        // Bind arrow keypress events
        document.addEventListener('keydown', changeDirection);
      }
    
      function renderSnake() {
        const gameBoard = document.getElementById('game-board');
        gameBoard.innerHTML = "";
        snake.forEach(segment => {
          const snakeElement = document.createElement('div');
          snakeElement.style.left = segment.x * 20 + 'px';
          snakeElement.style.top = segment.y * 20 + 'px';
          snakeElement.classList.add('snake');
          gameBoard.appendChild(snakeElement);
        });
      }
    
      function renderFood() {
        const gameBoard = document.getElementById('game-board');
        const foodElement = document.createElement('div');
        foodElement.style.left = food.x * 20 + 'px';
        foodElement.style.top = food.y * 20 + 'px';
        foodElement.classList.add('food');
        gameBoard.appendChild(foodElement);
      }
    
      function moveSnake() {
        const head = { ...snake[0] };
    
        // Update the head position based on the current direction
        switch (direction) {
          case 'up':
            head.y--;
            break;
          case 'down':
            head.y++;
            break;
          case 'left':
            head.x--;
            break;
          case 'right':
            head.x++;
            break;
        }
    
        // Check if the snake hits the screen boundaries or itself
        if (
          head.x < 0 ||
          head.x >= BOARD_SIZE ||
          head.y < 0 ||
          head.y >= BOARD_SIZE ||
          snake.some(segment => segment.x === head.x && segment.y === head.y)
        ) {
          clearInterval(gameLoop);
          alert('Game Over!');
          return;
        }
    
        // Add the new head to the snake
        snake.unshift(head);
    
        // Check if the snake eats the food
        if (head.x === food.x && head.y === food.y) {
          // Generate new food position
          food = getNewFoodPosition();
        } else {
          // Remove the tail segment if snake doesn't eat food
          snake.pop();
        }
    
        // Render updated snake and food positions
        renderSnake();
        renderFood();
      }
    
      function changeDirection(event) {
        const keyPressed = event.key.replace('Arrow', '').toLowerCase();
    
        // Ignore invalid direction changes
        if (
          (keyPressed === 'up' && direction === 'down') ||
          (keyPressed === 'down' && direction === 'up') ||
          (keyPressed === 'left' && direction === 'right') ||
          (keyPressed === 'right' && direction === 'left')
        ) {
          return;
        }
    
        direction = keyPressed;
      }
    
      function getNewFoodPosition() {
        return {
          x: Math.floor(Math.random() * BOARD_SIZE),
          y: Math.floor(Math.random() * BOARD_SIZE)
        };
      }
    
      // Start the game
      initGame();
    </script>
  </body>
</html>
```

To play the game, simply open the HTML file in a browser on your smartphone. The snake will start moving automatically, and you need to use the arrow keys to change its direction and try to eat the food without hitting the boundaries or yourself. If the snake hits a boundary or itself, the game will end, and an alert will be displayed.

Feel free to further customize the game's appearance and behavior to suit your preferences!