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

No:38085

Create visual Aeroplane game
Developer User17213｜Date and time 24/1/22 11:20:25
Build time 15.213 sec｜Game capacity 4.578KB｜

Script

Sure, here's an example of a simple visual aeroplane game implemented as a single HTML file with JavaScript. You can run this code directly in your web browser by saving it as an HTML file and opening it.

Aeroplane Game

This game allows you to control a blue plane using your mouse on the game board. You can move the plane horizontally and shoot bullets by clicking on the game board. Your goal is to shoot down the red enemy planes by colliding your bullets with them. The score is displayed on the page and increases whenever you successfully hit an enemy plane. Note: This is a simple demonstration and can be expanded upon with additional features and improvements.

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Aeroplane Game</title>
    <style>
      #game-board {
        width: 400px;
        height: 400px;
        border: 1px solid black;
        position: relative;
      }
      
      #player-plane {
        width: 40px;
        height: 40px;
        background-color: blue;
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
      }
      
      .enemy-plane {
        width: 30px;
        height: 30px;
        background-color: red;
        position: absolute;
      }
      
      .bullet {
        width: 10px;
        height: 10px;
        background-color: green;
        position: absolute;
      }
    </style>
  </head>
  <body>
    <h1>Aeroplane Game</h1>
    <div id="game-board">
      <div id="player-plane"></div>
    </div>

// Start the game
      function startGame() {
        gameBoard.addEventListener("mousemove", movePlayerPlane);
        gameBoard.addEventListener("click", shootBullet);
        enemyPlaneInterval = setInterval(createEnemyPlane, 1000);
        bulletInterval = setInterval(moveBullets, 20);
      }

// Move the player plane with mouse
      function movePlayerPlane(e) {
        var posX = e.clientX - gameBoard.offsetLeft;
        if (posX >= 0 && posX <= gameBoard.offsetWidth - playerPlane.offsetWidth) {
          playerPlane.style.left = posX + "px";
        }
      }

// Create an enemy plane
      function createEnemyPlane() {
        var enemyPlane = document.createElement("div");
        enemyPlane.className = "enemy-plane";
        enemyPlane.style.left = Math.random() * (gameBoard.offsetWidth - 30) + "px";
        gameBoard.appendChild(enemyPlane);
      }

// Move bullets upwards
      function moveBullets() {
        var bullets = document.getElementsByClassName("bullet");
        for (var i = 0; i < bullets.length; i++) {
          var bullet = bullets[i];
          var bulletTop = parseInt(bullet.style.top);
          bullet.style.top = bulletTop - 5 + "px";

// Check for collisions with enemy planes
          var enemyPlanes = document.getElementsByClassName("enemy-plane");
          for (var j = 0; j < enemyPlanes.length; j++) {
            var enemyPlane = enemyPlanes[j];
            if (isColliding(bullet, enemyPlane)) {
              bullet.remove();
              enemyPlane.remove();
              score += 1;
              updateScore();
            }
          }

// Remove bullets when off the screen
          if (bulletTop < -bullet.offsetHeight) {
            bullet.remove();
          }
        }
      }

// Shoot a bullet
      function shootBullet() {
        var bullet = document.createElement("div");
        bullet.className = "bullet";
        bullet.style.left = (parseInt(playerPlane.style.left) + playerPlane.offsetWidth / 2 - 5) + "px";
        bullet.style.top = gameBoard.offsetHeight - 50 + "px";
        gameBoard.appendChild(bullet);
      }

// Check for 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);
      }

// Update the score
      function updateScore() {
        document.getElementById("score").innerHTML = "Score: " + score;
      }

// Start the game when the page is loaded
      window.onload = function() {
        startGame();
      };
    </script>
  </body>
</html>
```

Note: This is a simple demonstration and can be expanded upon with additional features and improvements.