A snake game in inter-Korean war mode's game

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

No:10703

168

←

Prev Next

→

A snake game in inter-Korean war mode
Developer User3408｜Date and time 23/8/2 6:07:43
Build time 43.634 sec｜Game capacity 4.631KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Snake - Modo Guerra Coreas</title>
  <style>
    #game-board {
      width: 500px;
      height: 500px;
      margin: 0 auto;
      background-color: #ccc;
      position: relative;
    }
    
    .snake {
      position: absolute;
      width: 20px;
      height: 20px;
      background-color: green;
    }
    
    .food {
      position: absolute;
      width: 20px;
      height: 20px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div id="game-board"></div>

// Tamaño de cada celda del tablero
    var boxSize = 20;

// Velocidad de movimiento de la serpiente
    var speed = 100;

// Puntaje inicial
    var score = 0;

// Dirección de movimiento de la serpiente
    var direction = "right";

// Posición inicial de la serpiente
    var snake = [
      { x: 20, y: 20 },
      { x: 40, y: 20 },
      { x: 60, y: 20 }
    ];

// Posición inicial de la comida
    var food = {
      x: Math.floor(Math.random() * (width / boxSize)) * boxSize,
      y: Math.floor(Math.random() * (height / boxSize)) * boxSize
    };

// Obtener el tablero de juego
    var gameBoard = document.getElementById("game-board");

// Dibujar la serpiente en el tablero de juego
    function drawSnake() {
      gameBoard.innerHTML = "";

snake.forEach(function (snakePart) {
        var snakeElement = document.createElement("div");
        snakeElement.classList.add("snake");
        snakeElement.style.left = snakePart.x + "px";
        snakeElement.style.top = snakePart.y + "px";
        gameBoard.appendChild(snakeElement);
      });
    }

// Dibujar la comida en el tablero de juego
    function drawFood() {
      var foodElement = document.createElement("div");
      foodElement.classList.add("food");
      foodElement.style.left = food.x + "px";
      foodElement.style.top = food.y + "px";
      gameBoard.appendChild(foodElement);
    }

// Mover la serpiente en la dirección actual
    function moveSnake() {
      // Obtener la posición de la cabeza de la serpiente
      var head = { x: snake[0].x, y: snake[0].y };

// Modificar la posición de la cabeza en función de la dirección
      if (direction === "right") head.x += boxSize;
      if (direction === "left") head.x -= boxSize;
      if (direction === "up") head.y -= boxSize;
      if (direction === "down") head.y += boxSize;

// Agregar la nueva posición de la cabeza de la serpiente al inicio del array
      snake.unshift(head);

// Verificar si la serpiente ha comido la comida
      if (head.x === food.x && head.y === food.y) {
        // Incrementar el puntaje
        score++;

// Generar una nueva posición para la comida
        food = {
          x: Math.floor(Math.random() * (width / boxSize)) * boxSize,
          y: Math.floor(Math.random() * (height / boxSize)) * boxSize
        };
      } else {
        // Si no ha comido, remover el último elemento de la serpiente
        snake.pop();
      }
    }

// Verificar si la serpiente ha chocado consigo misma o con los bordes
    function checkCollision() {
      var head = snake[0];
      
      // Verificar colisión con los bordes del tablero
      if (
        head.x < 0 ||
        head.x >= width ||
        head.y < 0 ||
        head.y >= height
      ) {
        clearInterval(gameInterval);
        alert("¡Has perdido! Puntaje obtenido: " + score);
        return;
      }
      
      // Verificar colisión con el cuerpo de la serpiente
      for (var i = 1; i < snake.length; i++) {
        if (snake[i].x === head.x && snake[i].y === head.y) {
          clearInterval(gameInterval);
          alert("¡Has perdido! Puntaje obtenido: " + score);
          return;
        }
      }
    }

// Función para manejar los eventos de teclado
    function handleKeyPress(event) {
      var key = event.keyCode;

if (key === 37 && direction !== "right") direction = "left";
      if (key === 38 && direction !== "down") direction = "up";
      if (key === 39 && direction !== "left") direction = "right";
      if (key === 40 && direction !== "up") direction = "down";
    }

// Dibujar el juego en el tablero
    function drawGame() {
      drawSnake();
      drawFood();
      moveSnake();
      checkCollision();
    }

// Iniciar el procesamiento del juego
    var gameInterval = setInterval(drawGame, speed);

// Manejar los eventos de teclado
    document.addEventListener("keydown", handleKeyPress);
  </script>
</body>
</html>