Make a fighting game with pigs that are giant that k○ll you's game

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

No:26144

←

Prev Next

→

Make a fighting game with pigs that are giant that..ALL
Developer User12887｜Date and time 23/11/27 10:50:18
Build time 49.156 sec｜Game capacity 2.804KB｜

Script

Sure! Here's an example of a simple fighting game using JavaScript and pictograms:

Note that the above code assumes you have an image file named "emozi_all/pig.png" in the same directory as the HTML file. You can replace it with any pictogram image you prefer. Additionally, you may need to adjust the canvas size and the pig's speed to suit your needs. To play the game, simply open the HTML file with a web browser, and you will see a blue square representing the player and a pig pictogram on the screen. Use the up arrow key or "w" key to move the player up and avoid colliding with the pig. If the player collides with the pig, a game over message will be displayed. You can then either reload the page to play again or close the alert and continue.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's an example of a simple fighting game using JavaScript and pictograms:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Pig Battle</title>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>
  
  <script>
    const canvas = document.getElementById("gameCanvas");
    const ctx = canvas.getContext("2d");
  
    const player = {
      x: 50,
      y: canvas.height - 50,
      width: 50,
      height: 50,
      speed: 7,
      color: "blue"
    };
  
    const pig = {
      x: canvas.width - 100,
      y: canvas.height - 50,
      width: 80,
      height: 80,
      speed: 3,
      color: "pink"
    };
  
    let isGameOver = false;
  
    function drawPictogram(src, x, y, width, height) {
      const img = new Image();
      img.src = src;
      ctx.drawImage(img, x, y, width, height);
    }
  
    function drawRect(x, y, width, height, color) {
      ctx.fillStyle = color;
      ctx.fillRect(x, y, width, height);
    }
  
    function detectCollision(player, pig) {
      if (
        player.x < pig.x + pig.width &&
        player.x + player.width > pig.x &&
        player.y < pig.y + pig.height &&
        player.y + player.height > pig.y
      ) {
        return true;
      }
      return false;
    }
  
    function update() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
  
      if (!isGameOver) {
        if (player.y > 0) {
          player.y -= player.speed;
        }
  
        if (pig.y > 0) {
          pig.y -= pig.speed;
        }
  
        if (detectCollision(player, pig)) {
          isGameOver = true;
          alert("You lost!");
          return;
        }
  
        drawRect(player.x, player.y, player.width, player.height, player.color);
        drawPictogram("pig.png", pig.x, pig.y, pig.width, pig.height);
  
        requestAnimationFrame(update);
      } else {
        alert("Game over!");
        location.reload();
      }
    }
  
    document.addEventListener("keydown", function(event) {
      if (event.key === "ArrowUp" || event.key === "w") {
        player.y -= player.speed;
      }
    });
  
    update();
  </script>
</body>
</html>
```

Note that the above code assumes you have an image file named "pig.png" in the same directory as the HTML file. You can replace it with any pictogram image you prefer. Additionally, you may need to adjust the canvas size and the pig's speed to suit your needs.

To play the game, simply open the HTML file with a web browser, and you will see a blue square representing the player and a pig pictogram on the screen. Use the up arrow key or "w" key to move the player up and avoid colliding with the pig. If the player collides with the pig, a game over message will be displayed. You can then either reload the page to play again or close the alert and continue.