Make a flappy bird based game with a plane avoiding towers's game

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

No:51925

167

←

Prev Next

→

Make a flappy bird based game with a plane avoidin..ALL
Developer User21725｜Date and time 24/3/17 0:26:22
Build time 8.114 sec｜Game capacity 2.729KB｜

Script

Create a new HTML file and paste this code inside. You can use the provided plane.png image as the airplane pictogram. The game will start automatically, and you can control the airplane by pressing the ArrowUp key to make it go up and avoid the towers. If the airplane collides with a tower, the game will end, and your score will be displayed.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
<title>Plane Avoidance Game</title>
<style>
    #gameContainer {
        width: 400px;
        height: 600px;
        border: 1px solid black;
        position: relative;
    }

#plane {
        width: 50px;
        height: 50px;
        position: absolute;
        top: 50%;
        left: 50px;
        background-image: url('plane.png');
        background-size: cover;
    }

.tower {
        width: 50px;
        height: 100px;
        position: absolute;
        bottom: 0;
        background-color: gray;
    }
</style>
</head>
<body>
<div id="gameContainer">
    <div id="plane"></div>
</div>
<script>
    const plane = document.getElementById('plane');
    let gameInterval;
    let isGameOver = false;

function startGame() {
        let planePosition = 50;
        let towerPosition = 400;
        
        gameInterval = setInterval(() => {
            planePosition += 2;
            plane.style.top = planePosition + 'px';

if (towerPosition > -50) {
                towerPosition -= 2;
            } else {
                towerPosition = 400;
            }

const towers = document.getElementsByClassName('tower');
            for (let i = 0; i < towers.length; i++) {
                towers[i].style.left = towerPosition + i * 200 + 'px';

if (checkCollision(towers[i])) {
                    endGame();
                }
            }
        }, 10);
    }

function checkCollision(tower) {
        const planeRect = plane.getBoundingClientRect();
        const towerRect = tower.getBoundingClientRect();

return (
                planeRect.left < towerRect.left + towerRect.width &&
                planeRect.left + planeRect.width > towerRect.left &&
                planeRect.top < towerRect.top + towerRect.height &&
                planeRect.top + planeRect.height > towerRect.top
        );
    }

function endGame() {
        clearInterval(gameInterval);
        isGameOver = true;
        alert('Game Over! Your score: ' + Math.floor(parseInt(plane.style.top)));
    }

document.addEventListener('keydown', function (event) {
        if (event.key === 'ArrowUp') {
            if (!isGameOver) {
                plane.style.top = parseInt(plane.style.top) - 50 + 'px';
            }
        }
    });

startGame();
</script>
</body>
</html>
```
Create a new HTML file and paste this code inside. You can use the provided plane.png image as the airplane pictogram. The game will start automatically, and you can control the airplane by pressing the ArrowUp key to make it go up and avoid the towers. If the airplane collides with a tower, the game will end, and your score will be displayed.