Create a game flappy bird and make it fun's game

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

No:7850

188

←

Prev Next

→

Create a game flappy bird and make it fun
Developer User4085｜Date and time 23/7/10 2:01:54
Build time 14.054 sec｜Game capacity 4.614KB｜

Script

了解しました。以下にフラッピーバードのゲームを実装します。なお、絵文字を使うことができないため、単純な図形で代用します。

このコードでは、プレイヤーがスペースキーを押すと鳥が上に上がるようになっており、鳥が壁に衝突したり、パイプを通過するたびにスコアが増えるようになっています。ゲームが終了すると「Game over!」というアラートが表示され、ページがリロードされます。スマートフォンでもプレイできるように調整しています。

←

Prev　Next

→ 　

Back　

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

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

了解しました。以下にフラッピーバードのゲームを実装します。なお、絵文字を使うことができないため、単純な図形で代用します。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Flappy Bird</title>
    <style>
        canvas {
            background-color: lightblue;
            border: 1px solid black;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="480" height="640"></canvas>

var birdRadius = 20;
            var birdPosX = 50;
            var birdPosY = canvas.height / 2;
            var birdSpeedY = 0;
            var birdGravity = 0.25;

var gapHeight = 150;
            var pipeSpeed = 2;
            var pipeWidth = 80;
            var pipeHeight = 300;
            var pipePosX = canvas.width;
            var pipePosY = 0;

var score = 0;

function drawBird() {
                ctx.beginPath();
                ctx.arc(birdPosX, birdPosY, birdRadius, 0, Math.PI * 2);
                ctx.fillStyle = "yellow";
                ctx.fill();
                ctx.closePath();
            }

function drawPipe() {
                ctx.beginPath();
                ctx.rect(pipePosX, pipePosY, pipeWidth, pipeHeight);
                ctx.fillStyle = "green";
                ctx.fill();
                ctx.closePath();

ctx.beginPath();
                ctx.rect(pipePosX, pipePosY + pipeHeight + gapHeight, pipeWidth, pipeHeight);
                ctx.fillStyle = "green";
                ctx.fill();
                ctx.closePath();
            }

function collisionDetection() {
                if (birdPosY + birdRadius > canvas.height || birdPosY - birdRadius < 0) {
                    endGame();
                }

if (birdPosY + birdRadius > pipePosY && birdPosY - birdRadius < pipePosY + pipeHeight &&
                    birdPosX + birdRadius > pipePosX && birdPosX - birdRadius < pipePosX + pipeWidth) {
                    endGame();
                }

if (birdPosY + birdRadius > pipePosY + pipeHeight + gapHeight && birdPosY - birdRadius < pipePosY + pipeHeight + gapHeight + pipeHeight &&
                    birdPosX + birdRadius > pipePosX && birdPosX - birdRadius < pipePosX + pipeWidth) {
                    endGame();
                }
            }

function drawScore() {
                ctx.font = "16px Arial";
                ctx.fillStyle = "black";
                ctx.fillText("Score: " + score, 20, 20);
            }

function endGame() {
                alert("Game over!");
                window.location.reload();
            }

function update() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);

drawBird();
                drawPipe();
                drawScore();
                collisionDetection();

birdPosY += birdSpeedY;
                birdSpeedY += birdGravity;

pipePosX -= pipeSpeed;

if (pipePosX + pipeWidth < 0) {
                    pipePosX = canvas.width;
                    pipePosY = Math.random() * (canvas.height - pipeHeight - gapHeight);
                    score++;
                }

requestAnimationFrame(update);
            }

document.addEventListener("keydown", function(event) {
                if (event.keyCode === 32) {
                    birdSpeedY = -5;
                }
            });

update();
        };
    </script>
</body>
</html>
```