AI game creator

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

No:16239

137

←

Prev Next

→

Flappy bird
Developer User6842｜Date and time 23/9/16 20:41:20
Build time 41.342 sec｜Game capacity 5.308KB｜

Script

Bien sûr! Voici un exemple de code JavaScript pour le jeu Flappy Bird, que vous pouvez intégrer dans une balise script dans un fichier HTML :

Score: 0

Remplacez simplement "emozi_all/bird.png" par le chemin d'accès à l'image du bird que vous souhaitez utiliser. Assurez-vous de placer cette image dans le même répertoire que votre fichier HTML, ou de spécifier le chemin d'accès correct. Ceci est une version simplifiée du jeu Flappy Bird, mais elle comprend le mouvement du bird, la génération aléatoire des tuyaux, le défilement des tuyaux, la vérification des collisions et la fin du jeu. Vous pouvez personnaliser et améliorer davantage ce code pour le rendre plus complexe si vous le souhaitez. J'espère que cela vous aide à créer votre jeu Flappy Bird en utilisant JavaScript dans une seule page HTML !

←

Prev　Next

→ 　

Back　

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

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

Bien sûr! Voici un exemple de code JavaScript pour le jeu Flappy Bird, que vous pouvez intégrer dans une balise script dans un fichier HTML :

```html
<!DOCTYPE html>
<html>
<head>
    <title>Flappy Bird</title>
    <style>
        #game {
            position: relative;
            width: 320px;
            height: 480px;
            border: 1px solid black;
            overflow: hidden;
        }
        
        #bird {
            position: absolute;
            left: 50px;
            top: 200px;
            width: 40px;
            height: 40px;
            background: url(path/to/bird-image.png) center center no-repeat;
            background-size: cover;
        }
        
        .pipe {
            position: absolute;
            width: 80px;
            bottom: 0;
            background: green;
            border-radius: 20px;
        }
        
        #score {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 24px;
            color: black;
        }
    </style>
</head>
<body>
    <div id="game">
        <div id="bird"></div>
        <div id="score">Score: 0</div>
    </div>

// Fonction pour générer les tuyaux
        function generatePipe() {
            var pipeHeight = Math.floor(Math.random() * 300) + 50; // Hauteur aléatoire du tuyau
            var pipe = document.createElement("div");
            pipe.className = "pipe";
            pipe.style.height = pipeHeight + "px";
            pipe.style.left = game.offsetWidth + "px";
            game.appendChild(pipe);

pipes.push(pipe);
        }

// Fonction de mouvement du bird
        function moveBirdUp() {
            bird.style.top = (bird.offsetTop - 50) + "px";
        }

// Fonction de mise à jour des positions des tuyaux et du score
        function updateGame() {
            if (!isGameOver) {
                // Mise à jour des positions des tuyaux
                for (var i = 0; i < pipes.length; i++) {
                    pipes[i].style.left = (pipes[i].offsetLeft - 5) + "px";

// Vérification de la collision avec le bird
                    if (collisionCheck(pipes[i])) {
                        gameOver();
                        return;
                    }
                    
                    // Vérification si le bird a passé un tuyau avec succès
                    if (pipes[i].offsetLeft + pipes[i].offsetWidth < bird.offsetLeft && !pipes[i].passed) {
                        pipes[i].passed = true;
                        score++;
                        scoreElement.innerHTML = "Score: " + score;
                    }
                    
                    // Suppression des tuyaux sortis de l'écran
                    if (pipes[i].offsetLeft + pipes[i].offsetWidth < 0) {
                        pipes[i].remove();
                        pipes.splice(i, 1);
                        i--;
                    }
                }

// Vérification si le bird a touché le sol
                if (bird.offsetTop + bird.offsetHeight >= game.offsetHeight) {
                    gameOver();
                    return;
                }

requestAnimationFrame(updateGame);
            }
        }

// Fonction de vérification de collision
        function collisionCheck(pipe) {
            var birdRect = bird.getBoundingClientRect();
            var pipeRect = pipe.getBoundingClientRect();
            return (
                birdRect.left < pipeRect.left + pipeRect.width &&
                birdRect.left + birdRect.width > pipeRect.left &&
                birdRect.top < pipeRect.top + pipeRect.height &&
                birdRect.top + birdRect.height > pipeRect.top
            );
        }

// Fonction pour mettre fin au jeu
        function gameOver() {
            isGameOver = true;
            alert("Game Over! Votre score est: " + score);
        }

// Écouteur d'événement pour le mouvement du bird
        window.addEventListener("keydown", function(event) {
            if (event.keyCode === 32) {
                moveBirdUp();
            }
        });

// Génération initiale des tuyaux
        generatePipe();

// Lancement du jeu
        updateGame();
    </script>
</body>
</html>
```

Remplacez simplement "path/to/bird-image.png" par le chemin d'accès à l'image du bird que vous souhaitez utiliser. Assurez-vous de placer cette image dans le même répertoire que votre fichier HTML, ou de spécifier le chemin d'accès correct.

Ceci est une version simplifiée du jeu Flappy Bird, mais elle comprend le mouvement du bird, la génération aléatoire des tuyaux, le défilement des tuyaux, la vérification des collisions et la fin du jeu. Vous pouvez personnaliser et améliorer davantage ce code pour le rendre plus complexe si vous le souhaitez.

J'espère que cela vous aide à créer votre jeu Flappy Bird en utilisant JavaScript dans une seule page HTML !