AI game creator

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

No:41085

←

Prev Next

→

Flappy bird
Developer User18448｜Date and time 24/2/5 23:07:31
Build time 17.347 sec｜Game capacity 4.484KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<!DOCTYPE html>
<html>
<head>
  <style>
    canvas {
        border: 1px solid black;
        background: lightblue;
        display: block;
        margin: 0 auto;
        padding: 0;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas"></canvas>
  <script>
    document.addEventListener('DOMContentLoaded', function () {

// Getting the game canvas and its 2D rendering context
        var canvas = document.getElementById("gameCanvas");
        var ctx = canvas.getContext("2d");

// Setting up the canvas dimensions
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

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

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

// Game variables
        var score = 0;
        var birdX = canvas.width / 4;
        var birdY = canvas.height / 2;
        var birdRadius = 20;
        var gravity = 2;
        var jumpForce = 25;
        var pipeWidth = 100;
        var gapSize = 200;
        var pipeGap = 300;
        var pipes = [];
        var gameInterval;

// Event listener for jump on key press
        document.addEventListener('keydown', function (event) {
            if (event.keyCode === 32 || event.keyCode === 38) {
                jump();
            }
        });

// Event listener for jump on touch/click
        document.addEventListener('click', function () {
            jump();
        });

// Function to handle bird jump
        function jump() {
            birdY -= jumpForce;
        }

// Function to draw the bird
        function drawBird(x, y) {
            ctx.drawImage(birdImage, x - birdRadius, y - birdRadius, birdRadius * 2, birdRadius * 2);
        }

// Function to draw the pipes
        function drawPipes() {
            for (var i = 0; i < pipes.length; i++) {
                var pipeX = pipes[i].x;
                var upperPipeY = pipes[i].y;
                var lowerPipeY = pipes[i].y + pipeGap;

// Drawing upper pipe
                ctx.drawImage(pipeImage, pipeX, upperPipeY, pipeWidth, canvas.height);

// Drawing lower pipe
                ctx.drawImage(pipeImage, pipeX, lowerPipeY, pipeWidth, canvas.height - lowerPipeY + pipeGap);

// Updating pipe x position
                pipes[i].x -= 3;

// Checking collision with bird
                if (birdX + birdRadius >= pipeX && birdX - birdRadius <= pipeX + pipeWidth) {
                    if (birdY - birdRadius <= upperPipeY || birdY + birdRadius >= lowerPipeY) {
                        endGame();
                    }
                }

// Checking if bird passed the pipes
                if (birdX === pipeX + pipeWidth) {
                    score++;
                }

// Removing pipe if it goes off the screen
                if (pipeX + pipeWidth < 0) {
                    pipes.splice(i, 1);
                    i--;
                }
            }
        }

// Function to generate a new pipe
        function generatePipe() {
            var randomY = Math.floor(Math.random() * (canvas.height - pipeGap));
            pipes.push({ x: canvas.width, y: randomY });
        }

// Function to draw the score
        function drawScore() {
            ctx.font = "30px Arial";
            ctx.fillStyle = "black";
            ctx.fillText("Score: " + score, 20, 40);
        }

// Function to end the game
        function endGame() {
            clearInterval(gameInterval);
            alert("Game Over! Your final score is: " + score);
            resetGame();
        }

// Function to reset the game
        function resetGame() {
            score = 0;
            birdY = canvas.height / 2;
            pipes = [];
        }

// Game loop
        function gameLoop() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawBird(birdX, birdY);
            drawPipes();
            drawScore();

// Bird movement
            birdY += gravity;

// Generating new pipes
            if (pipes.length === 0 || pipes[pipes.length - 1].x + pipeGap < canvas.width) {
                generatePipe();
            }
        }

// Starting the game
        gameInterval = setInterval(gameLoop, 20);

});
  </script>
</body>
</html>