AI game creator

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

No:31642

←

Prev Next

→

Flappy bird
Developer User10392｜Date and time 23/12/28 1:27:37
Build time 34.536 sec｜Game capacity 5.214KB｜

Script

Sure! Here's a simplified version of Flappy Bird implemented as a single HTML file containing JavaScript. The game can be played on a smartphone and uses pictograms for better visual representation. To play the game, simply open the HTML file in any web browser on your smartphone.

This implementation includes a simple game loop, gravity effect on the bird, scoring system, collision detection, touch/click event handling, and game over functionality. The bird is represented by a red square pictogram, and the obstacles are represented by green rectangles. The score is displayed on the top-left corner of the canvas.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Flappy Bird</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="game-canvas" width="480" height="320"></canvas>
    <script>
        // Flappy Bird game implementation
        // Enclosed in script tags
        
        // Game variables
        var canvas, ctx;
        var bird;
        var obstacles;
        var score;
        var gamePaused;
        
        // Bird class
        class Bird {
            constructor(x, y) {
                this.x = x;
                this.y = y;
            }
            
            draw() {
                // Draw bird pictogram
                ctx.fillStyle = "#FF0000";
                ctx.fillRect(this.x, this.y, 40, 40);
            }
            
            update() {
                // Gravity effect on bird
                this.y += 2;
            }
        }
        
        // Obstacle class
        class Obstacle {
            constructor(x, height) {
                this.x = x;
                this.y = canvas.height - height;
                this.width = 80;
                this.height = height;
                this.passed = false;
            }
            
            draw() {
                // Draw obstacle pictogram
                ctx.fillStyle = "#00FF00";
                ctx.fillRect(this.x, this.y, this.width, this.height);
            }
            
            update() {
                this.x -= 3; // Move obstacles towards the left
                
                // Check collision with bird
                if (bird.x < this.x + this.width &&
                    bird.x + 40 > this.x &&
                    bird.y < this.y + this.height &&
                    40 + bird.y > this.y) {
                    endGame();
                }
                
                // Mark as passed if bird goes beyond the obstacle
                if (bird.x > this.x + this.width && !this.passed) {
                    this.passed = true;
                    score++;
                }
            }
        }
        
        // Initialize game
        function startGame() {
            canvas = document.getElementById("game-canvas");
            ctx = canvas.getContext("2d");
            bird = new Bird(50, canvas.height / 2 - 20);
            obstacles = [];
            score = 0;
            gamePaused = false;
            
            // Generate initial obstacles
            for (var i = 0; i < 3; i++) {
                var height = Math.floor(Math.random() * (canvas.height / 2 - 20)) + 20;
                obstacles.push(new Obstacle(canvas.width * (i + 1), height));
            }
            
            // Register event listener for touch/click to make bird flap
            canvas.addEventListener("touchstart", function() {
                bird.y -= 50; // Flap bird
            });
            
            setTimeout(gameLoop, 16); // Start game loop
        }
        
        // Game loop
        function gameLoop() {
            if (!gamePaused) {
                updateGame();
                drawGame();
                requestAnimationFrame(gameLoop);
            }
        }
        
        // Update game state
        function updateGame() {
            bird.update();
            
            // Generate new obstacle if needed
            if (obstacles.length < 3 &&
                obstacles[obstacles.length - 1].x < canvas.width - 200) {
                var height = Math.floor(Math.random() * (canvas.height / 2 - 20)) + 20;
                obstacles.push(new Obstacle(canvas.width, height));
            }
            
            // Move and update each obstacle
            obstacles.forEach(obstacle => {
                obstacle.update();
            });
        }
        
        // Draw current game state
        function drawGame() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            // Draw bird
            bird.draw();
            
            // Draw obstacles
            obstacles.forEach(obstacle => {
                obstacle.draw();
            });
            
            // Draw score
            ctx.fillStyle = "#000000";
            ctx.font = "20px Arial";
            ctx.fillText("Score: " + score, 10, 30);
        }
        
        // End game
        function endGame() {
            gamePaused = true;
            alert("Game Over! Score: " + score);
            startGame();
        }
        
        // Start game initially
        startGame();
    </script>
</body>
</html>
```