Flappy bird concept but with piggy’s instead of birds's game

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

No:23625

102

←

Prev Next

→

Flappy bird concept but with piggy’s instead of bi..ALL
Developer User10424｜Date and time 23/11/2 8:22:22
Build time 73.373 sec｜Game capacity 3.452KB｜

Script

Sure! Here's an example of a simple game based on the Flappy Bird concept, but with piggies instead of birds. The game will be implemented as a single HTML file, containing JavaScript code enclosed within script tags.

To use this code, save it as a `.html` file and ensure you have a `emozi_himawari.png` file in the same directory, representing the image for the piggy. When you open the HTML file in a browser, the game will start and you can play it by touching the screen to make the piggy fly upwards. The objective is to navigate the piggy through the gaps between the green obstacles and score as many points as possible before colliding with an obstacle. Please note that for a complete game, additional features such as sound effects, high score tracking, and more advanced game mechanics can be added. This example provides a basic starting point.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Piggy Fly Game</title>
  <style>
    canvas {
      border: 1px solid black;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>

// Game initialization
    function gameStart() {
      canvas = document.getElementById("gameCanvas");
      canvasContext = canvas.getContext("2d");
      piggyImage = new Image();
      piggyImage.src = "piggy.png";

// Listen to touch events for smartphone operation
      canvas.addEventListener("touchstart", movePiggyUp);

setInterval(updateGame, 20); // Run game update every 20 milliseconds
    }

// Game update function
    function updateGame() {
      // Clear canvas
      canvasContext.clearRect(0, 0, canvas.width, canvas.height);

// Update piggy position
      piggySpeedY += gravity;
      piggyY += piggySpeedY;

// Draw piggy
      canvasContext.drawImage(piggyImage, piggyX, piggyY, 50, 50);

// Draw obstacles
      canvasContext.fillStyle = "green";
      canvasContext.fillRect(obstacleX, 0, obstacleWidth, 200);
      canvasContext.fillRect(obstacleX, 400 - obstacleGap, obstacleWidth, obstacleGap);

// Check collision with obstacles
      if (
        (piggyY < 200 && (piggyX + 50 > obstacleX && piggyX < obstacleX + obstacleWidth)) ||
        (piggyY + 50 > 400 - obstacleGap && (piggyX + 50 > obstacleX && piggyX < obstacleX + obstacleWidth))
      ) {
        gameOver();
      }

// Update score
      if (obstacleX == piggyX) {
        score++;
      }

// Move obstacles
      obstacleX -= 3;
      if (obstacleX < -obstacleWidth) {
        obstacleX = canvas.width;
      }

// Draw score
      canvasContext.font = "20px Arial";
      canvasContext.fillStyle = "black";
      canvasContext.fillText("Score: " + score, 10, 30);
    }

// Move piggy up when touched
    function movePiggyUp() {
      if (!isGameOver) {
        piggySpeedY = -8;
      }
    }

// Game over processing
    function gameOver() {
      isGameOver = true;
      canvas.removeEventListener("touchstart", movePiggyUp);
      alert("Game Over! Your score: " + score);
    }

// Start the game
    gameStart();
  </script>
</body>
</html>
```

To use this code, save it as a `.html` file and ensure you have a `piggy.png` file in the same directory, representing the image for the piggy. When you open the HTML file in a browser, the game will start and you can play it by touching the screen to make the piggy fly upwards. The objective is to navigate the piggy through the gaps between the green obstacles and score as many points as possible before colliding with an obstacle.

Please note that for a complete game, additional features such as sound effects, high score tracking, and more advanced game mechanics can be added. This example provides a basic starting point.