snake but you get longer. and go slow The food is bigger's game

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

No:37505

←

Prev Next

→

snake but you get longer. and go slow The food is..ALL
Developer User17003｜Date and time 24/1/21 4:40:24
Build time 15.625 sec｜Game capacity 4.401KB｜

Script

Sure! Here's a basic implementation of the Snake game using JavaScript and HTML. It follows the requirements you mentioned and should work on smartphones. Pictograms are not used, but you can modify the game's appearance as per your preference.

To play the game, you can run the above code in any web browser. Use the arrow keys on your smartphone's keyboard to control the direction of the snake. The goal is to eat the red food, which will make the snake grow longer. The game ends if the snake hits the game board boundaries or if it collides with its own body.

←

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 {
      width: 400px;
      height: 400px;
      border: 1px solid black;
      position: relative;
    }
    .snake-segment, .food {
      width: 20px;
      height: 20px;
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
    }
    .snake-segment {
      background-color: green;
      color: white;
    }
    .food {
      background-color: red;
      font-weight: bold;
    }
  </style>
</head>

<body>
  <div id="game-board"></div>
  <script>
    // Initialize the game
    const gameBoard = document.getElementById('game-board');
    const gridSize = 20;
    const snakeSize = 1;
    let snake = [{ x: 0, y: 0 }];
    let food = { x: 0, y: 0 };
    let direction = 'right';

function startGame() {
      createFood();
      setInterval(moveSnake, 1000);
    }

function createFood() {
      const maxX = (gameBoard.offsetWidth / gridSize) - 1;
      const maxY = (gameBoard.offsetHeight / gridSize) - 1;
      food = {
        x: Math.floor(Math.random() * maxX) * gridSize,
        y: Math.floor(Math.random() * maxY) * gridSize
      };
      const foodElement = document.createElement('div');
      foodElement.classList.add('food');
      foodElement.style.left = food.x + 'px';
      foodElement.style.top = food.y + 'px';
      gameBoard.appendChild(foodElement);
    }

function moveSnake() {
      const head = { x: snake[0].x, y: snake[0].y };

// Update snake position based on the current direction
      if (direction === 'right') head.x += gridSize;
      if (direction === 'left') head.x -= gridSize;
      if (direction === 'up') head.y -= gridSize;
      if (direction === 'down') head.y += gridSize;

// Check for collision with the food
      if (head.x === food.x && head.y === food.y) {
        snakeSize++;
        createFood();
      } else {
        snake.pop(); // Remove the tail segment if no food eaten
      }

// Check for collision with the game boundaries
      const maxX = gameBoard.offsetWidth - gridSize;
      const maxY = gameBoard.offsetHeight - gridSize;
      if (head.x < 0 || head.y < 0 || head.x >= maxX || head.y >= maxY) {
        // Game over
        clearInterval();
        alert('Game Over!');
        return;
      }

// Check for collision with snake body
      for (let i = 1; i < snake.length; i++) {
        if (head.x === snake[i].x && head.y === snake[i].y) {
          // Game over
          clearInterval();
          alert('Game Over!');
          return;
        }
      }

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

// Update the snake segments on the game board
      const snakeSegments = document.getElementsByClassName('snake-segment');
      while (snakeSegments.length) {
        gameBoard.removeChild(snakeSegments[0]);
      }

for (let i = 0; i < snake.length; i++) {
        const segmentElement = document.createElement('div');
        segmentElement.classList.add('snake-segment');
        segmentElement.style.left = snake[i].x + 'px';
        segmentElement.style.top = snake[i].y + 'px';
        segmentElement.textContent = '🐍';
        gameBoard.appendChild(segmentElement);
      }
    }

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

startGame();
  </script>
</body>

</html>
```