AI game creator

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

No:18871

←

Prev Next

→

Snake
Developer User8295｜Date and time 23/10/1 0:24:07
Build time 17.986 sec｜Game capacity 4.126KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
  <style>
    #game-container {
      width: 400px;
      height: 400px;
      border: 1px solid #000;
      position: relative;
      margin: 0 auto;
      overflow: hidden;
    }
    
    .snake-cell {
      width: 20px;
      height: 20px;
      background-color: #000;
      position: absolute;
    }
    
    .food-cell {
      width: 20px;
      height: 20px;
      background-color: #f00;
      position: absolute;
    }
  </style>
</head>
<body>
  <div id="game-container"></div>
  
  <script>
    // Enclosing the JavaScript code within script tags
    (function() {
      // Game constants
      const GRID_SIZE = 20; // Size of each cell in the grid
      const GRID_WIDTH = 20; // Number of cells in the x direction
      const GRID_HEIGHT = 20; // Number of cells in the y direction
      
      // Game state variables
      let snake = [{ x: 10, y: 10 }]; // Initial position of the snake
      let direction = 'right'; // Initial direction of the snake
      let food = { x: 15, y: 10 }; // Initial position of the food
      
      let gameContainer = document.getElementById('game-container');
      
      function updateGame() {
        // Clearing the game container
        gameContainer.innerHTML = '';
        
        // Updating the snake position based on the current direction
        let head = Object.assign({}, snake[0]);
        if (direction === 'left') head.x -= 1;
        if (direction === 'right') head.x += 1;
        if (direction === 'up') head.y -= 1;
        if (direction === 'down') head.y += 1;

snake.unshift(head); // Adding the new head to the snake
        
        // Check if the snake has collided with the walls or itself
        if (head.x < 0 || head.x >= GRID_WIDTH || head.y < 0 || head.y >= GRID_HEIGHT || hasCollidedWithSelf()) {
          alert('Game Over!');
          resetGame();
          return;
        }
        
        // Check if the snake has eaten the food
        if (head.x === food.x && head.y === food.y) {
          // Generate new food randomly
          food = getRandomPosition();
        } else {
          snake.pop(); // Remove the last tail segment if the snake didn't eat the food
        }
        
        // Draw the snake
        snake.forEach((segment, index) => {
          let segmentElement = document.createElement('div');
          segmentElement.className = 'snake-cell';
          segmentElement.style.left = segment.x * GRID_SIZE + 'px';
          segmentElement.style.top = segment.y * GRID_SIZE + 'px';
          gameContainer.appendChild(segmentElement);
        });
        
        // Draw the food
        let foodElement = document.createElement('div');
        foodElement.className = 'food-cell';
        foodElement.style.left = food.x * GRID_SIZE + 'px';
        foodElement.style.top = food.y * GRID_SIZE + 'px';
        gameContainer.appendChild(foodElement);
      }
      
      function resetGame() {
        snake = [{ x: 10, y: 10 }];
        direction = 'right';
        food = { x: 15, y: 10 };
      }
      
      function hasCollidedWithSelf() {
        let 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;
      }
      
      function getRandomPosition() {
        return {
          x: Math.floor(Math.random() * GRID_WIDTH),
          y: Math.floor(Math.random() * GRID_HEIGHT),
        };
      }
      
      // Handle keyboard events to change the direction of the snake
      document.addEventListener('keydown', event => {
        if (event.key === 'ArrowUp' && direction !== 'down') direction = 'up';
        if (event.key === 'ArrowDown' && direction !== 'up') direction = 'down';
        if (event.key === 'ArrowLeft' && direction !== 'right') direction = 'left';
        if (event.key === 'ArrowRight' && direction !== 'left') direction = 'right';
      });
      
      // Main game loop
      setInterval(updateGame, 200); // Update the game every 200 milliseconds
    })();
  </script>
</body>
</html>