AI game creator

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

No:20916

←

Prev Next

→

Snake Game
Developer User9230｜Date and time 23/10/12 1:43:48
Build time 103.187 sec｜Game capacity 4.551KB｜

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>
    body {
      background-color: #f2f2f2;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }

#game-board {
      border: 1px solid #ccc;
      background-color: #fff;
      width: 300px;
      height: 300px;
      display: grid;
      grid-template-columns: repeat(20, 1fr);
      grid-template-rows: repeat(20, 1fr);
    }

.snake {
      background-color: #333;
    }

.food {
      background-color: #FF6347;
    }
  </style>
</head>
<body>
  <div id="game-board"></div>
  
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const gridWidth = 20; // Width of the game board
      const gridHeight = 20; // Height of the game board
      const snakeSpeed = 200; // Snake movement speed in milliseconds
      let snakeDirection = 'right'; // Initial snake direction
      let snake = [{ x: 10, y: 10 }]; // Initial snake position
      let food = null; // Current food position
      let intervalId = null; // Interval ID for snake movement
      
      const gameBoard = document.getElementById('game-board');
      
      function createGrid() {
        for (let row = 0; row < gridHeight; row++) {
          for (let col = 0; col < gridWidth; col++) {
            const cell = document.createElement('div');
            cell.classList.add('cell');
            gameBoard.appendChild(cell);
          }
        }
      }
      
      function renderSnake() {
        Array.from(document.getElementsByClassName('snake')).forEach((cell) => {
          cell.classList.remove('snake');
        });
        
        snake.forEach((segment) => {
          const cell = document.getElementsByClassName('cell')[segment.x + segment.y * gridWidth];
          cell.classList.add('snake');
        });
      }
      
      function renderFood() {
        const cell = document.getElementsByClassName('cell')[food.x + food.y * gridWidth];
        cell.classList.add('food');
      }
      
      function generateFood() {
        do {
          food = {
            x: Math.floor(Math.random() * gridWidth),
            y: Math.floor(Math.random() * gridHeight)
          };
        } while (isSnakeCell(food));
      }
      
      function isSnakeCell(position) {
        return snake.some((segment) => segment.x === position.x && segment.y === position.y);
      }
      
      function moveSnake() {
        const head = { ...snake[0] };
        
        switch (snakeDirection) {
          case 'right':
            head.x++;
            break;
          case 'left':
            head.x--;
            break;
          case 'up':
            head.y--;
            break;
          case 'down':
            head.y++;
            break;
        }
        
        snake.unshift(head);
        
        if (head.x === food.x && head.y === food.y) {
          generateFood();
        } else {
          snake.pop();
        }
      }
      
      function endGame() {
        clearInterval(intervalId);
        alert('Game Over!');
        resetGame();
      }
      
      function resetGame() {
        snakeDirection = 'right';
        snake = [{ x: 10, y: 10 }];
        generateFood();
        intervalId = setInterval(() => {
          moveSnake();
          if (isSnakeCollision()) {
            endGame();
          } else {
            renderSnake();
          }
        }, snakeSpeed);
      }
      
      function isSnakeCollision() {
        const head = snake[0];
        return (
          head.x < 0 ||
          head.x >= gridWidth ||
          head.y < 0 ||
          head.y >= gridHeight ||
          isSnakeCell(head, snake.slice(1))
        );
      }
      
      function handleKeyDown(event) {
        switch (event.key) {
          case 'ArrowUp':
            if (snakeDirection !== 'down') {
              snakeDirection = 'up';
            }
            break;
          case 'ArrowDown':
            if (snakeDirection !== 'up') {
              snakeDirection = 'down';
            }
            break;
          case 'ArrowLeft':
            if (snakeDirection !== 'right') {
              snakeDirection = 'left';
            }
            break;
          case 'ArrowRight':
            if (snakeDirection !== 'left') {
              snakeDirection = 'right';
            }
            break;
        }
      }
      
      createGrid();
      resetGame();
      document.addEventListener('keydown', handleKeyDown);
    });
  </script>
</body>
</html>