AI game creator

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

No:25299

←

Prev Next

→

Flappy bird
Developer User12366｜Date and time 23/11/20 8:43:15
Build time 129.576 sec｜Game capacity 4.464KB｜

Script

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

To play the game, you can open the HTML file in a modern web browser (preferably on a smartphone for a better user experience). Tap or click anywhere on the screen to fly the bird and avoid hitting the obstacles. Your score will increase for each obstacle you pass. If you crash into an obstacle or hit the top or bottom boundary, the game will be over, and you can click to restart. Please note that the provided implementation is a basic representation of Flappy Bird using simple shapes. It does not include advanced features like sound effects or complex graphics, but it should give you a starting point to build upon if desired.

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

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

```html
<!DOCTYPE html>
<html>
<head>
<style>
    canvas {
        border:1px solid #000;
    }
</style>
</head>
<body>
    <canvas id="gameCanvas" width="480" height="320"></canvas>
    <script>
        // Game variables
        var canvas;
        var canvasContext;
        var birdX = 50;
        var birdY = 150;
        var birdSpeedY = 0;
        var gravity = 0.5;
        var obstacleX = 500;
        var obstacleGap = 150;
        var obstacleWidth = 50;
        var obstacleHeight = 300;
        var score = 0;
        var gameOver = false;

// Initialize the game
        function initialize() {
            canvas = document.getElementById('gameCanvas');
            canvasContext = canvas.getContext('2d');
            setInterval(update, 20); // Update the game every 20 milliseconds
            canvas.addEventListener('click', flyBird); // Fly the bird on click
        }

// Update the game state
        function update() {
            moveBird();
            moveObstacle();
            draw();
            checkCollision();
            updateScore();
        }

// Move the bird
        function moveBird() {
            birdY += birdSpeedY;
            birdSpeedY += gravity;
        }

// Fly the bird
        function flyBird() {
            if (!gameOver) {
                birdSpeedY = -10; // Increase the upward velocity of the bird
            } else {
                resetGame();
            }
        }

// Move the obstacle
        function moveObstacle() {
            obstacleX -= 5;
            if (obstacleX + obstacleWidth < 0) {
                obstacleX = canvas.width;
                score++; // Increment the score when the bird passes an obstacle
            }
        }

// Check for collision
        function checkCollision() {
            if (birdY > canvas.height || birdY < 0) {
                gameOver = true; // Bird hits the top or bottom boundary
            }
            if (birdX + 40 > obstacleX && birdX < obstacleX + obstacleWidth &&
                (birdY < obstacleHeight || birdY + 40 > obstacleHeight + obstacleGap)) {
                gameOver = true; // Bird hits the obstacle
            }
        }

// Update the score
        function updateScore() {
            canvasContext.font = "20px Arial";
            canvasContext.fillStyle = "#000";
            canvasContext.fillText("Score: " + score, 10, 30);
        }

// Draw the game objects
        function draw() {
            canvasContext.fillStyle = "#FFF";
            canvasContext.fillRect(0, 0, canvas.width, canvas.height); // Clear the canvas

canvasContext.fillStyle = "#F00"; // Red bird
            canvasContext.fillRect(birdX, birdY, 40, 40); // Draw the bird

canvasContext.fillStyle = "#0F0"; // Green obstacle
            canvasContext.fillRect(obstacleX, 0, obstacleWidth, obstacleHeight); // Draw the upper obstacle
            canvasContext.fillRect(obstacleX, obstacleHeight + obstacleGap, obstacleWidth, canvas.height - obstacleHeight - obstacleGap); // Draw the lower obstacle

if (gameOver) {
                canvasContext.font = "30px Arial";
                canvasContext.fillText("Game Over", canvas.width / 2 - 80, canvas.height / 2);
                canvasContext.fillText("Click to Restart", canvas.width / 2 - 100, canvas.height / 2 + 50);
            }
        }

// Reset the game
        function resetGame() {
            birdY = 150;
            birdSpeedY = 0;
            obstacleX = 500;
            score = 0;
            gameOver = false;
        }

// Start the game when the page loads
        window.onload = initialize;
    </script>
</body>
</html>
```

Please note that the provided implementation is a basic representation of Flappy Bird using simple shapes. It does not include advanced features like sound effects or complex graphics, but it should give you a starting point to build upon if desired.