AI game creator

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

No:40438

←

Prev Next

→

Flappy bird
Developer User18111｜Date and time 24/2/2 19:33:41
Build time 17.992 sec｜Game capacity 5.036KB｜

Script

Sure! Here's a simplified implementation of the Flappy Bird game using JavaScript, HTML, and CSS:

Please note that you need to replace the `emozi_all/bird.png`, `emozi_chicken.png`, and `emozi_rabbit.png` files with the actual pictogram images you want to use. Also, you can adjust the game's constants and styles as needed.

←

Prev　Next

→ 　

Back　

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

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 CSS:

```html
<!DOCTYPE html>
<html>
<head>
    <style>
        canvas {
            border: 1px solid black;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>
    <script>
        // Constants
        const  GRAVITY = 0.6;
        const  JUMP_HEIGHT = -10;
        const  OBSTACLE_GAP = 150;
        const  OBSTACLE_SPEED = 2;
        
        // Game variables
        let  score = 0;
        let  gameOver = false;
        
        // Get the canvas element
        const  canvas = document.getElementById('gameCanvas');
        const  ctx = canvas.getContext('2d');
        
        // Set the canvas dimensions
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        
        // Pictogram images for bird and obstacles
        const  birdImg = new Image();
        birdImg.src = 'bird.png';
        
        const  obstacleTopImg = new Image();
        obstacleTopImg.src = 'obstacleTop.png';
        
        const  obstacleBottomImg = new Image();
        obstacleBottomImg.src = 'obstacleBottom.png';
        
        // Bird object
        const  bird = {
            x: 50,
            y: canvas.height / 2 - 10,
            width: 40,
            height: 40,
            velocity: 0,
            
            jump() {
                this.velocity = JUMP_HEIGHT;
            },
            
            update() {
                this.velocity += GRAVITY;
                this.y += this.velocity;
            },
            
            draw() {
                ctx.drawImage(birdImg, this.x, this.y, this.width, this.height);
            }
        };
        
        // Obstacle object
        class Obstacle {
            constructor(x) {
                this.x = x;
                this.height = Math.random() * (canvas.height / 2);
                this.width = 80;
            }
            
            update() {
                this.x -= OBSTACLE_SPEED;
            }
            
            draw() {
                // Draw top obstacle
                ctx.drawImage(obstacleTopImg, this.x, 0, this.width, this.height);
                
                // Draw bottom obstacle
                ctx.drawImage(obstacleBottomImg, this.x, this.height + OBSTACLE_GAP, this.width, canvas.height - (this.height + OBSTACLE_GAP));
            }
        }
        
        // List of obstacles
        const  obstacles = [];
        obstacles.push(new Obstacle(canvas.width));
        
        // Handle keydown event
        document.addEventListener('keydown', function(event) {
            if (event.code === 'Space') {
                bird.jump();
            }
        });
        
        // Game loop
        function  gameLoop() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            bird.update();
            bird.draw();
            
            if (!gameOver) {
                for (let  i = obstacles.length - 1; i >= 0; i--) {
                    obstacles[i].update();
                    obstacles[i].draw();
                    
                    // Check for collision
                    if (bird.x + bird.width > obstacles[i].x && bird.x < obstacles[i].x + obstacles[i].width &&
                        (bird.y < obstacles[i].height || bird.y + bird.height > obstacles[i].height + OBSTACLE_GAP)) {
                        gameOver = true;
                        break;
                    }
                    
                    // Increment score if obstacle passed
                    if (obstacles[i].x + obstacles[i].width < bird.x && !obstacles[i].passed) {
                        obstacles[i].passed = true;
                        score++;
                    }
                    
                    // Remove obstacles that are out of the screen
                    if (obstacles[i].x + obstacles[i].width < 0) {
                        obstacles.splice(i, 1);
                    }
                }
                
                // Add new obstacle
                if (obstacles[obstacles.length - 1].x < canvas.width - canvas.width / 3) {
                    obstacles.push(new Obstacle(canvas.width));
                }
            }
            
            // Display score
            ctx.font = '30px Arial';
            ctx.fillText(`Score: ${score}`, 10, 50);
            
            if (gameOver) {
                ctx.font = '50px Arial';
                ctx.fillText('Game Over', canvas.width / 2 - 110, canvas.height / 2);
            } else {
                requestAnimationFrame(gameLoop);
            }
        }
        
        // Start the game
        gameLoop();
    </script>
</body>
</html>
```

Please note that you need to replace the `bird.png`, `obstacleTop.png`, and `obstacleBottom.png` files with the actual pictogram images you want to use. Also, you can adjust the game's constants and styles as needed.