AI game creator

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

No:15690

103

←

Prev Next

→

Flappy bird
Developer User6827｜Date and time 23/9/10 20:46:07
Build time 30.578 sec｜Game capacity 4.224KB｜

Script

Sure! Here's a simplified version of the Flappy Bird game implemented as a single HTML file with JavaScript. The game can be played on a smartphone.

Please note that the base64-encoded images (bird.png and pipe.png) need to be replaced with actual image data for the game to work properly.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's a simplified version of the Flappy Bird game implemented as a single HTML file with JavaScript. The game can be played on a smartphone.

```html
<!DOCTYPE html>
<html>
<head>
    <style>
        canvas {
            border: 1px solid black;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="560"></canvas>

// Pictograms as base64-encoded PNG images
        var birdImg = "data:image/png;base64,iVBORw0KGg...."; // Base64 of bird.png
        var pipeImg = "data:image/png;base64,iVBORw0KGg...."; // Base64 of pipe.png

// Bird class
        class Bird {
            constructor(x, y, image) {
                this.x = x;
                this.y = y;
                this.width = 40;
                this.height = 30;
                this.speedY = 0;
                this.image = new Image();
                this.image.src = image;
            }

update() {
                this.speedY += gravity;
                this.y += this.speedY;
            }

jump() {
                this.speedY = -jumpStrength;
            }

draw() {
                ctx.drawImage(this.image, this.x, this.y, this.width, this.height);
            }
        }

// Pipe class
        class Pipe {
            constructor(x, y, image) {
                this.x = x;
                this.y = y;
                this.width = 80;
                this.height = 400;
                this.image = new Image();
                this.image.src = image;
            }

update() {
                this.x -= 2;
            }

draw() {
                ctx.drawImage(this.image, this.x, this.y, this.width, this.height);
            }
        }

function startGame() {
            canvas = document.getElementById("gameCanvas");
            ctx = canvas.getContext("2d");

bird = new Bird(50, canvas.height / 2 - 15, birdImg);
            pipes = [];

if (gameInterval) clearInterval(gameInterval);
            gameInterval = setInterval(updateGame, 16);

document.addEventListener("keydown", jump);
            document.addEventListener("touchstart", jump);
        }

function updateGame() {
            clearCanvas();
            bird.update();
            bird.draw();

if (pipes.length === 0 || pipes[pipes.length - 1].x < 200) {
                pipes.push(new Pipe(canvas.width, getRandomHeight(), pipeImg));
            }

for (var i = 0; i < pipes.length; i++) {
                var pipe = pipes[i];
                pipe.update();
                pipe.draw();

if (detectCollision(bird, pipe)) {
                    clearInterval(gameInterval);
                    alert("Game Over! Score: " + score);
                    startGame();
                    return;
                }

if (pipe.x < -pipe.width) {
                    pipes.splice(i, 1);
                    i--;
                    score++;
                }
            }

ctx.font = "24px Arial";
            ctx.fillText("Score: " + score, 10, 30);
        }

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

function jump() {
            bird.jump();
        }

function detectCollision(object1, object2) {
            return (
                object1.x < object2.x + object2.width &&
                object1.x + object1.width > object2.x &&
                object1.y < object2.y + object2.height &&
                object1.y + object1.height > object2.y
            );
        }

function getRandomHeight() {
            return Math.floor((Math.random() * 200) + 100);
        }

// Start the game
        startGame();
    </script>
</body>
</html>
```

Please note that the base64-encoded images (bird.png and pipe.png) need to be replaced with actual image data for the game to work properly.