Snake Game's game | AI game creator

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

No:36063

4977

Snake Game
Developer anonymous｜Date and time 24/1/16 12:03:06
Build time unknown sec｜Game capacity 4.617KB｜

→ 　

0　

0　

　
　
　
　

[PR]現在の人気ゲームランキング

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
  <head>
    <title>Juego de la Serpiente</title>
    <style>
      #game-board {
        width: 400px;
        height: 400px;
        border: 1px solid #000;
        position: relative;
      }
      
      .snake {
        width: 20px;
        height: 20px;
        position: absolute;
        background-color: green;
      }
      
      .food {
        width: 20px;
        height: 20px;
        position: absolute;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div id="game-board"></div>

<script>
      window.onload = function() {
        const gameBoard = document.getElementById('game-board');
        const gridSize = 20;
        const boardSize = 400;
        const maxCells = boardSize / gridSize;
        const initialSnakeLength = 3;
  
        let snake = [{ x: 0, y: 0 }];
        let food = { x: 0, y: 0 };
        let direction = 'right';
        let score = 0;
  
        function getRandomPosition() {
          return Math.floor(Math.random() * maxCells) * gridSize;
        }
  
        function drawSnake() {
          gameBoard.innerHTML = '';
  
          snake.forEach((cell) => {
            const snakeCell = document.createElement('div');
            snakeCell.classList.add('snake');
            snakeCell.style.left = cell.x + 'px';
            snakeCell.style.top = cell.y + 'px';
            gameBoard.appendChild(snakeCell);
          });
        }
  
        function drawFood() {
          const foodCell = document.createElement('div');
          foodCell.classList.add('food');
          foodCell.style.left = food.x + 'px';
          foodCell.style.top = food.y + 'px';
          gameBoard.appendChild(foodCell);
        }
  
        function detectCollision() {
          // Check if snake hits walls
          if (
            snake[0].x < 0 ||
            snake[0].x >= boardSize ||
            snake[0].y < 0 ||
            snake[0].y >= boardSize
          ) {
            endGame();
          }
  
          // Check if snake hits itself
          for (let i = 1; i < snake.length; i++) {
            if (snake[i].x === snake[0].x && snake[i].y === snake[0].y) {
              endGame();
            }
          }
  
          // Check if snake eats food
          if (snake[0].x === food.x && snake[0].y === food.y) {
            // Increase score
            score++;
  
            // Generate new food position
            generateFood();
  
            // Add a new cell to the snake
            const tail = { x: snake[snake.length - 1].x, y: snake[snake.length - 1].y };
            snake.push(tail);
          }
        }
  
        function generateFood() {
          food.x = getRandomPosition();
          food.y = getRandomPosition();
  
          // Make sure food does not spawn on the snake
          snake.forEach((cell) => {
            if (cell.x === food.x && cell.y === food.y) {
              generateFood();
            }
          });
        }
  
        function updateGame() {
          const head = { x: snake[0].x, y: snake[0].y };
  
          switch (direction) {
            case 'up':
              head.y -= gridSize;
              break;
            case 'down':
              head.y += gridSize;
              break;
            case 'left':
              head.x -= gridSize;
              break;
            case 'right':
              head.x += gridSize;
              break;
          }
  
          snake.unshift(head);
          if (snake.length > initialSnakeLength) {
            snake.pop();
          }
  
          drawSnake();
          drawFood();
  
          detectCollision();
        }
  
        function changeDirection(event) {
          const newDirection = event.keyCode;

// ArrowUp: 38, ArrowDown: 40, ArrowLeft: 37, ArrowRight: 39
          if (newDirection === 38 && direction !== 'down') {
            direction = 'up';
          } else if (newDirection === 40 && direction !== 'up') {
            direction = 'down';
          } else if (newDirection === 37 && direction !== 'right') {
            direction = 'left';
          } else if (newDirection === 39 && direction !== 'left') {
            direction = 'right';
          }
        }
  
        function endGame() {
          alert('Juego terminado. Puntuación: ' + score);
          snake = [{ x: 0, y: 0 }];
          direction = 'right';
          score = 0;
        }
  
        generateFood();
        drawSnake();
        drawFood();
  
        setInterval(updateGame, 100);
        document.addEventListener('keydown', changeDirection);
      };
    </script>
  </body>
</html>