AI game creator

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

No:50769

137

←

Prev Next

→

Floppy bird
Developer User21399｜Date and time 24/3/9 14:30:26
Build time 6.698 sec｜Game capacity 3.021KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

<html>
<head>
<style>
    canvas {
        background-color: #87CEEB;
        display: block;
        margin: 0 auto;
    }
</style>
</head>
<body>
<script>
     const canvas = document.createElement("canvas");
                const ctx = canvas.getContext("2d");
                document.body.appendChild(canvas);
                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;
        
                let birdX = 70;
                let birdY = 150;
                let gravity = 0.6;
                let speed = 0;
                let obstacle = [];
                let gameOver = false;
        
                class Bird {
                    constructor() {
                        this.bird = new Image();
                        this.bird.src = "https://www.flaticon.com/svg/static/icons/svg/2204/2204191.svg";
                    }
                    drawBird() {
                        ctx.drawImage(this.bird, birdX, birdY, 50, 50);
                    }
                }
        
                let bird = new Bird();
        
                document.addEventListener("keydown", () => {
                    speed = -1.5;
                });
        
                function startGame() {
                    if (gameOver) return;
                    setInterval(() => {
                        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
                        speed += gravity;
                        birdY += speed;
        
                        bird.drawBird();
        
                        if (birdY < 0 || birdY > canvas.height - 50) {
                            gameOver = true;
                            return;
                        }
        
                        if (obstacle.length === 0 || obstacle[obstacle.length - 1].x < canvas.width - 200) {
                            let height = Math.floor(Math.random() * canvas.height);
                            let obs = {
                                x: canvas.width,
                                y: height,
                                width: 80,
                                height: canvas.height - height
                            };
                            obstacle.push(obs);
                        }
        
                        obstacle.forEach((obs) => {
                            ctx.fillStyle = "#006400";
                            ctx.fillRect(obs.x, 0, obs.width, obs.y);
                            ctx.fillRect(obs.x, obs.y + obs.height, obs.width, canvas.height - obs.y - obs.height);
                            obs.x -= 2;
        
                            if (obs.x < birdX + 50 && obs.x + obs.width > birdX && (birdY < obs.y || birdY > obs.y + obs.height)) {
                                gameOver = true;
                                return;
                            }
                        });
                    }, 1000 / 60);
                }
        
                startGame();
</script>
</body>
</html>