AI game creator

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

No:13118

←

Prev Next

→

Flappy bird
Developer User5791｜Date and time 23/8/27 2:02:20
Build time 27.122 sec｜Game capacity 3.638KB｜

Script

Bien sûr! Voici un exemple d'implémentation du célèbre jeu Flappy Bird en HTML avec JavaScript :

Ce code HTML utilise un élément canvas pour dessiner le jeu et JavaScript pour la logique du jeu. L'oiseau est représenté par un rectangle, et les tuyaux sont également représentés par des rectangles. Le joueur contrôle l'oiseau en cliquant ou en touchant l'écran pour le faire sauter. Le jeu se termine lorsque l'oiseau entre en collision avec un tuyau, et le score est affiché en haut de l'écran. Après chaque collision, le joueur est invité à rejouer en cliquant sur Ok. Vous pouvez copier ce code dans un fichier HTML et l'ouvrir dans un navigateur pour jouer à Flappy Bird. Amusez-vous bien!

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

Bien sûr! Voici un exemple d'implémentation du célèbre jeu Flappy Bird en HTML avec JavaScript :

<!DOCTYPE html>
<html>
<head>
  <style>
    canvas {
      border:1px solid #000;
      background-color: #f1f1f1;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="600"></canvas>

// Classe Bird
    function Bird() {
      this.x = 50;
      this.y = canvas.height / 2;
      this.width = 50;
      this.height = 50;

this.draw = function() {
        ctx.fillRect(this.x, this.y, this.width, this.height);
      }
    }

// Classe Pipe
    function Pipe(x, y, height) {
      this.x = x;
      this.y = y;
      this.width = 80;
      this.height = height;

this.draw = function() {
        ctx.fillRect(this.x, this.y, this.width, this.height);
      }

this.update = function() {
        this.x -= 2;
      }
    }

// Fonction principale pour mettre à jour le jeu
    function update() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// Mettre à jour et afficher les tuyaux
      for (var i = 0; i < pipes.length; i++) {
        pipes[i].update();
        pipes[i].draw();

// Vérifier la collision entre l'oiseau et les tuyaux
        if (bird.x < pipes[i].x + pipes[i].width &&
            bird.x + bird.width > pipes[i].x &&
            bird.y < pipes[i].y + pipes[i].height &&
            bird.y + bird.height > pipes[i].y) {
          // Collision détectée - fin du jeu
          gameOver();
        }

// Vérifier si le tuyau est passé avec succès par l'oiseau
        if (bird.x > pipes[i].x + pipes[i].width && !pipes[i].scored) {
          pipes[i].scored = true;
          score++;
        }
      }

// Afficher l'oiseau
      bird.draw();

// Mettre à jour le score
      ctx.font = "20px Arial";
      ctx.fillText("Score: " + score, 10, 50);

requestAnimationFrame(update);
    }

// Fonction pour gérer les événements de clic/toucher
    function handleInput() {
      // On ajoute ici la logique pour faire sauter l'oiseau
      bird.y -= 50;
    }

// Fonction pour démarrer le jeu
    function startGame() {
      bird = new Bird();
      pipes = [];
      score = 0;
      pipes.push(new Pipe(canvas.width, 0, Math.random() * canvas.height));
      pipes.push(new Pipe(canvas.width + 200, 0, Math.random() * canvas.height));

// Ajouter l'écouteur d'événements pour les clics/touches
      canvas.addEventListener("click", handleInput);
      canvas.addEventListener("touchstart", handleInput);

update();
    }

// Fonction pour afficher le message de fin de jeu
    function gameOver() {
      alert("Perdu ! Votre score est de " + score);
      // Relancer le jeu
      startGame();
    }

startGame();
  </script>
</body>
</html>

Le jeu se termine lorsque l'oiseau entre en collision avec un tuyau, et le score est affiché en haut de l'écran. Après chaque collision, le joueur est invité à rejouer en cliquant sur Ok.

Vous pouvez copier ce code dans un fichier HTML et l'ouvrir dans un navigateur pour jouer à Flappy Bird. Amusez-vous bien!