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

No:10293

←

Prev Next

→

Snake Game
Developer User4521｜Date and time 23/7/30 2:21:58
Build time 41.206 sec｜Game capacity 5.769KB｜

Script

Sure! Here's an implementation of the classic snake game using JavaScript, HTML, and CSS. To keep things simple, I'll provide the code for an HTML file that you can save as a single HTML file and run it in a web browser. The game is designed to be played on a smartphone.

Snake Game

To play the game: 1. Copy the above code and save it as an HTML file (e.g., `snake_game.html`). 2. Open the saved HTML file in a web browser on your smartphone. 3. Use the arrow keys or the keys `'w'`, `'a'`, `'s'`, `'d'` to control the snake. 4. The objective is to eat the red food item represented by the pictogram. 5. Try to grow the snake as much as possible without colliding with the boundaries or itself. 6. The game will end when the snake collides with the boundaries or itself, and your score will be displayed. Enjoy playing the snake game on your smartphone!

←

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 {
      border: 1px solid black;
      width: 300px;
      height: 300px;
      margin: 0 auto;
    }
    
    .cell {
      width: 30px;
      height: 30px;
      background-color: lightgray;
      float: left;
    }
    
    .snake {
      background-color: green;
    }
    
    .food {
      background-color: red;
    }
  </style>
</head>
<body>
  <h1>Snake Game</h1>
  
  <div id="game-board"></div>
  
  <script>
    // Snake Game implementation
    
    // Constants
    const SIZE = 10; // Size of each cell
    const BOARD_SIZE = 10; // Size of the game board
    
    // Variables
    let gameBoard;
    let snake = [];
    let direction = 'right';
    let food = {};
    let intervalId;
    
    function initialize() {
      // Create the game board
      gameBoard = document.getElementById('game-board');
      gameBoard.style.width = SIZE * BOARD_SIZE + 'px';
      gameBoard.style.height = SIZE * BOARD_SIZE + 'px';
      
      // Generate the initial snake
      const initialPosX = Math.floor(BOARD_SIZE / 2);
      const initialPosY = Math.floor(BOARD_SIZE / 2);
      snake.push({ x: initialPosX, y: initialPosY });

// Generate the initial food
      generateFood();
      
      // Start the game loop
      intervalId = setInterval(gameLoop, 200);
    }
    
    function gameLoop() {
      updateSnake();
      checkCollision();
      render();
    }
    
    function updateSnake() {
      const head = Object.assign({}, snake[0]);
      
      // Update the position of the head based on the current direction
      switch (direction) {
        case 'up':
          head.y--;
          break;
        case 'down':
          head.y++;
          break;
        case 'left':
          head.x--;
          break;
        case 'right':
          head.x++;
          break;
      }
      
      // Add new head to the snake
      snake.unshift(head);
      
      // Remove the tail of the snake
      if (!isEatingFood()) {
        snake.pop();
      } else {
        // Generate a new food item
        generateFood();
      }
    }
    
    function isEatingFood() {
      return snake[0].x === food.x && snake[0].y === food.y;
    }
    
    function checkCollision() {
      // Check if the snake collides with itself or with the boundaries
      const head = snake[0];
      
      if (head.x < 0 || head.x >= BOARD_SIZE || head.y < 0 || head.y >= BOARD_SIZE) {
        gameOver();
      }
      
      for (let i = 1; i < snake.length; i++) {
        if (snake[i].x === head.x && snake[i].y === head.y) {
          gameOver();
          break;
        }
      }
    }
    
    function generateFood() {
      const x = Math.floor(Math.random() * BOARD_SIZE);
      const y = Math.floor(Math.random() * BOARD_SIZE);
      
      // Check if the generated food position doesn't overlap with the snake
      if (snake.find(s => s.x === x && s.y === y)) {
        generateFood(); // Retry
      } else {
        food = { x, y };
      }
    }
    
    function handleKeydown(event) {
      // Change the direction based on the pressed arrow key
      const key = event.keyCode || event.charCode;
      
      switch (key) {
        case 38: // up arrow
        case 87: // 'w'
          direction = 'up';
          break;
        case 39: // right arrow
        case 68: // 'd'
          direction = 'right';
          break;
        case 40: // down arrow
        case 83: // 's'
          direction = 'down';
          break;
        case 37: // left arrow
        case 65: // 'a'
          direction = 'left';
          break;
      }
    }
    
    function render() {
      // Clear the game board
      gameBoard.innerHTML = '';
      
      // Render snake
      for (let i = 0; i < snake.length; i++) {
        const cell = createCell();
        
        if (i === 0) {
          cell.classList.add('snake', 'head');
        } else {
          cell.classList.add('snake');
        }
        
        setCellPosition(cell, snake[i]);
        gameBoard.appendChild(cell);
      }
      
      // Render food
      const foodCell = createCell();
      foodCell.classList.add('food');
      setCellPosition(foodCell, food);
      gameBoard.appendChild(foodCell);
    }
    
    function createCell() {
      const cell = document.createElement('div');
      cell.classList.add('cell');
      return cell;
    }
    
    function setCellPosition(cell, position) {
      cell.style.left = position.x * SIZE + 'px';
      cell.style.top = position.y * SIZE + 'px';
    }
    
    function gameOver() {
      clearInterval(intervalId);
      alert('Game Over! Your score: ' + (snake.length - 1));
      initialize(); // Restart the game
    }
    
    document.addEventListener('DOMContentLoaded', initialize);
    document.addEventListener('keydown', handleKeydown);
  </script>
</body>
</html>
```

To play the game:
1. Copy the above code and save it as an HTML file (e.g., `snake_game.html`).
2. Open the saved HTML file in a web browser on your smartphone.
3. Use the arrow keys or the keys `'w'`, `'a'`, `'s'`, `'d'` to control the snake.
4. The objective is to eat the red food item represented by the pictogram.
5. Try to grow the snake as much as possible without colliding with the boundaries or itself.
6. The game will end when the snake collides with the boundaries or itself, and your score will be displayed.

Enjoy playing the snake game on your smartphone!