AI game creator

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

No:21715

116

←

Prev Next

→

Snake game
Developer User10005｜Date and time 23/10/17 19:55:26
Build time 109.714 sec｜Game capacity 3.217KB｜

Script

Sure! Here's a simple implementation of the classic Snake game using JavaScript, enclosed in script tags within a single HTML file:

When you open the HTML file in a browser, it will display the Snake game ready to be played. The snake moves with the arrow keys, and the game ends if it hits the boundary. Enjoy playing!

←

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 classic Snake game using JavaScript, enclosed in script tags within a single HTML file:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Snake Game</title>
  <style>
    #game-board {
      border: 1px solid #000;
      width: 400px;
      height: 400px;
      margin: 0 auto;
    }
  </style>
</head>

// Game constants
    const SIZE = 20; // Size of each square in pixels
    const WIDTH = 400; // Width of the game board in pixels
    const HEIGHT = 400; // Height of the game board in pixels

// Game variables
    let snake = [{ x: 10, y: 10 }]; // Initial position of the snake
    let direction = 'right'; // Initial direction of the snake
    let intervalId; // ID of the interval used for game loop

// Generate the game board
    const gameBoard = document.getElementById('game-board');
    gameBoard.style.width = WIDTH + 'px';
    gameBoard.style.height = HEIGHT + 'px';

// Function to draw the snake on the game board
    function drawSnake() {
      gameBoard.innerHTML = '';
      snake.forEach(segment => {
        const snakeSegment = document.createElement('div');
        snakeSegment.style.width = SIZE + 'px';
        snakeSegment.style.height = SIZE + 'px';
        snakeSegment.style.backgroundColor = 'green';
        snakeSegment.style.position = 'absolute';
        snakeSegment.style.top = segment.y * SIZE + 'px';
        snakeSegment.style.left = segment.x * SIZE + 'px';
        gameBoard.appendChild(snakeSegment);
      });
    }

// Function to handle keyboard input
    function handleInput(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';
      }
    }

// Function to update the snake position
    function updateSnake() {
      const head = { ...snake[0] };
      if (direction === 'up') {
        head.y -= 1;
      } else if (direction === 'down') {
        head.y += 1;
      } else if (direction === 'left') {
        head.x -= 1;
      } else if (direction === 'right') {
        head.x += 1;
      }
      snake.unshift(head);

// Check if snake hits the boundary
      if (
        head.x < 0 ||
        head.x * SIZE >= WIDTH ||
        head.y < 0 ||
        head.y * SIZE >= HEIGHT
      ) {
        clearInterval(intervalId);
        alert('Game Over!');
      }

// Remove the tail segment
      snake.pop();
    }

// Function to start the game
    function startGame() {
      intervalId = setInterval(() => {
        updateSnake();
        drawSnake();
      }, 200);
      window.addEventListener('keydown', handleInput);
    }

// Start the game
    startGame();

</script>
</body>
</html>
```

When you open the HTML file in a browser, it will display the Snake game ready to be played. The snake moves with the arrow keys, and the game ends if it hits the boundary. Enjoy playing!