AI game creator

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

No:19292

←

Prev Next

→

Snake Game
Developer User6827｜Date and time 23/10/2 20:01:50
Build time 20.549 sec｜Game capacity 3.581KB｜

Script

Sure, here's an example of a Snake Game implemented as a single HTML file using JavaScript:

To play the game, simply copy the code above into an HTML file and open it in a web browser. The game board will be displayed as a 20x20 grid. The snake is represented by green squares, and the apple is represented by a red square. Use the arrow keys to control the movement of the snake and try to eat the apple without hitting the walls or the snake's own body.

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

Sure, here's an example of a Snake Game implemented as a single HTML file using JavaScript:

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

// Game variables
      let snake = [{ x: 10, y: 10 }]; // Initial snake position
      let apple = getRandomPosition(); // Initial apple position
      let dx = 1; // Initial snake movement (right)
      let dy = 0;

// Get random position for the apple
      function getRandomPosition() {
        return {
          x: Math.floor(Math.random() * GRID_WIDTH),
          y: Math.floor(Math.random() * GRID_HEIGHT),
        };
      }

// Update game state
      function update() {
        // Move snake
        const head = { x: snake[0].x + dx, y: snake[0].y + dy };
        snake.unshift(head);

// Check if snake hits wall or itself
        if (
          head.x < 0 ||
          head.x >= GRID_WIDTH ||
          head.y < 0 ||
          head.y >= GRID_HEIGHT ||
          snake.some(
            (part, index) =>
              index !== 0 && part.x === head.x && part.y === head.y
          )
        ) {
          // Game over
          alert('Game Over!');
          location.reload();
        }

// Check if snake eats the apple
        if (head.x === apple.x && head.y === apple.y) {
          // Increase snake length
          apple = getRandomPosition();
        } else {
          // Remove tail
          snake.pop();
        }

// Clear canvas
        const canvas = document.getElementById('game-board');
        const ctx = canvas.getContext('2d');
        ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw apple
        ctx.fillStyle = 'red';
        ctx.fillRect(apple.x * SIZE, apple.y * SIZE, SIZE, SIZE);

// Draw snake
        snake.forEach((part) => {
          ctx.fillStyle = 'green';
          ctx.fillRect(part.x * SIZE, part.y * SIZE, SIZE, SIZE);
        });

// Repeat game update
        setTimeout(update, 100);
      }

// Function to handle keyboard inputs
      function handleKeyboardInput(event) {
        // Get key code of the pressed key
        const keyCode = event.keyCode;

// Change snake movement based on key
        if (keyCode === 37 && dx !== 1) {
          // Left arrow key
          dx = -1;
          dy = 0;
        } else if (keyCode === 38 && dy !== 1) {
          // Up arrow key
          dx = 0;
          dy = -1;
        } else if (keyCode === 39 && dx !== -1) {
          // Right arrow key
          dx = 1;
          dy = 0;
        } else if (keyCode === 40 && dy !== -1) {
          // Down arrow key
          dx = 0;
          dy = 1;
        }
      }

// Start the game
      window.addEventListener('keydown', handleKeyboardInput);
      update();
    </script>
  </body>
</html>
```