Make a simple game of flappy birds but the bird is a frog's game

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

No:39159

←

Prev Next

→

Make a simple game of flappy birds but the bird is..ALL
Developer User15380｜Date and time 24/1/27 1:42:30
Build time 27.017 sec｜Game capacity 4.42KB｜

Script

Sure! Here's a simple implementation of the Flappy Bird game where the bird is replaced with a frog. The game can be played on a smartphone and uses pictograms for visual elements. The game is written in a single HTML file and enclosed in `` tags. <br><br> <br> <style> canvas { border: 1px solid black; display: block; margin: 0 auto; } </style> <canvas id="gameCanvas" width="320" height="480"></canvas>

To play the game, you'll need to have three image files: `emozi_all/play.png`, `emozi_chicken.png`, and `emozi_rabbit.png`. You can replace the image file names with your own pictogram-based images. Simply save the HTML file along with the image files in the same directory and open it in a web browser on your smartphone. Tap the screen to make the frog hop and try to navigate through the pipes without colliding. Good luck and have fun playing Froggy Hop!

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Froggy Hop</title>
    <style>
      canvas {
        border: 1px solid black;
        display: block;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas" width="320" height="480"></canvas>
    <script>
      // Game initialization
      const canvas = document.getElementById("gameCanvas");
      const context = canvas.getContext("2d");

// Frog variables
      const frogWidth = 50;
      const frogHeight = 50;
      let frogX = 50;
      let frogY = canvas.height / 2 - frogHeight / 2;
      let gravity = 2;
      let jump = -30;

// Pipe variables
      const pipeWidth = 80;
      const pipeHeight = 300;
      const pipeGap = 150;
      let pipes = [];
      let pipeSpeed = 3;
      let pipeInterval = 100;

let score = 0;
      let gameOver = false;

// Image assets
      const frogImage = new Image();
      frogImage.src = "frog.png";
      const pipeTopImage = new Image();
      pipeTopImage.src = "pipe-top.png";
      const pipeBottomImage = new Image();
      pipeBottomImage.src = "pipe-bottom.png";

// Game loop
      function gameLoop() {
        if (gameOver) {
          return;
        }

update();
        draw();
        requestAnimationFrame(gameLoop);
      }

// Update game state
      function update() {
        if (frogY + frogHeight >= canvas.height || frogY <= 0) {
          gameOver = true;
        }

frogY += gravity;

if (pipes.length === 0 || pipes[pipes.length - 1].x < canvas.width - pipeInterval) {
          generatePipes();
        }

for (let i = 0; i < pipes.length; i++) {
          pipes[i].x -= pipeSpeed;

if (collisionDetection(frogX, frogY, frogWidth, frogHeight, pipes[i])) {
            gameOver = true;
          }

if (pipes[i].x + pipeWidth < 0) {
            score++;
            pipes.splice(i, 1);
          }
        }
      }

// Generate new set of pipes
      function generatePipes() {
        const pipeX = canvas.width;
        const pipeY = pipeHeight + Math.random() * (canvas.height - 2 * pipeHeight - pipeGap);
        pipes.push({ x: pipeX, y: pipeY });
      }

// Perform collision detection
      function collisionDetection(frogX, frogY, frogWidth, frogHeight, pipe) {
        return (
          frogX + frogWidth > pipe.x &&
          frogX < pipe.x + pipeWidth &&
          (frogY < pipe.y || frogY + frogHeight > pipe.y + pipeGap)
        );
      }

// Handle user input (tap)
      function handleTap() {
        if (!gameOver) {
          frogY += jump;
        }
      }

// Draw game objects
      function draw() {
        context.clearRect(0, 0, canvas.width, canvas.height);

// Draw frog
        context.drawImage(frogImage, frogX, frogY, frogWidth, frogHeight);

// Draw pipes
        for (let i = 0; i < pipes.length; i++) {
          context.drawImage(pipeTopImage, pipes[i].x, 0, pipeWidth, pipeHeight);
          context.drawImage(
            pipeBottomImage,
            pipes[i].x,
            pipes[i].y + pipeGap,
            pipeWidth,
            canvas.height - pipes[i].y - pipeGap
          );
        }

// Draw score
        context.fillStyle = "black";
        context.font = "24px Verdana";
        context.fillText("Score: " + score, 10, 30);

if (gameOver) {
          context.fillStyle = "red";
          context.font = "32px Verdana";
          context.fillText("Game Over!", canvas.width / 2 - 100, canvas.height / 2);
        }
      }

// Start the game
      document.addEventListener("click", handleTap);
      gameLoop();
    </script>
  </body>
</html>
```

To play the game, you'll need to have three image files: `frog.png`, `pipe-top.png`, and `pipe-bottom.png`. You can replace the image file names with your own pictogram-based images. Simply save the HTML file along with the image files in the same directory and open it in a web browser on your smartphone. Tap the screen to make the frog hop and try to navigate through the pipes without colliding. Good luck and have fun playing Froggy Hop!