AI game creator

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

No:51574

109

←

Prev Next

→

Flappy bird
Developer Winnerweiner2113｜Date and time 24/3/13 10:21:42
Build time 6.953 sec｜Game capacity 2.26KB｜

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 Game</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="320" height="480"></canvas>
    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');

let birdX = 50;
        let birdY = 200;
        let gravity = 1;
        let velocity = 0;
        let obstacleX = 320;
        let holeHeight = 100;
        let holePosition = Math.floor(Math.random() * 380) + 50;
        let score = 0;

function drawBird() {
            ctx.fillStyle = 'yellow';
            ctx.fillRect(birdX, birdY, 20, 20);
        }

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

function drawObstacle() {
            ctx.fillStyle = 'green';
            ctx.fillRect(obstacleX, 0, 50, holePosition);
            ctx.fillRect(obstacleX, holePosition + holeHeight, 50, canvas.height - holePosition - holeHeight);
        }

function updateScore() {
            ctx.fillStyle = 'black';
            ctx.font = '20px Arial';
            ctx.fillText(`Score: ${score}`, 10, 30);
        }

function gameLoop() {
            clearCanvas();

drawBird();

birdY += velocity;
            velocity += gravity;

drawObstacle();
            obstacleX -= 2;

if (obstacleX < -50) {
                obstacleX = 320;
                holePosition = Math.floor(Math.random() * 380) + 50;
                score++;
            }

checkCollision();
            updateScore();
        }

setInterval(gameLoop, 20);

document.addEventListener('keydown', function() {
            velocity = -10;
        });
    </script>
</body>
</html>