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

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

No:10704

←

Prev Next

→

A snake game in inter-Korean war mode
Developer User3408｜Date and time 23/8/2 6:08:38
Build time 38.096 sec｜Game capacity 4.172KB｜

Script

Puntuación: 0

←

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 entre Coreas</title>
  <style>
    #gameCanvas {
      background-color: black;
    }

#score {
      color: white;
      text-align: center;
      font-size: 20px;
      margin-top: 10px;
    }

#gameover {
      color: white;
      text-align: center;
      font-size: 30px;
      margin-top: 200px;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="320" height="320"></canvas>
  <div id="score">Puntuación: 0</div>
  <div id="gameover"></div>

// Tamaño de cada celda del juego
    var grid = 16;

// Inicializar la serpiente
    var snake = [];
    snake[0] = { x: 8 * grid, y: 8 * grid };

// Inicializar la dirección de la serpiente
    var direction;

// Inicializar la comida
    var food = {
      x: Math.floor(Math.random() * 20) * grid,
      y: Math.floor(Math.random() * 20) * grid
    };

// Inicializar el marcador y el estado del juego
    var score = 0;
    var gameOver = false;

// Escuchar eventos de teclado para cambiar la dirección de la serpiente
    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";
      }
    });

// Función para dibujar en el canvas
    function draw() {
      // Limpiar el canvas
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// Dibujar la serpiente
      for (var i = 0; i < snake.length; i++) {
        ctx.fillStyle = "green";
        ctx.fillRect(snake[i].x, snake[i].y, grid, grid);
      }

// Dibujar la comida
      ctx.fillStyle = "red";
      ctx.fillRect(food.x, food.y, grid, grid);

// Guardar la posición de la cabeza de la serpiente antes de moverla
      var snakeX = snake[0].x;
      var snakeY = snake[0].y;

// Mover la serpiente en la dirección actual
      if (direction === "LEFT") snakeX -= grid;
      if (direction === "UP") snakeY -= grid;
      if (direction === "RIGHT") snakeX += grid;
      if (direction === "DOWN") snakeY += grid;

// Verificar si la serpiente ha comido la comida
      if (snakeX === food.x && snakeY === food.y) {
        // Incrementar el marcador y generar nueva comida
        score++;
        food = {
          x: Math.floor(Math.random() * 20) * grid,
          y: Math.floor(Math.random() * 20) * grid
        };
      } else {
        // Remover la cola de la serpiente si no ha comido comida
        snake.pop();
      }

// Crear nueva cabeza de la serpiente
      var newHead = {
        x: snakeX,
        y: snakeY
      };

// Verificar colisiones con el cuerpo o los bordes del canvas
      if (
        snakeX < 0 ||
        snakeY < 0 ||
        snakeX >= canvas.width ||
        snakeY >= canvas.height ||
        checkCollision(newHead, snake)
      ) {
        // Finalizar el juego si hay colisión
        gameOver = true;
      }

// Agregar nueva cabeza a la serpiente
      snake.unshift(newHead);

// Actualizar el marcador
      document.getElementById("score").innerHTML = "Puntuación: " + score;

// Si el juego no ha finalizado, continuar dibujando
      if (!gameOver) {
        setTimeout(draw, 100);
      } else {
        // Mostrar mensaje de fin de juego
        document.getElementById("gameover").innerHTML =
          "¡Fin del Juego! Puntuación Final: " + score;
      }
    }

// Función para verificar colisión de la serpiente consigo misma
    function checkCollision(head, array) {
      for (var i = 0; i < array.length; i++) {
        if (head.x == array[i].x && head.y == array[i].y) {
          return true;
        }
      }
      return false;
    }

// Iniciar el juego
    draw();
  </script>
</body>
</html>