AI game creator

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

No:38193

←

Prev Next

→

Flappy man
Developer User10392｜Date and time 24/1/23 6:32:08
Build time 13.323 sec｜Game capacity 3.404KB｜

Script

Sure! Here's an example of a simple Flappy Man game implemented in a single HTML file using JavaScript:

Please note that this code assumes you have `emozi_all/bg.png`, `emozi_all/man.png`, and `emozi_rabbit.png` files in the same directory as the HTML file. The `emozi_all/bg.png` should be the background image, `emozi_all/background.png` should be the man's pictogram, and `emozi_all/man.png` should be the pipe's pictogram. You can try running this code by saving it as an HTML file and opening it in a web browser on your smartphone. The game starts automatically, and you can control the Flappy Man by tapping on the screen or pressing the spacebar key. The goal is to avoid colliding with the pipes and try to get the highest score possible.

←

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 Flappy Man game implemented in a single HTML file using JavaScript:

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

// Game variables
    var gravity = 0.5;
    var flapPower = -7;
    var score = 0;

// Pictogram images
    var bgImage = new Image();
    var manImage = new Image();
    var pipeImage = new Image();

bgImage.src = "bg.png";
    manImage.src = "man.png";
    pipeImage.src = "pipe.png";

// Pictogram dimensions
    var manWidth = 50;
    var manHeight = 50;
    var pipeWidth = 80;
    var pipeHeight = 400;

// Man object
    var man = {
      x: 100,
      y: 200,
      width: manWidth,
      height: manHeight,
      speedY: 0,
      draw: function() {
        ctx.drawImage(manImage, this.x, this.y, this.width, this.height);
      },
      flap: function() {
        this.speedY = flapPower;
      }
    };

// Pipe object
    var pipe = {
      x: canvas.width,
      y: 0,
      width: pipeWidth,
      height: pipeHeight,
      speedX: 2,
      draw: function() {
        ctx.drawImage(pipeImage, this.x, this.y, this.width, this.height);
      },
      update: function() {
        this.x -= this.speedX;
      }
    };

// Keyboard event listener
    document.addEventListener("keydown", function(event) {
      if (event.keyCode === 32) { // Spacebar key
        man.flap();
      }
    });

function collisionDetection() {
      if (
        man.x < pipe.x + pipe.width &&
        man.x + man.width > pipe.x &&
        (man.y < pipe.y + pipe.height || man.y + man.height > pipe.y + pipe.height + 100)
      ) {
        return true; // Collision detected
      }
      return false; // No collision
    }

function drawScore() {
      ctx.font = "24px Arial";
      ctx.fillText("Score: " + score, 10, 40);
    }

function gameLoop() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.drawImage(bgImage, 0, 0, canvas.width, canvas.height);
      man.draw();
      pipe.draw();
      drawScore();

man.y += man.speedY;
      man.speedY += gravity;

pipe.update();

if (collisionDetection()) {
        // Game over
        alert("Game over! Score: " + score);
        document.location.reload(); // Restart the game
      }

if (pipe.x + pipe.width < 0) {
        // Pipe passed
        score++;
        pipe.x = canvas.width;
      }

requestAnimationFrame(gameLoop);
    }

gameLoop();
  </script>
</body>
</html>
```

Please note that this code assumes you have `bg.png`, `man.png`, and `pipe.png` files in the same directory as the HTML file. The `bg.png` should be the background image, `man.png` should be the man's pictogram, and `pipe.png` should be the pipe's pictogram.

You can try running this code by saving it as an HTML file and opening it in a web browser on your smartphone. The game starts automatically, and you can control the Flappy Man by tapping on the screen or pressing the spacebar key. The goal is to avoid colliding with the pipes and try to get the highest score possible.