Aviator plane game online's game

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

No:11245

←

Prev Next

→

Aviator plane game online
Developer User4861｜Date and time 23/8/9 5:28:23
Build time 42.041 sec｜Game capacity 6.321KB｜

Script

Sure! Here's an example of a simple aviator plane game implemented as a single HTML file using JavaScript, focusing on smartphone operation and utilizing pictograms where possible.

Score: 0

Please note that you will need plane.png and obstacle.png files in the same directory as the HTML file for the game images to load correctly. The game is controlled by dragging your finger horizontally on the screen to move the plane, avoiding colliding with the moving obstacles. The score increases over time, and the game ends when the plane collides with any obstacle. You can restart the game after each game over.

←

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 aviator plane game implemented as a single HTML file using JavaScript, focusing on smartphone operation and utilizing pictograms where possible.

```html
<!DOCTYPE html>
<html>
<head>
    <title>Aviator Plane Game</title>
    <style>
        #game-container {
            width: 100%;
            height: 100vh;
            background: #000;
            position: relative;
            overflow: hidden;
        }
        
        #player {
            width: 50px;
            height: 50px;
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            background-image: url('plane.png');
            background-size: cover;
        }
        
        .obstacle {
            width: 50px;
            height: 50px;
            position: absolute;
            left: 0;
            background-image: url('obstacle.png');
            background-size: cover;
        }
        
        #score {
            color: #fff;
            font-size: 18px;
            position: absolute;
            top: 10px;
            left: 10px;
        }
        
        @keyframes obstacleAnimation {
            0% {
                transform: translateX(100%);
            }
            100% {
                transform: translateX(-100px);
            }
        }        
    </style>
</head>
<body>
    <div id="game-container">
        <div id="player"></div>
        <div id="score">Score: 0</div>
    </div>

// Game settings
        var gameContainer;
        var gameInterval;

// Initialize game
        function init() {
            gameContainer = document.getElementById('game-container');
            player = document.getElementById('player');
            score = document.getElementById('score');

// Start game logic
            gameInterval = setInterval(updateGame, 20);

// Bind touch events for mobile control
            gameContainer.addEventListener('touchstart', startMovePlayer);
            gameContainer.addEventListener('touchend', stopMovePlayer);
        }

// Update game state
        function updateGame() {
            updatePlayerPosition();
            updateObstacles();
            checkCollision();
        }

// Move player based on touch position
        function movePlayer(event) {
            var touchX = event.touches[0].clientX;
            player.style.left = (touchX - (player.offsetWidth / 2)) + 'px';
        }

// Start moving player when touch begins
        function startMovePlayer(event) {
            gameContainer.addEventListener('touchmove', movePlayer);
        }

// Stop moving player when touch ends
        function stopMovePlayer(event) {
            gameContainer.removeEventListener('touchmove', movePlayer);
        }

// Update player position
        function updatePlayerPosition() {
            var containerWidth = gameContainer.offsetWidth;
            var playerX = player.offsetLeft;
            var playerWidth = player.offsetWidth;
            var touchThreshold = 100;
            
            if (playerX + playerWidth/2 < containerWidth/2 - touchThreshold) {
                player.style.left = (playerX + 5) + 'px';
            }
            else if (playerX + playerWidth/2 > containerWidth/2 + touchThreshold) {
                player.style.left = (playerX - 5) + 'px';
            }
        }

// Update obstacles position
        function updateObstacles() {
            for (var i = 0; i < obstacles.length; i++) {
                obstacles[i].style.animationPlayState = 'running';
            }
        }

// Check collision between player and obstacles
        function checkCollision() {
            var playerRect = player.getBoundingClientRect();
            var obstaclesUpdated = document.querySelectorAll('.obstacle');

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

if (playerRect.bottom >= obstacleRect.top &&
                    playerRect.top <= obstacleRect.bottom &&
                    playerRect.right >= obstacleRect.left &&
                    playerRect.left <= obstacleRect.right) {
                    clearInterval(gameInterval);
                    alert('Game Over! Your final score is: ' + getScore());
                    location.reload(); // Restart game
                }
            }
        }

// Increase score
        function increaseScore() {
            score.textContent = 'Score: ' + (parseInt(score.textContent.split(':')[1]) + 1);
        }

// Get current score
        function getScore() {
            return parseInt(score.textContent.split(':')[1]);
        }

// Generate new obstacle
        function generateObstacle() {
            var offset = 100;
            var obstacle = document.createElement('div');
            obstacle.className = 'obstacle';
            obstacle.style.top = Math.floor(Math.random() * (gameContainer.offsetHeight - offset)) + 'px';
            obstacle.style.animationDuration = Math.floor(Math.random() * 5 + 3) + 's';

// Animation end event
            obstacle.addEventListener('animationend', function(event) {
                event.target.remove();
            });

// Add to game container
            gameContainer.appendChild(obstacle);
            obstacles.push(obstacle);
        }

// Start game by calling init function
        init();

// Generate new obstacle every 2 seconds
        setInterval(generateObstacle, 2000);

// Increase score every 500 milliseconds
        setInterval(increaseScore, 500);
    </script>
</body>
</html>
```

Please note that you will need plane.png and obstacle.png files in the same directory as the HTML file for the game images to load correctly.

The game is controlled by dragging your finger horizontally on the screen to move the plane, avoiding colliding with the moving obstacles. The score increases over time, and the game ends when the plane collides with any obstacle. You can restart the game after each game over.