AI game creator

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

No:15694

117

←

Prev Next

→

Snake Game
Developer User6827｜Date and time 23/9/10 20:52:18
Build time 40.405 sec｜Game capacity 4.463KB｜

Script

Sure! Here's an implementation of the classic Snake game using HTML, CSS, and JavaScript, all enclosed in a single HTML file. You can play the game by opening this file in any modern web browser on your smartphone.

In this Snake game implementation, you control the snake's movement using the arrow keys on your smartphone. The objective is to eat the red food dots displayed on the board, which will make the snake grow longer. The game ends if the snake collides with the borders of the game board or itself.

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Snake Game</title>
  <style>
    #game-board {
      width: 400px;
      height: 400px;
      border: 1px solid black;
      position: relative;
    }

.snake {
      width: 20px;
      height: 20px;
      position: absolute;
      background-color: green;
    }

.food {
      width: 20px;
      height: 20px;
      position: absolute;
      background-color: red;
    }
  </style>
</head>
<body>
  <div id="game-board"></div>

// Snake configurations
    const INITIAL_SNAKE_LENGTH = 3;
    const SNAKE_SPEED = 200; // in milliseconds

// Initial snake position and direction
    let snake = [
      { x: 7, y: 10 },
      { x: 6, y: 10 },
      { x: 5, y: 10 }
    ];
    let direction = 'right';

// Food position
    let food = { x: 15, y: 10 };

// Game state variables
    let gameBoard;
    let snakeInterval;

function initializeGame() {
      gameBoard = document.getElementById('game-board');
      drawSnake();
      drawFood();
      snakeInterval = setInterval(moveSnake, SNAKE_SPEED);

document.addEventListener('keydown', changeDirection);
    }

function drawSnake() {
      clearBoard();
      snake.forEach(segment => {
        const snakeElement = document.createElement('div');
        snakeElement.style.left = segment.x * CELL_SIZE + 'px';
        snakeElement.style.top = segment.y * CELL_SIZE + 'px';
        snakeElement.classList.add('snake');
        gameBoard.appendChild(snakeElement);
      });
    }

function drawFood() {
      const foodElement = document.createElement('div');
      foodElement.style.left = food.x * CELL_SIZE + 'px';
      foodElement.style.top = food.y * CELL_SIZE + 'px';
      foodElement.classList.add('food');
      gameBoard.appendChild(foodElement);
    }

function clearBoard() {
      while (gameBoard.firstChild) {
        gameBoard.firstChild.remove();
      }
    }

function moveSnake() {
      const head = { x: snake[0].x, y: snake[0].y };

switch (direction) {
        case 'up':
          head.y--;
          break;
        case 'down':
          head.y++;
          break;
        case 'left':
          head.x--;
          break;
        case 'right':
          head.x++;
          break;
      }

snake.unshift(head);

if (head.x === food.x && head.y === food.y) {
        generateNewFood();
      } else {
        snake.pop();
      }

if (isGameOver()) {
        clearInterval(snakeInterval);
        alert('Game Over!');
      }

drawSnake();
    }

function changeDirection(event) {
      const arrowKeys = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];

if (arrowKeys.includes(event.key)) {
        event.preventDefault();

const key = event.key.replace('Arrow', '').toLowerCase();

if (
          (key === 'up' && direction !== 'down') ||
          (key === 'down' && direction !== 'up') ||
          (key === 'left' && direction !== 'right') ||
          (key === 'right' && direction !== 'left')
        ) {
          direction = key;
        }
      }
    }

function generateNewFood() {
      food = {
        x: Math.floor(Math.random() * GAME_BOARD_SIZE),
        y: Math.floor(Math.random() * GAME_BOARD_SIZE)
      };
    }

function isGameOver() {
      const head = snake[0];
      if (
        head.x < 0 ||
        head.x >= GAME_BOARD_SIZE ||
        head.y < 0 ||
        head.y >= GAME_BOARD_SIZE ||
        isSnakeCollision()
      ) {
        return true;
      }
      return false;
    }

initializeGame();
  </script>
</body>
</html>
```