AI game creator

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

No:12709

←

Prev Next

→

Snake
Developer User4587｜Date and time 23/8/22 10:50:37
Build time 27.618 sec｜Game capacity 4.911KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

<!DOCTYPE html>
<html>
  <head>
    <title>Snake Game</title>
    <style>
      #game-board {
        position: relative;
        width: 400px;
        height: 400px;
        background-color: #ddd;
        border: 1px solid #999;
      }
      .snake {
        position: absolute;
        width: 20px;
        height: 20px;
        background-color: green;
      }
      .food {
        position: absolute;
        width: 20px;
        height: 20px;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div id="game-board"></div>
    <script>
      document.addEventListener('DOMContentLoaded', () => {
        const gameBoard = document.getElementById('game-board');
        const cellSize = 20;
        const boardSize = 20;
        const initialSnakeLength = 3;
        const snakeSpeed = 250; // milliseconds

let snake = [{ x: 10, y: 10 }];
        let direction = 'right';
        let food = {};
        let gameLoop;

// Generate a random position for the food
        function generateFood() {
          food = {
            x: Math.floor(Math.random() * boardSize),
            y: Math.floor(Math.random() * boardSize),
          };
        }

// Render the snake and food on the game board
        function render() {
          gameBoard.innerHTML = '';
          const snakeHead = snake[0];
          const snakeTail = [...snake];

snakeTail.pop();

snake.forEach((cell, index) => {
            const snakeElement = document.createElement('div');
            snakeElement.style.left = `${cell.x * cellSize}px`;
            snakeElement.style.top = `${cell.y * cellSize}px`;
            snakeElement.classList.add('snake');
            if (index === 0) {
              snakeElement.style.backgroundColor = 'darkgreen';
            }
            gameBoard.appendChild(snakeElement);
          });

const foodElement = document.createElement('div');
          foodElement.style.left = `${food.x * cellSize}px`;
          foodElement.style.top = `${food.y * cellSize}px`;
          foodElement.classList.add('food');
          gameBoard.appendChild(foodElement);
        }

// Move the snake in the current direction
        function moveSnake() {
          const snakeHead = {
            x: snake[0].x,
            y: snake[0].y,
          };

switch (direction) {
            case 'up':
              snakeHead.y--;
              break;
            case 'down':
              snakeHead.y++;
              break;
            case 'left':
              snakeHead.x--;
              break;
            case 'right':
              snakeHead.x++;
              break;
          }

snake.unshift(snakeHead);
          if (snake.length > initialSnakeLength) {
            snake.pop();
          }
        }

// Handle key press events for changing snake direction
        function handleKeyPress(event) {
          const key = event.key.toLowerCase();

if (key === 'arrowup' && direction !== 'down') {
            direction = 'up';
          } else if (key === 'arrowdown' && direction !== 'up') {
            direction = 'down';
          } else if (key === 'arrowleft' && direction !== 'right') {
            direction = 'left';
          } else if (key === 'arrowright' && direction !== 'left') {
            direction = 'right';
          }
        }

// Check if the snake has collided with the game board boundaries or itself
        function checkCollision() {
          const snakeHead = snake[0];

if (
            snakeHead.x < 0 ||
            snakeHead.x >= boardSize ||
            snakeHead.y < 0 ||
            snakeHead.y >= boardSize
          ) {
            endGame();
          }

for (let i = 1; i < snake.length; i++) {
            if (snake[i].x === snakeHead.x && snake[i].y === snakeHead.y) {
              endGame();
              break;
            }
          }
        }

// Check if the snake has eaten the food
        function checkFoodCollision() {
          const snakeHead = snake[0];

if (snakeHead.x === food.x && snakeHead.y === food.y) {
            initialSnakeLength++;
            generateFood();
          }
        }

// Game over - stop the game loop and display a message
        function endGame() {
          clearInterval(gameLoop);
          gameBoard.innerHTML = '<h1>Game Over</h1>';
        }

// Start the game
        function startGame() {
          generateFood();
          render();
          gameLoop = setInterval(() => {
            moveSnake();
            checkCollision();
            checkFoodCollision();
            render();
          }, snakeSpeed);
        }

// Initialize game
        startGame();

// Listen for key press events
        document.addEventListener('keydown', handleKeyPress);
      });
    </script>
  </body>
</html>