AI game creator

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

No:27678

←

Prev Next

→

Flappy bird
Developer User13750｜Date and time 23/12/8 5:33:50
Build time 18.77 sec｜Game capacity 3.086KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Flappy Bird</title>
    <style>
        canvas {
            background-color: #a8d0e6;
            display: block;
            margin: 20px auto;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="480" height="320"></canvas>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var canvas = document.getElementById("gameCanvas");
            var context = canvas.getContext("2d");

// Ressources graphiques
            var backgroundImg = new Image();
            backgroundImg.src = "background.png";

var birdImg = new Image();
            birdImg.src = "bird.png";

var pipeNorthImg = new Image();
            pipeNorthImg.src = "pipeNorth.png";

var pipeSouthImg = new Image();
            pipeSouthImg.src = "pipeSouth.png";

// Variables du jeu
            var bird = {
                x: 80,
                y: canvas.height/2
            };

var gravity = 0.25;
            var velocity = 0;

var pipes = [];
            pipes[0] = {
                x: canvas.width,
                y: 0
            };

var score = 0;

// Contrôle du jeu (appui sur l'écran)
            canvas.addEventListener("touchstart", function() {
                velocity = -7;
            });

// Boucle de jeu
            function draw() {
                context.drawImage(backgroundImg, 0, 0);

for(var i = 0; i < pipes.length; i++) {
                    context.drawImage(pipeNorthImg, pipes[i].x, pipes[i].y);
                    context.drawImage(pipeSouthImg, pipes[i].x, pipes[i].y + pipeNorthImg.height + 85);

pipes[i].x--;

if (pipes[i].x === 100) {
                        pipes.push({
                            x: canvas.width,
                            y: Math.floor(Math.random() * pipeNorthImg.height) - pipeNorthImg.height
                        });
                    }

// Collision avec les tuyaux
                    if (bird.x + birdImg.width >= pipes[i].x && bird.x <= pipes[i].x + pipeNorthImg.width && (bird.y <= pipes[i].y + pipeNorthImg.height || bird.y + birdImg.height >= pipes[i].y + pipeNorthImg.height + 85) || bird.y + birdImg.height >= canvas.height) {
                        location.reload(); // Redémarrer le jeu
                    }

// Calcul du score
                    if(pipes[i].x === 5) {
                        score++;
                    }
                }

context.drawImage(birdImg, bird.x, bird.y);

velocity += gravity;
                bird.y += velocity;

// Affichage du score
                context.fillStyle = "#000";
                context.font = "20px Verdana";
                context.fillText("Score : " + score, 10, canvas.height - 20);

requestAnimationFrame(draw);
            }

draw();
        });
    </script>
</body>
</html>