AI game creator

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

No:25085

133

←

Prev Next

→

Flappy bird
Developer User12174｜Date and time 23/11/17 8:25:27
Build time 86.629 sec｜Game capacity 3.375KB｜

Script

Sure! I can create a simplified version of the classic game Flappy Bird using JavaScript within a single HTML file. Please find the code below:

Please note that in order to make this code work properly, you need to have `emozi_all/bird.png` and `emozi_apple.png` images in the same folder as the HTML file. These images should represent your custom pictograms/icons for the bird and pipe respectively. When you open the HTML file in your smartphone's browser, you can tap on the screen to make the bird jump and navigate through the pipes. Your goal is to avoid collisions and achieve the highest score possible.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

Sure! I can create a simplified version of the classic game Flappy Bird using JavaScript within a single HTML file. Please find the code below:

```html
<!DOCTYPE html>
<html>
<body>
    <canvas id="gameCanvas" width="480" height="320" style="border:1px solid black;"></canvas>

// Pictograms/images for bird and pipe
        var birdImage = new Image();
        birdImage.src = "bird.png";

var pipeImage = new Image();
        pipeImage.src = "pipe.png";

// Bird properties
        var birdX = 50;
        var birdY = canvas.height / 2;
        var birdGravity = 1.5;
        var birdVelocity = 0;
        var birdJump = -15;

// Pipe properties
        var pipeGap = 85;
        var pipeFrequency = 150;
        var pipes = [];
        pipes[0] = {
            x: canvas.width,
            y: 0
        };

// Score property
        var score = 0;

// Game over flag
        var gameOver = false;

// Jump when user presses on the screen
        canvas.addEventListener("touchstart", jump);

// Jump when user presses any key
        document.addEventListener("keydown", jump);

function jump() {
            if (gameOver)
                window.location.reload(); // Restart the game if it's already over

birdVelocity = birdJump;
        }

function draw() {
            // Clear the canvas
            context.clearRect(0, 0, canvas.width, canvas.height);

// Draw bird
            context.drawImage(birdImage, birdX, birdY);

// Draw pipes
            for (var i = 0; i < pipes.length; i++) {
                context.drawImage(pipeImage, pipes[i].x, pipes[i].y);
                pipes[i].x--;

// Check if a collision occurred
                if ((birdX + birdImage.width >= pipes[i].x && birdX <= pipes[i].x + pipeImage.width) &&
                    (birdY <= pipes[i].y + pipeImage.height || birdY + birdImage.height >= pipes[i].y + pipeImage.height + pipeGap) ||
                    birdY + birdImage.height >= canvas.height) {
                    gameOver = true;
                }

// Increment score when pipe is passed
                if (pipes[i].x == 5) {
                    score++;
                }
            }

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

// Bird physics
            birdVelocity += birdGravity;
            birdY += birdVelocity;

// Animation loop
            if (!gameOver)
                requestAnimationFrame(draw);
        }

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

Please note that in order to make this code work properly, you need to have `bird.png` and `pipe.png` images in the same folder as the HTML file. These images should represent your custom pictograms/icons for the bird and pipe respectively.

When you open the HTML file in your smartphone's browser, you can tap on the screen to make the bird jump and navigate through the pipes. Your goal is to avoid collisions and achieve the highest score possible.