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

No:27827

←

Prev Next

→

Snake game
Developer User13819｜Date and time 23/12/9 12:34:55
Build time 34.823 sec｜Game capacity 5.228KB｜

Script

Sure! Here's a simple implementation of the classic Snake game using JavaScript and HTML tags, all in a single HTML file. To make it suitable for smartphone operation, I have added touch events to control the snake's movements. The game uses pictograms for simplicity.

Snake Game

To play the game, you can simply save the above code in a ".html" file and open it in your smartphone's web browser. The user can control the snake's movements by swiping on the game board. I hope you enjoy playing the Snake game! Let me know if you have any further questions.

←

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 {
      position: relative;
      width: 300px;
      height: 300px;
      border: 1px solid black;
    }
    
    .snake, .food {
      position: absolute;
      width: 20px;
      height: 20px;
    }
    
    .snake {
      background-color: green;
    }
    
    .food {
      background-color: red;
    }
  </style>
</head>
<body>
  <h1>Snake Game</h1>
  <div id="game-board">
    <div id="snake" class="snake"></div>
    <div id="food" class="food"></div>
  </div>
  
  <script>
    // Starting position for the snake
    let snakeX = 0;
    let snakeY = 0;
    
    // Direction of the snake's movement
    let dx = 20;
    let dy = 0;
    
    // Get the game board and snake elements
    const gameBoard = document.getElementById("game-board");
    const snakeElement = document.getElementById("snake");
    
    // Place the initial snake and food on the game board
    placeSnake();
    placeFood();
    
    // Set up touch events to control the snake's movement
    gameBoard.addEventListener("touchstart", handleTouchStart, false);
    gameBoard.addEventListener("touchmove", handleTouchMove, false);
    
    let xDown = null;
    let yDown = null;
    
    function handleTouchStart(event) {
      const firstTouch = event.touches[0];
      xDown = firstTouch.clientX;
      yDown = firstTouch.clientY;
    };
    
    function handleTouchMove(event) {
      if (!xDown || !yDown) {
        return;
      }
      
      const xUp = event.touches[0].clientX;
      const yUp = event.touches[0].clientY;
      
      const xDiff = xDown - xUp;
      const yDiff = yDown - yUp;
      
      if (Math.abs(xDiff) > Math.abs(yDiff)) {
        if (xDiff > 0) {
          // Left movement
          dx = -20;
          dy = 0;
        } else {
          // Right movement
          dx = 20;
          dy = 0;
        }
      } else {
        if (yDiff > 0) {
          // Up movement
          dx = 0;
          dy = -20;
        } else {
          // Down movement
          dx = 0;
          dy = 20;
        }
      }
      
      xDown = null;
      yDown = null;
      event.preventDefault();
    };
    
    // Update the game state every 200ms
    setInterval(moveSnake, 200);
    
    function moveSnake() {
      snakeX += dx;
      snakeY += dy;
      
      // Check for collision with walls
      if (snakeX < 0 || snakeX >= gameBoard.clientWidth || snakeY < 0 || snakeY >= gameBoard.clientHeight) {
        gameOver(); 
        return;
      }
      
      // Check for collision with food
      if (snakeX === foodX && snakeY === foodY) {
        // Increase the snake's length
        snakeLength++;
        // Place new food
        placeFood();
      }
      
      // Remove the last snake segment
      if (snakeSegments.length === snakeLength) {
        snakeSegments.shift();
      }
      
      // Move the snake
      const snakeSegment = document.createElement("div");
      snakeSegment.className = "snake";
      snakeSegment.style.left = snakeX + "px";
      snakeSegment.style.top = snakeY + "px";
      
      // Add the new snake segment to the game board
      gameBoard.appendChild(snakeSegment);
      
      // Add the new segment to the snake's segments array
      snakeSegments.push({ x: snakeX, y: snakeY });
      
      // Check for collision with own tail
      if (checkCollisionWithTail()) {
        gameOver();
      }
    }
    
    // Place the initial snake on the game board
    function placeSnake() {
      snakeElement.style.left = snakeX + "px";
      snakeElement.style.top = snakeY + "px";
    }
    
    // Place the food at a random position on the game board
    function placeFood() {
      const foodElement = document.getElementById("food");
      foodX = getRandomPosition(gameBoard.clientWidth);
      foodY = getRandomPosition(gameBoard.clientHeight);
      foodElement.style.left = foodX + "px";
      foodElement.style.top = foodY + "px";
    }
    
    // Get a random position within the specified range
    function getRandomPosition(range) {
      return Math.floor(Math.random() * range / 20) * 20;
    }
    
    // Check if the snake's head collides with its tail
    function checkCollisionWithTail() {
      for (let i = 0; i < snakeSegments.length - 1; i++) {
        if (snakeSegments[i].x === snakeX && snakeSegments[i].y === snakeY) {
          return true;
        }
      }
      return false;
    }
    
    // Game over function
    function gameOver() {
      alert("Game Over");
      // Refresh the page to restart the game
      window.location.reload();
    }
  </script>
</body>
</html>
```

To play the game, you can simply save the above code in a ".html" file and open it in your smartphone's web browser. The user can control the snake's movements by swiping on the game board.

I hope you enjoy playing the Snake game! Let me know if you have any further questions.