AI game creator

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

No:17246

123

←

Prev Next

→

Flappy bird
Developer User7620｜Date and time 23/9/22 23:13:59
Build time 47.205 sec｜Game capacity 3.499KB｜

Script

Als Programmierer werde ich versuchen, das Spiel Flappy Bird in einer einzelnen HTML-Datei mit JavaScript umzusetzen. Hier ist der Code:

Dieser Code implementiert eine einfachere Version von Flappy Bird in einer einzigen HTML-Datei. Starte einfach das Programm in einem Browser und du kannst das Spiel auf dem Smartphone spielen. Viel Spaß!

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

Als Programmierer werde ich versuchen, das Spiel Flappy Bird in einer einzelnen HTML-Datei mit JavaScript umzusetzen. Hier ist der Code:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Flappy Bird</title>
  <style>
    canvas {
      background: #70c5ce;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="480" height="320"></canvas>
  <script>
    // Variablen
    var canvas, ctx;
    var birdX, birdY;
    var gravity, velocity;
    var gapHeight, gapPosition;
    var score;

// Spielinitialisierung
    function init() {
      canvas = document.getElementById("gameCanvas");
      ctx = canvas.getContext("2d");

birdX = 50;
      birdY = canvas.height / 2;
      gravity = 1.5;
      velocity = 0;
      gapHeight = 80;
      gapPosition = canvas.width;
      score = 0;

// Event Listener hinzufügen
      canvas.addEventListener("click", flapWings);

// Spielschleife starten
      requestAnimationFrame(update);
    }

// Vogel flattert mit jedem Klick nach oben
    function flapWings() {
      velocity = -15;
    }

// Aktualisierung der Spiellogik und Zeichnung des Spiels
    function update() {
      // Canvas löschen
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// Vogelbewegung
      velocity += gravity;
      birdY += velocity;

// Hindernisbewegung
      gapPosition -= 5;

// Vogel zeichnen
      drawBird();

// Hindernisse zeichnen und auf Kollision prüfen
      if (drawObstacles()) {
        // Kollision - Spiel vorbei
        gameOver();
        return;
      }

// Punkte zählen und anzeigen
      if (birdX > gapPosition + 50) {
        score++;
        gapPosition = canvas.width;
      }
      drawScore();

// Spielschleife erneut aufrufen
      requestAnimationFrame(update);
    }

// Vogel zeichnen
    function drawBird() {
      ctx.fillStyle = "#ffcc00";
      ctx.fillRect(birdX, birdY, 40, 30);
    }

// Hindernisse zeichnen und auf Kollision prüfen
    function drawObstacles() {
      ctx.fillStyle = "#008000"; // Hindernisfarbe

// Obstacle 1
      var obstacle1X = gapPosition;
      var obstacle1Height = canvas.height - gapHeight;
      ctx.fillRect(obstacle1X, 0, 50, obstacle1Height);
      ctx.fillRect(obstacle1X, obstacle1Height + gapHeight, 50, canvas.height - obstacle1Height - gapHeight);

// Prüfen, ob Vogel mit Hindernis kollidiert
      if (
        birdX + 40 >= obstacle1X &&
        birdX <= obstacle1X + 50 &&
        (birdY <= obstacle1Height || birdY + 30 >= obstacle1Height + gapHeight)
      ) {
        return true;
      }

return false;
    }

// Spiel vorbei
    function gameOver() {
      // Event Listener entfernen
      canvas.removeEventListener("click", flapWings);

// Spiel vorbei anzeigen
      ctx.fillStyle = "#000000";
      ctx.fillText("Spiel vorbei!", canvas.width / 2 - 50, canvas.height / 2);

// Punktzahl anzeigen
      ctx.fillText("Punktzahl: " + score, canvas.width / 2 - 40, canvas.height / 2 + 40);
    }

// Punktzahl anzeigen
    function drawScore() {
      ctx.fillStyle = "#000000";
      ctx.fillText("Punkte: " + score, 10, 20);
    }

// Spiel starten
    init();
  </script>
</body>
</html>
```