Space invaders but the enemies are zombies.'s game

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

No:41667

←

Prev Next

→

Space invaders but the enemies are zombies.
Developer User18058｜Date and time 24/2/9 1:51:04
Build time 24.201 sec｜Game capacity 6.365KB｜

Script

Este código implementa el clásico juego de Space Invaders donde los enemigos son zombies. El juego es jugable en un smartphone y utiliza imágenes (puedes reemplazar `emozi_all/juego.png` y `emozi_all/zombie.png` con las imágenes deseadas). El jugador puede moverse hacia la izquierda (tecla de flecha izquierda) y hacia la derecha (tecla de flecha derecha) para esquivar a los zombies e intentar eliminarlos disparando balas (tecla de espacio). El objetivo es eliminar la mayor cantidad de zombies posible antes de que alguno de ellos alcance la parte inferior de la pantalla. La puntuación aumenta en 10 puntos por cada zombie eliminado. El juego finaliza cuando un zombie alcanza la parte inferior de la pantalla y muestra un mensaje de Game Over con la puntuación obtenida. ¡Espero que disfrutes el juego!

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Zombie Invaders</title>
  <style>
    canvas {
      background: #000;
      display: block;
      margin: 20px auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="480" height="320"></canvas>

// Inicialización del juego
    function init() {
      canvas = document.getElementById("gameCanvas");
      ctx = canvas.getContext("2d");

player = {
        x: canvas.width / 2,
        y: canvas.height - 30,
        width: 30,
        height: 30,
        speed: 5,
      };

zombies = [];
      bullets = [];
      bulletFiringRate = 200;
      bulletSpeed = 7;
      zombieCreationRate = 1000;
      zombieSpeed = 1;
      score = 0;

bulletImg = new Image();
      bulletImg.src = "bullet.png";

zombieImg = new Image();
      zombieImg.src = "zombie.png";

document.addEventListener("keydown", handleKeyDown);
      document.addEventListener("keyup", handleKeyUp);

setInterval(gameLoop, 20);
      setInterval(createZombie, zombieCreationRate);
    }

// Dibuja los objetos del juego (jugador, zombies, balas)
    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

drawPlayer();
      drawZombies();
      drawBullets();
      drawScore();
    }

// Dibuja al jugador
    function drawPlayer() {
      ctx.beginPath();
      ctx.rect(player.x, player.y, player.width, player.height);
      ctx.fillStyle = "#00FF00";
      ctx.fill();
      ctx.closePath();
    }

// Dibuja los zombies
    function drawZombies() {
      for (var i = 0; i < zombies.length; i++) {
        var zombie = zombies[i];
        ctx.beginPath();
        ctx.drawImage(zombieImg, zombie.x, zombie.y, zombie.width, zombie.height);
        ctx.closePath();
      }
    }

// Dibuja las balas
    function drawBullets() {
      for (var i = 0; i < bullets.length; i++) {
        var bullet = bullets[i];
        ctx.beginPath();
        ctx.drawImage(bulletImg, bullet.x, bullet.y, bullet.width, bullet.height);
        ctx.closePath();
      }
    }

// Dibuja la puntuación
    function drawScore() {
      ctx.font = "16px Arial";
      ctx.fillStyle = "#FFFFFF";
      ctx.fillText("Puntuación: " + score, 10, 20);
    }

// Actualiza las posiciones de los objetos del juego
    function update() {
      updatePlayer();
      updateBullets();
      updateZombies();
    }

// Actualiza la posición del jugador
    function updatePlayer() {
      if (player.moveLeft && player.x > 0) {
        player.x -= player.speed;
      } else if (player.moveRight && player.x < canvas.width - player.width) {
        player.x += player.speed;
      }
    }

// Actualiza la posición de las balas y verifica colisiones
    function updateBullets() {
      for (var i = bullets.length - 1; i >= 0; i--) {
        var bullet = bullets[i];
        bullet.y -= bulletSpeed;

if (bullet.y < 0) {
          bullets.splice(i, 1);
        } else {
          for (var j = zombies.length - 1; j >= 0; j--) {
            var zombie = zombies[j];
            if (checkCollision(bullet, zombie)) {
              bullets.splice(i, 1);
              zombies.splice(j, 1);
              score += 10;
            }
          }
        }
      }
    }

// Actualiza la posición de los zombies, verifica colisiones y fin del juego
    function updateZombies() {
      for (var i = zombies.length - 1; i >= 0; i--) {
        var zombie = zombies[i];
        zombie.y += zombieSpeed;

if (zombie.y > canvas.height - zombie.height) {
          gameOver();
        }
      }
    }

// Verifica si dos elementos colisionan
    function checkCollision(rect1, rect2) {
      if (
        rect1.x < rect2.x + rect2.width &&
        rect1.x + rect1.width > rect2.x &&
        rect1.y < rect2.y + rect2.height &&
        rect1.y + rect1.height > rect2.y
      ) {
        return true;
      }
      return false;
    }

// Crea un nuevo zombie en una posición aleatoria
    function createZombie() {
      var zombie = {
        x: Math.random() * (canvas.width - 30),
        y: 0,
        width: 30,
        height: 30,
      };
      zombies.push(zombie);
    }

// Controla la pulsación y liberación de teclas
    function handleKeyDown(event) {
      if (event.keyCode === 37) {
        player.moveLeft = true;
      } else if (event.keyCode === 39) {
        player.moveRight = true;
      } else if (event.keyCode === 32) {
        fireBullet();
      }
    }

function handleKeyUp(event) {
      if (event.keyCode === 37) {
        player.moveLeft = false;
      } else if (event.keyCode === 39) {
        player.moveRight = false;
      }
    }

// Dispara una bala desde la posición del jugador
    function fireBullet() {
      var bullet = {
        x: player.x + player.width / 2,
        y: player.y,
        width: 5,
        height: 10,
      };
      bullets.push(bullet);
    }

// Finaliza el juego y muestra el mensaje de Game Over
    function gameOver() {
      clearInterval(gameLoop);
      clearInterval(createZombie);
      alert("GAME OVER. Puntuación obtenida: " + score);
    }

// Loop principal del juego
    function gameLoop() {
      draw();
      update();
    }

// Iniciar el juego al cargar la página
    init();
  </script>
</body>
</html>
```

Este código implementa el clásico juego de Space Invaders donde los enemigos son zombies. El juego es jugable en un smartphone y utiliza imágenes (puedes reemplazar `bullet.png` y `zombie.png` con las imágenes deseadas).

El jugador puede moverse hacia la izquierda (tecla de flecha izquierda) y hacia la derecha (tecla de flecha derecha) para esquivar a los zombies e intentar eliminarlos disparando balas (tecla de espacio).

El objetivo es eliminar la mayor cantidad de zombies posible antes de que alguno de ellos alcance la parte inferior de la pantalla. La puntuación aumenta en 10 puntos por cada zombie eliminado.

El juego finaliza cuando un zombie alcanza la parte inferior de la pantalla y muestra un mensaje de Game Over con la puntuación obtenida.

¡Espero que disfrutes el juego!