AI game creator

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

No:23841

←

Prev Next

→

Snake Game
Developer User9100｜Date and time 23/11/3 23:20:59
Build time 111.236 sec｜Game capacity 4.252KB｜

Script

Sure! Here's a simple implementation of the classic Snake Game using JavaScript, enclosed in script tags in a single HTML file. This game is designed to be played on a smartphone and uses pictograms for visualization:

To play the game, save the above code in a file with a `.html` extension and open it in a web browser on your smartphone. The game board with cells will be displayed, and you can control the snake using touch gestures or through the arrow keys on your keyboard. The goal is to eat the red food (represented by the `food` class) with the green snake (represented by the `snake` class) without colliding with the borders or the snake's own body. When a collision occurs, a "Game Over" alert is displayed, and the game can be restarted.

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Snake Game</title>
  <style>
    #game-board {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      max-width: 250px;
      margin: auto;
    }
    .cell {
      width: 25px;
      height: 25px;
      border: 1px solid black;
    }
    .snake {
      background-color: green;
    }
    .food {
      background-color: red;
    }
  </style>
</head>
<body>
  <div id="game-board"></div>

function renderFood() {
        const cells = document.getElementsByClassName('cell');
        const index = food.x + food.y * boardSize;
        cells[index].classList.add('food');
      }

function update() {
        const head = Object.assign({}, snake[0]);
        switch (direction) {
          case 'up':
            head.y -= 1;
            break;
          case 'down':
            head.y += 1;
            break;
          case 'left':
            head.x -= 1;
            break;
          case 'right':
            head.x += 1;
            break;
        }

snake.unshift(head);

if (head.x === food.x && head.y === food.y) {
          // Snake ate the food
          // Generate new random food position
          food.x = Math.floor(Math.random() * boardSize);
          food.y = Math.floor(Math.random() * boardSize);
        } else {
          // Snake didn't eat the food
          snake.pop();
        }

// Game over conditions
        if (
          head.x < 0 ||
          head.y < 0 ||
          head.x === boardSize ||
          head.y === boardSize ||
          snake.slice(1).some((segment) => segment.x === head.x && segment.y === head.y)
        ) {
          alert('Game Over!');
          location.reload();
        }

renderSnake();
        renderFood();
      }

function handleKeydown(event) {
        switch (event.key) {
          case 'ArrowUp':
            direction = 'up';
            break;
          case 'ArrowDown':
            direction = 'down';
            break;
          case 'ArrowLeft':
            direction = 'left';
            break;
          case 'ArrowRight':
            direction = 'right';
            break;
        }
      }

function startGame() {
        createBoard();
        renderSnake();
        renderFood();
        setInterval(update, 200);
        document.addEventListener('keydown', handleKeydown);
      }

startGame();
    }

// Start the Snake Game
    SnakeGame();
  </script>
</body>
</html>
```