AI game creator

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

No:21006

←

Prev Next

→

Snake Game
Developer User9273｜Date and time 23/10/12 19:03:27
Build time 108.854 sec｜Game capacity 3.987KB｜

Script

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

In this Snake game implementation, you can control the snake's movement using the arrow keys on your smartphone. The game board is displayed inside a square div element called "game-board", with each cell represented by a div. The snake is shown as filled cells, while the food is shown as a different colored cell. When the snake hits the boundaries or itself, the game is over and an alert is shown. The game board is then reset, and a new snake and food are generated. The game continuously updates at a fixed interval (200ms). Each update checks the user's input for changing the snake's direction, updates the snake's position, and checks for collisions with the boundaries or food. The game state and board are then updated and rendered on the screen. Feel free to run the above code in an HTML file and play the Snake game on your smartphone!

←

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 {
      width: 400px;
      height: 400px;
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <div id="game-board"></div>

// Handle user input
    document.addEventListener('keydown', changeDirection);

// Game loop
    setInterval(gameLoop, 200);

function generateFood() {
      const x = Math.floor(Math.random() * boardSize);
      const y = Math.floor(Math.random() * boardSize);
      board[y][x] = 'food';
      return { x, y };
    }

function gameLoop() {
      // Update snake position
      const head = { ...snake[0] };
      switch (direction) {
        case 'up':
          head.y--;
          break;
        case 'down':
          head.y++;
          break;
        case 'left':
          head.x--;
          break;
        case 'right':
          head.x++;
          break;
      }

// Check for game over conditions
      if (
        head.x < 0 ||
        head.x >= boardSize ||
        head.y < 0 ||
        head.y >= boardSize ||
        snake.some(segment => segment.x === head.x && segment.y === head.y)
      ) {
        alert('Game Over');
        snake = [{ x: 10, y: 10 }];
        direction = 'right';
        board.forEach(row => row.fill(''));
        food = generateFood();
      }

snake.unshift(head);

if (head.x === food.x && head.y === food.y) {
        // Snake ate the food
        food = generateFood();
      } else {
        snake.pop();
      }

// Update board
      board.forEach(row => row.fill(''));
      snake.forEach(segment => {
        board[segment.y][segment.x] = 'snake';
      });
      board[food.y][food.x] = 'food';

// Render board
      const gameBoard = document.getElementById('game-board');
      gameBoard.innerHTML = '';
      board.forEach(row => {
        row.forEach(cell => {
          const cellElement = document.createElement('div');
          cellElement.style.width = `${100 / boardSize}%`;
          cellElement.style.height = `${100 / boardSize}%`;
          cellElement.classList.add(cell);
          gameBoard.appendChild(cellElement);
        });
      });
    }

function changeDirection(event) {
      switch (event.keyCode) {
        case 37:
          direction = 'left';
          break;
        case 38:
          direction = 'up';
          break;
        case 39:
          direction = 'right';
          break;
        case 40:
          direction = 'down';
          break;
      }
    }
  </script>
</body>
</html>
```

When the snake hits the boundaries or itself, the game is over and an alert is shown. The game board is then reset, and a new snake and food are generated.

The game continuously updates at a fixed interval (200ms). Each update checks the user's input for changing the snake's direction, updates the snake's position, and checks for collisions with the boundaries or food. The game state and board are then updated and rendered on the screen.

Feel free to run the above code in an HTML file and play the Snake game on your smartphone!