Create a slingshot game by k○lling pigs, similar to Angry Birds's game

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

No:23967

←

Prev Next

→

Create a slingshot game by k○lling pigs, similar t..ALL
Developer User11222｜Date and time 23/11/4 21:53:19
Build time 203.814 sec｜Game capacity 5.955KB｜

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>Slingshot Game</title>
  <style>
    #canvas {
      border: 1px solid black;
      overflow: hidden;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="canvas" width="400" height="300"></canvas>

// Definir los pictogramas para los pájaros, el cerdo y el suelo
    var birdImg = document.createElement("img");
    birdImg.src = "https://example.com/bird.png";
    
    var pigImg = document.createElement("img");
    pigImg.src = "https://example.com/pig.png";
    
    var groundImg = document.createElement("img");
    groundImg.src = "https://example.com/ground.png";

// Definir el estado inicial del juego
    var game = {
      birds: [
        { x: 50, y: 250, width: 40, height: 40 }, // Posición y tamaño de los pájaros
      ],
      pigs: [
        { x: 300, y: 240, width: 50, height: 50 }, // Posición y tamaño del cerdo
      ],
      ground: {
        y: 290,
        width: canvas.width,
        height: 10
      },
      slingshot: {
        x: 30,
        y: 240,
        width: 20,
        height: 100
      },
      isDragging: false,
      currentBirdIndex: 0,
    };

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

// Dibujar el suelo
      ctx.drawImage(groundImg, 0, game.ground.y, game.ground.width, game.ground.height);

// Dibujar los cerdos
      for (var i = 0; i < game.pigs.length; i++) {
        var pig = game.pigs[i];
        ctx.drawImage(pigImg, pig.x, pig.y, pig.width, pig.height);
      }

// Dibujar los pájaros
      for (var i = 0; i < game.birds.length; i++) {
        var bird = game.birds[i];
        ctx.drawImage(birdImg, bird.x, bird.y, bird.width, bird.height);
      }

// Dibujar la resortera
      var slingshot = game.slingshot;
      ctx.fillRect(slingshot.x, slingshot.y, slingshot.width, slingshot.height);

// Dibujar la línea entre el pájaro y la resortera si estamos arrastrando
      if (game.isDragging) {
        var bird = game.birds[game.currentBirdIndex];
        ctx.beginPath();
        ctx.moveTo(bird.x + bird.width / 2, bird.y + bird.height / 2);
        ctx.lineTo(slingshot.x + slingshot.width / 2, slingshot.y + slingshot.height);
        ctx.stroke();
      }
    }

// Función para manejar el inicio del arrastre
    function startDrag() {
      game.isDragging = true;
    }

// Función para manejar el final del arrastre y lanzamiento del pájaro
    function endDrag() {
      game.isDragging = false;
      var bird = game.birds[game.currentBirdIndex];
      var slingshot = game.slingshot;

var dx = bird.x + bird.width / 2 - (slingshot.x + slingshot.width / 2);
      var dy = bird.y + bird.height / 2 - (slingshot.y + slingshot.height / 2);
      var distance = Math.sqrt(dx * dx + dy * dy);
    
      var force = Math.min(10, distance); // Limitar la fuerza máxima aplicada

bird.dx = (dx / distance) * force;
      bird.dy = (dy / distance) * force;
    }

// Función para actualizar el estado del juego en cada cuadro
    function updateGame() {
      var bird = game.birds[game.currentBirdIndex];

if (game.isDragging) {
        // Actualizar la posición del pájaro arrastrado por el mouse
        bird.x = event.clientX - canvas.offsetLeft - bird.width / 2;
        bird.y = event.clientY - canvas.offsetTop - bird.height / 2;
      } else {
        // Aplicar la gravedad al pájaro en vuelo
        bird.dy += 0.5;
        bird.x += bird.dx;
        bird.y += bird.dy;

// Detectar colisiones con los cerdos
        for (var i = 0; i < game.pigs.length; i++) {
          var pig = game.pigs[i];
          if (
            bird.x < pig.x + pig.width &&
            bird.x + bird.width > pig.x &&
            bird.y < pig.y + pig.height &&
            bird.y + bird.height > pig.y
          ) {
            // El pájaro impactó al cerdo, eliminarlo
            game.pigs.splice(i, 1);
            
            // Si no hay más cerdos, mostrar mensaje de victoria y finalizar el juego
            if (game.pigs.length === 0) {
              setTimeout(function() {
                alert("¡Has ganado! Todos los cerdos han sido eliminados.");
                location.reload();
              }, 200);
            } else {
              // Si aún quedan cerdos, pasar al siguiente pájaro
              game.currentBirdIndex++;
              if (game.currentBirdIndex >= game.birds.length) {
                // Si ya no hay más pájaros, mostrar mensaje de derrota y finalizar el juego
                setTimeout(function() {
                  alert("¡Has perdido! No has eliminado todos los cerdos.");
                  location.reload();
                }, 200);
              }
            }
          }
        }

// Detectar colisión con el suelo
        if (bird.y + bird.height > game.ground.y) {
          // El pájaro ha tocado el suelo, mostrar mensaje de derrota y finalizar el juego
          setTimeout(function() {
            alert("¡Has perdido! El pájaro ha tocado el suelo.");
            location.reload();
          }, 200);
        }
      }

drawGame();
      requestAnimationFrame(updateGame);
    }

// Asociar eventos de arrastre y lanzamiento al canvas
    canvas.addEventListener("mousedown", startDrag);
    canvas.addEventListener("mouseup", endDrag);

// Dibujar el juego inicial
    drawGame();

// Iniciar el ciclo de juego
    updateGame();
  </script>
</body>
</html>