Successfully land the plane on the aircraft carrier's game | AI game creator

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

No:18472

61

Successfully land the plane on the aircraft carrie..ALL
Developer User7431｜Date and time 23/9/29 16:06:47
Build time 53.911 sec｜Game capacity 4.966KB｜

In this HTML file, a game is implemented where the objective is to successfully land the plane on the aircraft carrier. The game is designed for smartphone operation. The game uses pictograms for the plane and the aircraft carrier. It starts by creating a canvas element and initializing game variables. Two `Image` objects are created for the plane and the carrier pictograms. The game consists of a `Component` constructor which represents the plane and carrier, and it has a `draw` method to draw the components on the canvas. The `checkCollision` function is used to check if the plane collided with the carrier. The `updateGame` function updates the game state on every frame. It applies gravity to the plane's vertical speed, checks for collision with the carrier, and detects when the plane goes outside the canvas, resulting in a game over condition. The game also handles the space key events to control the plane's movement. When the space key is pressed, the plane's vertical speed is set to a negative value, giving it an upward boost. Releasing the space key sets the plane's vertical speed back to the gravity value, causing it to fall down. The game continuously renders the frames using `requestAnimationFrame` and alerts the player when the plane successfully lands on the carrier or crashes. Note: This implementation assumes that you have the "emozi_rabbit.png" and "emozi_apple.png" images available in the same directory as the HTML file. Please replace those filenames with your own images or modify the code accordingly.

→ 　

0　

0　

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

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

(C)2023 HisashiApp

```html
<!DOCTYPE html>
<html>

<head>
  <title>Aircraft Carrier Landing Game</title>
</head>

<body>
  <canvas id="canvas" width="480" height="320"></canvas>
  <script>
    // Game variables
    var canvas;
    var ctx;
    var plane;
    var carrier;
    var isGameOver;
    var gravity;
    var spacePressed;

// Pictogram images
    var planeImg = new Image();
    planeImg.src = 'plane.png';

var carrierImg = new Image();
    carrierImg.src = 'carrier.png';

// Game initialization
    function startGame() {
      canvas = document.getElementById("canvas");
      ctx = canvas.getContext("2d");
      plane = new Component(50, 50, planeImg, 50, 150);
      carrier = new Component(100, 30, carrierImg, canvas.width - 200, 10);
      isGameOver = false;
      gravity = 0.05;
      spacePressed = false;
      updateGame();
    }

// Component constructor
    function Component(width, height, img, x, y) {
      this.width = width;
      this.height = height;
      this.image = img;
      this.x = x;
      this.y = y;

// Draw the component on the canvas
      this.draw = function () {
        ctx.drawImage(this.image, this.x, this.y, this.width, this.height);
      };
    }

// Check if plane collided with carrier
    function checkCollision(component1, component2) {
      // Calculate the coordinates of the four sides of the components
      var component1Left = component1.x;
      var component1Right = component1.x + component1.width;
      var component1Top = component1.y;
      var component1Bottom = component1.y + component1.height;

var component2Left = component2.x;
      var component2Right = component2.x + component2.width;
      var component2Top = component2.y;
      var component2Bottom = component2.y + component2.height;

// Check for collision
      if (
        component1Bottom >= component2Top &&
        component1Top <= component2Bottom &&
        component1Right >= component2Left &&
        component1Left <= component2Right
      ) {
        return true;
      }
      return false;
    }

// Update the game state
    function updateGame() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

if (!isGameOver) {
        // Apply gravity to the plane's vertical speed
        plane.y += gravity;

// Draw the plane and carrier
        plane.draw();
        carrier.draw();

// Check for collision with the carrier
        if (checkCollision(plane, carrier)) {
          isGameOver = true;
          alert('Congratulations! Plane successfully landed on the carrier!');
        }

// Check for game over condition if plane goes outside the canvas
        if (plane.y + plane.height > canvas.height || plane.y < 0) {
          isGameOver = true;
          alert('Game Over! Plane crashed!');
        }
      }

// Request animation frame for continuous rendering
      requestAnimationFrame(updateGame);
    }

// Handle space key press event
    window.addEventListener('keydown', function (event) {
      if (event.code === 'Space' && !spacePressed) {
        gravity = -0.2;
        spacePressed = true;
      }
    });

// Handle space key release event
    window.addEventListener('keyup', function (event) {
      if (event.code === 'Space') {
        gravity = 0.05;
        spacePressed = false;
      }
    });

// Starting point
    startGame();
  </script>
</body>

</html>
```

In this HTML file, a game is implemented where the objective is to successfully land the plane on the aircraft carrier. The game is designed for smartphone operation.

The game uses pictograms for the plane and the aircraft carrier. It starts by creating a canvas element and initializing game variables. Two `Image` objects are created for the plane and the carrier pictograms. The game consists of a `Component` constructor which represents the plane and carrier, and it has a `draw` method to draw the components on the canvas.

The `checkCollision` function is used to check if the plane collided with the carrier. The `updateGame` function updates the game state on every frame. It applies gravity to the plane's vertical speed, checks for collision with the carrier, and detects when the plane goes outside the canvas, resulting in a game over condition.

The game also handles the space key events to control the plane's movement. When the space key is pressed, the plane's vertical speed is set to a negative value, giving it an upward boost. Releasing the space key sets the plane's vertical speed back to the gravity value, causing it to fall down.

The game continuously renders the frames using `requestAnimationFrame` and alerts the player when the plane successfully lands on the carrier or crashes.

Note: This implementation assumes that you have the "plane.png" and "carrier.png" images available in the same directory as the HTML file. Please replace those filenames with your own images or modify the code accordingly.