AI game creator

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

No:43009

174

←

Prev Next

→

Flappy Bird
Developer Bowgray｜Date and time 24/2/13 23:40:46
Build time 14.516 sec｜Game capacity 4.466KB｜

Script

Sure, here's a simplified implementation of the Flappy Bird game using JavaScript, HTML, and pictograms:

Please note that you need to replace the image paths (`emozi_all/bird.png`, `emozi_chicken.png`, `emozi_rabbit.png`) with the actual paths to the corresponding pictogram images on your system. Feel free to modify or enhance the code as per your requirements.

←

Prev　Next

→ 　

Back　

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

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

Sure, here's a simplified implementation of the Flappy Bird game using JavaScript, HTML, and pictograms:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Flappy Bird</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="600"></canvas>

const pipeTopImg = new Image();
        pipeTopImg.src = "pipe-top.png";

const pipeBottomImg = new Image();
        pipeBottomImg.src = "pipe-bottom.png";

// Game variables
        let canvas;
        let canvasContext;
        let birdX = 50;
        let birdY = 300;
        let birdVelocityY = 0;
        let gravity = 0.5;
        let pipes = [];
        let score = 0;
        let gameOver = false;

// Initialize the game
        window.onload = function () {
            canvas = document.getElementById('gameCanvas');
            canvasContext = canvas.getContext('2d');

// Event listener for jumps
            canvas.addEventListener('click', function () {
                if (!gameOver) {
                    birdVelocityY = -10;
                } else {
                    resetGame();
                }
            });

// Create initial set of pipes
            generatePipes();

// Start the game loop
            setInterval(update, 20);
        };

// Reset the game
        function resetGame() {
            birdY = 300;
            birdVelocityY = 0;
            score = 0;
            pipes = [];
            gameOver = false;

generatePipes();
        }

// Generate new set of pipes
        function generatePipes() {
            for (let i = 0; i < 5; i++) {
                let pipeX = canvas.width + i * 200;
                let pipeY = Math.floor(Math.random() * 200) + 200;
                pipes.push({ x: pipeX, y: pipeY });
            }
        }

// Game update loop
        function update() {
            if (!gameOver) {
                // Update bird's position and velocity
                birdY += birdVelocityY;
                birdVelocityY += gravity;

// Clear canvas
                canvasContext.clearRect(0, 0, canvas.width, canvas.height);

// Draw bird
                canvasContext.drawImage(birdImg, birdX, birdY);

// Draw pipes
                for (let i = 0; i < pipes.length; i++) {
                    let pipe = pipes[i];
                    let pipeTopY = pipe.y - 320;

// Collision detection
                    if (
                        (birdX + birdImg.width >= pipe.x && birdX <= pipe.x + pipeTopImg.width && birdY <= pipeTopY + pipeTopImg.height) ||
                        (birdX + birdImg.width >= pipe.x && birdX <= pipe.x + pipeTopImg.width && birdY + birdImg.height >= pipe.y)
                    ) {
                        gameOver = true;
                    }

// Move pipes to the left
                    pipe.x -= 2;

// Draw top pipe
                    canvasContext.drawImage(pipeTopImg, pipe.x, pipeTopY);

// Draw bottom pipe
                    canvasContext.drawImage(pipeBottomImg, pipe.x, pipe.y);

// Increase score if bird passes through the pipes
                    if (pipe.x === birdX - pipeTopImg.width) {
                        score++;
                    }
                }

// Remove pipes that are out of canvas
                if (pipes[0].x + pipeTopImg.width <= 0) {
                    pipes.shift();
                    generatePipes();
                }

// Draw score
                canvasContext.font = "20px Arial";
                canvasContext.fillText("Score: " + score, 10, 30);
                
            } else {
                // Game over message
                canvasContext.font = "30px Arial";
                canvasContext.fillText("Game Over! Tap to play again.", 50, canvas.height / 2);
            }
        }
    </script>
</body>
</html>
```

Please note that you need to replace the image paths (`bird.png`, `pipe-top.png`, `pipe-bottom.png`) with the actual paths to the corresponding pictogram images on your system.

Feel free to modify or enhance the code as per your requirements.