AI game creator

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

No:25231

←

Prev Next

→

Snake Game
Developer User9810｜Date and time 23/11/19 15:40:45
Build time 223.181 sec｜Game capacity 4.474KB｜

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 {
      width: 300px;
      height: 300px;
      border: 1px solid #000;
    }
  </style>
</head>
<body>
  <div id="game-board"></div>
  
  <script>
    // Define the snake game
    (function() {
      // Dimensions of the game board
      var WIDTH = 300;
      var HEIGHT = 300;
      
      // Size of each cell in the game board
      var CELL_SIZE = 20;
      
      // Initial snake position
      var initialSnake = [
        { x: 4, y: 3 },
        { x: 3, y: 3 },
        { x: 2, y: 3 },
        { x: 1, y: 3 }
      ];
      
      // Initial direction of the snake
      var initialDirection = 'right';
      
      // Game state variables
      var snake;
      var direction;
      var food;
      var gameInterval;
      
      function startGame() {
        // Initialize game state
        snake = initialSnake.slice();
        direction = initialDirection;
        generateFood();
        
        // Start the game loop
        gameInterval = setInterval(moveSnake, 200);
      }
      
      function generateFood() {
        var x = Math.floor(Math.random() * (WIDTH / CELL_SIZE));
        var y = Math.floor(Math.random() * (HEIGHT / CELL_SIZE));
        
        food = { x: x, y: y };
      }
      
      function moveSnake() {
        // Calculate the new head position based on the current direction
        var head = Object.assign({}, snake[0]);
        
        switch (direction) {
          case 'right':
            head.x++;
            break;
          case 'left':
            head.x--;
            break;
          case 'up':
            head.y--;
            break;
          case 'down':
            head.y++;
            break;
        }
        
        // Check if the head collides with the boundaries of the game board or with itself
        if (
          head.x < 0 || head.x >= (WIDTH / CELL_SIZE) ||
          head.y < 0 || head.y >= (HEIGHT / CELL_SIZE) ||
          isCollision(head)
        ) {
          endGame();
          return;
        }
        
        // Check if the head collides with the food
        if (head.x === food.x && head.y === food.y) {
          // Add a new segment to the snake
          snake.unshift(head);
          generateFood();
        } else {
          // Remove the last segment of the snake
          snake.pop();
          // Add the new head to the snake
          snake.unshift(head);
        }
        
        // Redraw the game board
        drawGame();
      }
      
      function isCollision(head) {
        for (var i = 1; i < snake.length; i++) {
          if (head.x === snake[i].x && head.y === snake[i].y) {
            return true;
          }
        }
        return false;
      }
      
      function drawGame() {
        var gameBoard = document.getElementById('game-board');
        gameBoard.innerHTML = '';
        
        // Draw the snake
        for (var i = 0; i < snake.length; i++) {
          var segment = snake[i];
          var element = createGameElement('snake');
          element.style.left = (segment.x * CELL_SIZE) + 'px';
          element.style.top = (segment.y * CELL_SIZE) + 'px';
          gameBoard.appendChild(element);
        }
        
        // Draw the food
        var foodElement = createGameElement('food');
        foodElement.style.left = (food.x * CELL_SIZE) + 'px';
        foodElement.style.top = (food.y * CELL_SIZE) + 'px';
        gameBoard.appendChild(foodElement);
      }
      
      function createGameElement(className) {
        var element = document.createElement('div');
        element.className = className;
        return element;
      }
      
      function endGame() {
        clearInterval(gameInterval);
        alert('Game over! Your score: ' + snake.length);
        startGame();
      }
      
      // Handle arrow key presses to change the snake's direction
      document.addEventListener('keydown', function(event) {
        var key = event.key;
        
        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';
        }
      });
      
      startGame();
    })();
  </script>
</body>
</html>