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

No:10073

140

←

Prev Next

→

Snake Game
Developer User4475｜Date and time 23/7/29 0:41:05
Build time 36.696 sec｜Game capacity 4.754KB｜

Script

Sure! Here is an example of a simple Snake Game implemented as a single HTML file using JavaScript and enclosed in script tags:

Snake Game

To play the game, you can copy the above code into a file with a .html extension, then open the file in a web browser. Use the arrow keys on your keyboard to control the snake and try to eat the red food while avoiding colliding with the game board bounds or the snake itself. Note: The above code includes basic functionality for a snake game, but it can be further enhanced and customized based on specific requirements and desired features.

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

Sure! Here is an example of a simple Snake Game implemented as a single HTML file using JavaScript and enclosed in script tags:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Snake Game</title>
  <style>
    #game-board {
      width: 400px;
      height: 400px;
      border: 1px solid black;
      background-color: lightgray;
      position: relative;
    }
    .snake {
      width: 20px;
      height: 20px;
      background-color: green;
      position: absolute;
    }
    .food {
      width: 20px;
      height: 20px;
      background-color: red;
      position: absolute;
    }
  </style>
</head>
<body>
  <h1>Snake Game</h1>
  <div id="game-board"></div>

// Snake initial position and direction
    let snake = [
      { x: 10, y: 10 },
      { x: 10, y: 11 },
      { x: 10, y: 12 },
    ];
    let directionX = 0;
    let directionY = -1;

// Food initial position
    let food = { x: 15, y: 15 };

// Game loop
    function gameLoop() {
      moveSnake();
      if (isSnakeCollidingWithFood()) {
        eatFood();
        generateFood();
      }
      if (isSnakeCollidingWithBounds() || isSnakeCollidingWithItself()) {
        endGame();
      }
      drawGameBoard();
      setTimeout(gameLoop, 200);
    }

// Move the snake
    function moveSnake() {
      const head = { x: snake[0].x + directionX, y: snake[0].y + directionY };
      snake.unshift(head);
      snake.pop();
    }

// Check if the snake is colliding with the food
    function isSnakeCollidingWithFood() {
      return snake[0].x === food.x && snake[0].y === food.y;
    }

// Eat the food and grow the snake
    function eatFood() {
      const tail = { x: snake[snake.length - 1].x, y: snake[snake.length - 1].y };
      snake.push(tail);
    }

// Generate new random food position
    function generateFood() {
      food = {
        x: Math.floor(Math.random() * gridWidth),
        y: Math.floor(Math.random() * gridHeight),
      };
    }

// Check if the snake is colliding with the game board bounds
    function isSnakeCollidingWithBounds() {
      const head = snake[0];
      return (
        head.x < 0 || head.x >= gridWidth || head.y < 0 || head.y >= gridHeight
      );
    }

// Check if the snake is colliding with itself
    function isSnakeCollidingWithItself() {
      const head = snake[0];
      for (let i = 1; i < snake.length; i++) {
        if (snake[i].x === head.x && snake[i].y === head.y) {
          return true;
        }
      }
      return false;
    }

// End the game
    function endGame() {
      alert('Game Over! Your score: ' + snake.length);
      snake = [];
      directionX = 0;
      directionY = -1;
      generateFood();
    }

// Draw the game board
    function drawGameBoard() {
      gameBoard.innerHTML = '';

snake.forEach((segment) => {
        const snakeSegment = document.createElement('div');
        snakeSegment.className = 'snake';
        snakeSegment.style.left = segment.x * gridSize + 'px';
        snakeSegment.style.top = segment.y * gridSize + 'px';
        gameBoard.appendChild(snakeSegment);
      });

const foodElement = document.createElement('div');
      foodElement.className = 'food';
      foodElement.style.left = food.x * gridSize + 'px';
      foodElement.style.top = food.y * gridSize + 'px';
      gameBoard.appendChild(foodElement);
    }

// Handle keyboard input
    document.addEventListener('keydown', (event) => {
      const keyPressed = event.keyCode;
      if (keyPressed === 37 && directionX !== 1) { // Left arrow key
        directionX = -1;
        directionY = 0;
      } else if (keyPressed === 38 && directionY !== 1) { // Up arrow key
        directionX = 0;
        directionY = -1;
      } else if (keyPressed === 39 && directionX !== -1) { // Right arrow key
        directionX = 1;
        directionY = 0;
      } else if (keyPressed === 40 && directionY !== -1) { // Down arrow key
        directionX = 0;
        directionY = 1;
      }
    });

gameLoop();
  </script>
</body>
</html>
```

Note: The above code includes basic functionality for a snake game, but it can be further enhanced and customized based on specific requirements and desired features.