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

No:16320

←

Prev Next

→

Snake Game
Developer User7232｜Date and time 23/9/17 7:38:26
Build time 27.88 sec｜Game capacity 4.205KB｜

Script

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

Snake Game

This implementation will create a simple Snake Game with a game board represented by a `<div>` element, snake parts represented by `<div>` elements with the class `snake-part`, and the food as a red square. The snake can be controlled using the arrow keys on a smartphone. The game will end if the snake hits the walls or collides with its own body.

←

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 HTML script tags:

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Snake Game</title>
    <style>
      #game-board {
        position: relative;
        width: 400px;
        height: 400px;
        border: 1px solid #000;
      }
      
      .snake-part {
        position: absolute;
        width: 20px;
        height: 20px;
      }
      
      #food {
        position: absolute;
        width: 20px;
        height: 20px;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <h1>Snake Game</h1>
    <div id="game-board"></div>
    
    <script>
      window.addEventListener('DOMContentLoaded', (event) => {
        const gameBoard = document.getElementById('game-board');
        const blockSize = 20;
        const boardSize = parseInt(gameBoard.style.width) / blockSize;
        let snake = [{ x: 10, y: 10 }];
        let food = { x: Math.floor(Math.random() * boardSize), y: Math.floor(Math.random() * boardSize) };
        let direction = 'right';
        
        function drawSnake() {
          gameBoard.innerHTML = '';
          
          snake.forEach((part) => {
            const snakePart = document.createElement('div');
            snakePart.classList.add('snake-part');
            snakePart.style.left = part.x * blockSize + 'px';
            snakePart.style.top = part.y * blockSize + 'px';
            
            gameBoard.appendChild(snakePart);
          });
        }
        
        function drawFood() {
          const foodElement = document.createElement('div');
          foodElement.id = 'food';
          foodElement.style.left = food.x * blockSize + 'px';
          foodElement.style.top = food.y * blockSize + 'px';
          
          gameBoard.appendChild(foodElement);
        }
        
        function moveSnake() {
          const head = Object.assign({}, snake[0]); // Create a copy of the head
          
          if(direction === 'right') {
            head.x++;
          } else if(direction === 'left') {
            head.x--;
          } else if(direction === 'up') {
            head.y--;
          } else if(direction === 'down') {
            head.y++;
          }
          
          snake.unshift(head); // Add the new head to the snake
          
          if(snake[0].x === food.x && snake[0].y === food.y) {
            food = { x: Math.floor(Math.random() * boardSize), y: Math.floor(Math.random() * boardSize) }; // Generate new food
          } else {
            snake.pop(); // Remove the tail if food not eaten
          }
          
          const isGameOver = (
            snake[0].x < 0 || 
            snake[0].x >= boardSize || 
            snake[0].y < 0 || 
            snake[0].y >= boardSize ||
            snake.slice(1).some((part) => part.x === snake[0].x && part.y === snake[0].y) // Check if head collides with body
          );
          
          if(isGameOver) {
            clearInterval(gameLoop); // Stop the game loop
            alert('Game Over!');
          }
        }
        
        function handleKeyPress(event) {
          if(event.key === 'ArrowRight' && direction !== 'left') {
            direction = 'right';
          } else if(event.key === 'ArrowLeft' && direction !== 'right') {
            direction = 'left';
          } else if(event.key === 'ArrowUp' && direction !== 'down') {
            direction = 'up';
          } else if(event.key === 'ArrowDown' && direction !== 'up') {
            direction = 'down';
          }
        }
        
        drawSnake();
        drawFood();
        
        const gameLoop = setInterval(() => {
          moveSnake();
          drawSnake();
        }, 300);
        
        document.addEventListener('keydown', handleKeyPress);
      });
    </script>
  </body>
</html>
```