Airplane game with nice appearance's game

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

No:23989

←

Prev Next

→

Airplane game with nice appearance
Developer User11235｜Date and time 23/11/5 2:00:56
Build time 88.393 sec｜Game capacity 3.675KB｜

Script

Sure! Here's an example of a simple airplane game implemented as a single HTML file with JavaScript. It uses pictograms for the appearance and can be played on a smartphone.

In this game, an airplane pictogram is displayed on the left side of the screen, and the player controls its movement by tapping on the game container. Obstacles are generated from the right side and move towards the left side. If the airplane collides with any obstacle, the game is over, and an alert message is shown. You can replace the `emozi_himawari.png` with your own pictogram or use any other image file format you prefer. To enhance the appearance further, you can modify the CSS styles and add additional elements and decorations as desired.

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

Sure! Here's an example of a simple airplane game implemented as a single HTML file with JavaScript. It uses pictograms for the appearance and can be played on a smartphone.

```html
<!DOCTYPE html>
<html>
<head>
    <style>
        #game-container {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #ddd;
        }
        
        #airplane {
            position: absolute;
            top: 50%;
            left: 10px;
            transform: translateY(-50%);
        }
        
        .obstacle {
            position: absolute;
            height: 100px;
            width: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <img id="airplane" src="airplane.png" height="50" width="50" alt="Airplane">
    </div>

function createObstacle() {
            var obstacle = document.createElement('div');
            obstacle.className = 'obstacle';
            obstacle.style.top = Math.floor(Math.random() * (gameContainer.offsetHeight - 100)) + 'px';
            obstacle.style.left = gameContainer.offsetWidth + 'px';
            gameContainer.appendChild(obstacle);
            obstacles.push(obstacle);
        }

function moveObstacles() {
            for (var i = obstacles.length - 1; i >= 0; i--) {
                var obstacle = obstacles[i];
                obstacle.style.left = parseInt(obstacle.style.left) - 5 + 'px';

if (parseInt(obstacle.style.left) + 100 < 0) {
                    gameContainer.removeChild(obstacle);
                    obstacles.splice(i, 1);
                }
            }
        }

function checkCollision() {
            var airplaneRect = airplane.getBoundingClientRect();

for (var i = 0; i < obstacles.length; i++) {
                var obstacleRect = obstacles[i].getBoundingClientRect();

if (
                    airplaneRect.left < obstacleRect.right &&
                    airplaneRect.right > obstacleRect.left &&
                    airplaneRect.top < obstacleRect.bottom &&
                    airplaneRect.bottom > obstacleRect.top
                ) {
                    endGame();
                }
            }
        }

function endGame() {
            clearInterval(obstacleInterval);
            alert('Game Over!');
        }

function handleTap() {
            airplane.style.top = (airplane.offsetTop - 25) + 'px';
        }

gameContainer.addEventListener('click', handleTap);

var obstacleInterval = setInterval(function () {
            createObstacle();
        }, 1000);

setInterval(function () {
            moveObstacles();
            checkCollision();
        }, 10);
    </script>
</body>
</html>
```

You can replace the `airplane.png` with your own pictogram or use any other image file format you prefer. To enhance the appearance further, you can modify the CSS styles and add additional elements and decorations as desired.