AI game creator

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

No:34331

←

Prev Next

→

Make flappy bird
Developer User16226｜Date and time 24/1/10 4:23:42
Build time 23.064 sec｜Game capacity 4.599KB｜

Script

Sure! Here's an example code implementation of a simplified version of Flappy Bird game using HTML, CSS, and JavaScript, all within a single HTML file:

To play, save the above code into an HTML file, open it in a web browser, preferably on a smartphone, and then tap the screen to make the character (yellow rectangle) fly upwards and avoid the obstacles (green rectangles). The score will be shown in the top right corner, and the game will end if the character collides with any obstacle. Note: This is a simplified version of Flappy Bird and may not contain all the features or aesthetics of the original game, but it should provide a basic playable experience.

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

Sure! Here's an example code implementation of a simplified version of Flappy Bird game using HTML, CSS, and JavaScript, all within a single HTML file:

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    canvas { border: 1px solid #000000; }
  </style>
</head>
<body onload="startGame()">
  <script>
    // Game Object
    var myGamePiece;
    var myObstacles = [];
    var score;

// Start the game
    function startGame() {
      myGamePiece = new Component(30, 30, "yellow", 10, 120);
      score = new Component("24px", "Consolas", "black", 280, 40, "text");
      myGameArea.start();
    }

// Define game area
    var myGameArea = {
      canvas: document.createElement("canvas"),
      start: function() {
        this.canvas.width = 480;
        this.canvas.height = 270;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        this.frameNo = 0;
        this.interval = setInterval(updateGameArea, 20);
        },
      clear: function() {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
      },
      stop: function() {
        clearInterval(this.interval);
      }
    };

// Define game components
    function Component(width, height, color, x, y, type) {
      this.type = type;
      if (type == "text") {
        this.text = color;
      }
      this.width = width;
      this.height = height;
      this.speedX = 0;
      this.speedY = 0;
      this.x = x;
      this.y = y;
      this.update = function() {
        ctx = myGameArea.context;
        if (type == "text") {
          ctx.font = this.width + " " + this.height;
          ctx.fillStyle = color;
          ctx.fillText(this.text, this.x, this.y);
        } else {
          ctx.fillStyle = color;
          ctx.fillRect(this.x, this.y, this.width, this.height);
        }
      };
      this.newPos = function() {
        this.x += this.speedX;
        this.y += this.speedY;
      };
      this.crashWith = function(otherobj) {
        var myleft = this.x;
        var myright = this.x + (this.width);
        var mytop = this.y;
        var mybottom = this.y + (this.height);
        var otherleft = otherobj.x;
        var otherright = otherobj.x + (otherobj.width);
        var othertop = otherobj.y;
        var otherbottom = otherobj.y + (otherobj.height);
        var crash = true;
        if ((mybottom < othertop) || (mytop > otherbottom) || (myright < otherleft) || (myleft > otherright)) {
          crash = false;
        }
        return crash;
      };
    }

// Keyboard input
    document.onkeydown = function(e) {
      switch(e.keyCode) {
        case 32: // Space key
          myGamePiece.speedY = -2;
          break;
      }
    };

// Game update function
    function updateGameArea() {
      var x, height, gap, minHeight, maxHeight, minGap, maxGap;
      for (i = 0; i < myObstacles.length; i += 1) {
        if (myGamePiece.crashWith(myObstacles[i])) {
          myGameArea.stop();
          return;
        }
      }
      myGameArea.clear();
      myGameArea.frameNo += 1;
      if (myGameArea.frameNo == 1 || everyinterval(150)) {
        x = myGameArea.canvas.width;
        minHeight = 20;
        maxHeight = 200;
        height = Math.floor(Math.random()*(maxHeight-minHeight+1)+minHeight);
        minGap = 50;
        maxGap = 200;
        gap = Math.floor(Math.random()*(maxGap-minGap+1)+minGap);
        myObstacles.push(new Component(10, height, "green", x, 0));
        myObstacles.push(new Component(10, x - height - gap, "green", x, height + gap));
      }
      for (i = 0; i < myObstacles.length; i += 1) {
        myObstacles[i].x += -1;
        myObstacles[i].update();
      }
      score.text = "SCORE: " + myGameArea.frameNo;
      score.update();
      myGamePiece.newPos();
      myGamePiece.update();
    }

// Utility function to determine interval
    function everyinterval(n) {
      if ((myGameArea.frameNo / n) % 1 == 0) {
        return true;
      }
      return false;
    }
  </script>
</body>
</html>
```

To play, save the above code into an HTML file, open it in a web browser, preferably on a smartphone, and then tap the screen to make the character (yellow rectangle) fly upwards and avoid the obstacles (green rectangles). The score will be shown in the top right corner, and the game will end if the character collides with any obstacle.

Note: This is a simplified version of Flappy Bird and may not contain all the features or aesthetics of the original game, but it should provide a basic playable experience.