AI game creator

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

No:24591

←

Prev Next

→

Snake
Developer The maker｜Date and time 23/11/10 8:57:41
Build time 84.581 sec｜Game capacity 4.481KB｜

Script

Sure! Here's an example of a simple Snake game implemented as a single HTML file in JavaScript:

You can save this code in a file with a .html extension and open it in your smartphone's web browser to play the Snake game. The game board will be displayed as a 20x20 grid, and you can control the snake's direction using the keyboard arrows. The game loop updates the game state every 200 milliseconds, making the snake move and checking for collisions with the walls, itself, and the food. Enjoy playing!

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's an example of a simple Snake game implemented as a single HTML file in JavaScript:

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Snake Game</title>
    <style>
      #game-board {
        background-color: white;
        border: 1px solid black;
        width: 400px;
        height: 400px;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <div id="game-board"></div>

// Render the game board
      function renderBoard() {
        var gameBoard = document.getElementById('game-board');
        gameBoard.innerHTML = '';

// Render each tile
        for (var i = 0; i < boardSize; i++) {
          for (var j = 0; j < boardSize; j++) {
            var tile = document.createElement('div');
            tile.style.width = tileSize + 'px';
            tile.style.height = tileSize + 'px';

// Set class for snake, food, or empty tile
            if (isSnakeTile(i, j)) {
              tile.className = 'snake';
            } else if (isFoodTile(i, j)) {
              tile.className = 'food';
            } else {
              tile.className = 'empty';
            }

gameBoard.appendChild(tile);
          }
        }
      }

// Check if given coordinates are part of the snake
      function isSnakeTile(x, y) {
        for (var i = 0; i < snake.length; i++) {
          if (snake[i].x === x && snake[i].y === y) {
            return true;
          }
        }
        return false;
      }

// Check if given coordinates are the food
      function isFoodTile(x, y) {
        if (food.x === x && food.y === y) {
          return true;
        }
        return false;
      }

// Update the game state
      function updateGame() {
        var headX = snake[0].x;
        var headY = snake[0].y;

// Move the snake based on the current direction
        if (direction === 'left') {
          headX--;
        } else if (direction === 'up') {
          headY--;
        } else if (direction === 'right') {
          headX++;
        } else if (direction === 'down') {
          headY++;
        }

// Check if snake hits the wall or itself
        if (
          headX < 0 ||
          headX >= boardSize ||
          headY < 0 ||
          headY >= boardSize ||
          isSnakeTile(headX, headY)
        ) {
          alert('Game Over!');
          return;
        }

// Check if snake eats the food
        if (isFoodTile(headX, headY)) {
          // Grow the snake
          snake.unshift({ x: headX, y: headY });

// Generate new food
          var newX = Math.floor(Math.random() * boardSize);
          var newY = Math.floor(Math.random() * boardSize);

while (isSnakeTile(newX, newY)) {
            newX = Math.floor(Math.random() * boardSize);
            newY = Math.floor(Math.random() * boardSize);
          }

food = { x: newX, y: newY };
        } else {
          // Move the snake
          snake.pop();
          snake.unshift({ x: headX, y: headY });
        }

// Render the updated game state
        renderBoard();
      }

// Handle keyboard events to change snake direction
      document.addEventListener('keydown', function(event) {
        if (event.key === 'ArrowLeft' && direction !== 'right') {
          direction = 'left';
        } else if (event.key === 'ArrowUp' && direction !== 'down') {
          direction = 'up';
        } else if (event.key === 'ArrowRight' && direction !== 'left') {
          direction = 'right';
        } else if (event.key === 'ArrowDown' && direction !== 'up') {
          direction = 'down';
        }
      });

// Start the game loop
      setInterval(updateGame, 200);
    </script>
  </body>
</html>
```