A snake game way war's game

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

No:10702

←

Prev Next

→

A snake game way war
Developer User3408｜Date and time 23/8/2 6:06:26
Build time 32.758 sec｜Game capacity 4.085KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Snake Game - Modo Guerra</title>
  <style>
    #game-board {
      border: 1px solid #000;
      margin: 20px auto;
      width: 400px;
      height: 400px;
      position: relative;
    }
    
    .snake, .food {
      position: absolute;
      height: 20px;
      width: 20px;
    }
    
    .snake {
      background-color: #000;
    }
    
    .food {
      background-color: #f00;
    }
  </style>
</head>
<body>

<div id="game-board"></div>
  
  <script>
    (function() {
      // Obtenemos la referencia al elemento del tablero de juego
      var gameBoard = document.getElementById('game-board');
      
      // Configuración del juego
      var tileSize = 20; // Tamaño de cada tile del tablero
      var boardSize = 400; // Tamaño total del tablero
      var snakeColor = '#000'; // Color de la serpiente
      var foodColor = '#f00'; // Color de la comida
      
      // Inicialización del juego
      var snake = [{x: 0, y: 0}]; // Posición inicial de la serpiente
      var direction = 'right'; // Dirección inicial
      var food = {x: getRandomPosition(), y: getRandomPosition()}; // Posición inicial de la comida
      
      // Dibujar el tablero de juego
      function drawBoard() {
        gameBoard.innerHTML = '';
        
        for (var i = 0; i < snake.length; i++) {
          var snakeElement = document.createElement('div');
          snakeElement.className = 'snake';
          snakeElement.style.top = snake[i].y + 'px';
          snakeElement.style.left = snake[i].x + 'px';
          
          gameBoard.appendChild(snakeElement);
        }
        
        var foodElement = document.createElement('div');
        foodElement.className = 'food';
        foodElement.style.top = food.y + 'px';
        foodElement.style.left = food.x + 'px';
        
        gameBoard.appendChild(foodElement);
      }
      
      // Mover la serpiente
      function moveSnake() {
        var newHead = Object.assign({}, snake[0]);
        
        if (direction === 'right') {
          newHead.x += tileSize;
        } else if (direction === 'left') {
          newHead.x -= tileSize;
        } else if (direction === 'up') {
          newHead.y -= tileSize;
        } else if (direction === 'down') {
          newHead.y += tileSize;
        }
        
        snake.unshift(newHead);
        
        // Verificar si se ha comido la comida
        if (newHead.x === food.x && newHead.y === food.y) {
          food = {x: getRandomPosition(), y: getRandomPosition()};
        } else {
          snake.pop();
        }
        
        // Verificar colisiones
        if (newHead.x < 0 || newHead.x >= boardSize || newHead.y < 0 || newHead.y >= boardSize || checkCollision(newHead)) {
          clearInterval(gameInterval);
          alert('¡Has perdido! Puntuación: ' + (snake.length - 1));
          location.reload();
        }
        
        drawBoard();
      }
      
      // Verificar colisiones con la serpiente
      function checkCollision(position) {
        for (var i = 1; i < snake.length; i++) {
          if (position.x === snake[i].x && position.y === snake[i].y) {
            return true;
          }
        }
        
        return false;
      }
      
      // Generar posición aleatoria dentro del tablero
      function getRandomPosition() {
        return Math.floor(Math.random() * (boardSize / tileSize)) * tileSize;
      }
      
      // Manejar eventos de teclado
      document.addEventListener('keydown', function(event) {
        if (event.keyCode === 37 && direction !== 'right') {
          direction = 'left';
        } else if (event.keyCode === 38 && direction !== 'down') {
          direction = 'up';
        } else if (event.keyCode === 39 && direction !== 'left') {
          direction = 'right';
        } else if (event.keyCode === 40 && direction !== 'up') {
          direction = 'down';
        }
      });
      
      // Iniciar el juego
      var gameInterval = setInterval(moveSnake, 200);
    })();
  </script>
</body>
</html>