AI game creator

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

No:14486

←

Prev Next

→

Snake Game
Developer User6243｜Date and time 23/9/2 13:56:38
Build time 36.174 sec｜Game capacity 4.679KB｜

Script

Sure! Here's a basic implementation of the Snake Game in a single HTML file using JavaScript:

This implementation will create a 10x10 game board with the snake initially positioned at the top-left corner. The player can control the snake's movement using the arrow keys. The goal is to eat the randomly generated food and grow the snake without colliding with the board borders or itself. If the snake collides, the game ends and an alert is shown.

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

Sure! Here's a basic implementation of the Snake Game in a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Snake Game</title>
  <style>
    #game-board {
      display: flex;
      flex-wrap: wrap;
      width: 200px;
      height: 200px;
      border: 1px solid black;
    }
    .cell {
      width: 20px;
      height: 20px;
      border: 1px solid gray;
      box-sizing: border-box;
    }
  </style>
</head>
<body>
  <div id="game-board"></div>
  
  <script>
    const boardSize = 10; // Number of cells in each row and column
    let snake = [{ x: 0, y: 0 }]; // Initial snake position
    let food = {}; // Coordinates of the food
    let direction = 'right'; // Initial direction of the snake

function updateSnake() {
      const head = Object.assign({}, snake[0]); // Copy the position of the snake's head

// Update the head based on the current direction
      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;
      }

// Add the new head to the snake
      snake.unshift(head);

// Check if the snake has collided with the food
      if (head.x === food.x && head.y === food.y) {
        generateFood(); // Generate new food
      } else {
        snake.pop(); // Remove the tail if no food was eaten
      }

// Check if the snake has collided with itself or the border
      if (isCollision()) {
        clearInterval(gameInterval); // Stop the game
        alert('Game Over!');
      }

render(); // Update the game board
    }

function generateFood() {
      // Generate random coordinates for the food within the board
      food = {
        x: Math.floor(Math.random() * boardSize),
        y: Math.floor(Math.random() * boardSize)
      };

// Check if the food has been generated on the snake's body
      if (snake.some(segment => segment.x === food.x && segment.y === food.y)) {
        generateFood(); // Regenerate if it's on the snake
      }
    }

function isCollision() {
      const head = snake[0];

// Check if the snake's head is outside the board
      if (
        head.x < 0 ||
        head.x >= boardSize ||
        head.y < 0 ||
        head.y >= boardSize
      ) {
        return true;
      }

// Check if the snake's head collided with its body
      if (snake.slice(1).some(segment => segment.x === head.x && segment.y === head.y)) {
        return true;
      }

return false;
    }

function render() {
      const cells = document.getElementsByClassName('cell');

// Clear previous game state
      Array.from(cells).forEach(cell => cell.className = 'cell');

// Render the snake
      snake.forEach(segment => {
        const cell = document.getElementById(segment.x + '-' + segment.y);
        cell.className = 'cell snake';
      });

// Render the food
      const foodCell = document.getElementById(food.x + '-' + food.y);
      foodCell.className = 'cell food';
    }

createBoard(); // Initialize the game board
    generateFood(); // Generate initial food

// Start game loop
    const gameInterval = setInterval(updateSnake, 200);

// Listen for arrow key presses to change the snake's direction
    document.addEventListener('keydown', handleKeyPress);
  </script>
</body>
</html>
```