Make a flappy bird game, with camera following the player's game

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

No:13074

←

Prev Next

→

Make a flappy bird game, with camera following the..ALL
Developer User5768｜Date and time 23/8/26 19:49:14
Build time 35.195 sec｜Game capacity 5.538KB｜

Script

Sure! Here's an example of how you can create a Flappy Bird game using HTML, CSS, and JavaScript, with a camera following the player:

Score: 0

Make sure to save the bird image as `emozi_all/bird.png` in the same directory as the HTML file. This implementation uses HTML and CSS to create the game layout and visual elements, and JavaScript for the game logic. The camera follows the player (bird) as it moves up and down. You can adjust the game container size and tweak other parameters to fit your desired smartphone operation. Note: This code provides a basic implementation of the Flappy Bird game and can be enhanced further with additional features and optimizations.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

Sure! Here's an example of how you can create a Flappy Bird game using HTML, CSS, and JavaScript, with a camera following the player:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Flappy Bird</title>
    <style>
        #game-container {
            overflow: hidden;
            width: 320px;
            height: 480px;
            position: relative;
            border: 1px solid #000;
        }
        #bird {
            width: 50px;
            height: 50px;
            background: url('bird.png') no-repeat center;
            position: absolute;
            left: 50px;
            top: 200px;
        }
        .pipe {
            width: 80px;
            height: 400px;
            position: absolute;
            bottom: 0;
            background-color: green;
        }
        #score {
            position: absolute;
            top: 10px;
            left: 10px;
            font-size: 24px;
            color: white;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="bird"></div>
        <div id="score">Score: 0</div>
    </div>
    
    <script>
        // Game Variables
        var bird;
        var pipes;
        var score;
        var gameInterval;
        var gameSpeed = 2;
        var pipeInterval = 120;
        var scoreText;
        
        // Initialize the game
        function initializeGame() {
            bird = document.getElementById('bird');
            pipes = [];
            score = 0;
            scoreText = document.getElementById('score');
            bird.style.top = '200px';
            
            // Start the game loop
            gameInterval = setInterval(updateGame, 20);
            
            // Event listener for jump action
            document.addEventListener('click', jump);
        }
        
        // Update the game state
        function updateGame() {
            // Move the bird down
            var birdTop = parseInt(bird.style.top);
            bird.style.top = (birdTop + gameSpeed) + 'px';
            
            // Move the pipes
            for (var i = 0; i < pipes.length; i++) {
                pipes[i].style.left = (parseInt(pipes[i].style.left) - gameSpeed) + 'px';
                
                // Check collision with bird
                if (isColliding(bird, pipes[i])) {
                    endGame();
                    return;
                }
                
                // Increase score if pipe passed
                if (parseInt(pipes[i].style.left) < -80 && !pipes[i].scored) {
                    score++;
                    pipes[i].scored = true;
                    scoreText.innerHTML = 'Score: ' + score;
                }
            }
            
            // Generate new pipe
            if (pipes.length === 0 || parseInt(pipes[pipes.length - 1].style.left) < (320 - pipeInterval)) {
                generatePipe();
            }
            
            // Remove pipes out of the game container
            if (pipes.length > 0 && parseInt(pipes[0].style.left) < -80) {
                pipes[0].remove();
                pipes.shift();
            }
        }
        
        // Generate a new pipe
        function generatePipe() {
            var pipeHeight = Math.floor(Math.random() * 250) + 100; // Random height between 100 and 350
            var upperPipe = document.createElement('div');
            upperPipe.className = 'pipe';
            upperPipe.style.height = pipeHeight + 'px';
            gameContainer.appendChild(upperPipe);
            
            var lowerPipe = document.createElement('div');
            lowerPipe.className = 'pipe';
            lowerPipe.style.height = (400 - pipeHeight) + 'px';
            lowerPipe.style.top = 'auto';
            gameContainer.appendChild(lowerPipe);
            
            pipes.push(upperPipe);
            pipes.push(lowerPipe);
            pipes[pipes.length - 1].style.left = '320px';
            pipes[pipes.length - 2].style.left = '320px';
            pipes[pipes.length - 1].scored = false;
            pipes[pipes.length - 2].scored = false;
        }
        
        // Handle jump action
        function jump() {
            var birdTop = parseInt(bird.style.top);
            bird.style.top = (birdTop - 50) + 'px';
        }
        
        // Check collision between two elements
        function isColliding(element1, element2) {
            var rect1 = element1.getBoundingClientRect();
            var rect2 = element2.getBoundingClientRect();
            return !(rect1.right < rect2.left || rect1.left > rect2.right || rect1.bottom < rect2.top || rect1.top > rect2.bottom);
        }
        
        // End the game
        function endGame() {
            clearInterval(gameInterval);
            document.removeEventListener('click', jump);
            alert('Game Over! Your Score: ' + score);
            initializeGame(); // Restart the game
        }
        
        // Start the game
        initializeGame();
    </script>
</body>
</html>
```

Make sure to save the bird image as `bird.png` in the same directory as the HTML file.

This implementation uses HTML and CSS to create the game layout and visual elements, and JavaScript for the game logic. The camera follows the player (bird) as it moves up and down. You can adjust the game container size and tweak other parameters to fit your desired smartphone operation.

Note: This code provides a basic implementation of the Flappy Bird game and can be enhanced further with additional features and optimizations.