Ufo floating and shooting airplanes trying to catch it's game

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

No:40187

←

Prev Next

→

Ufo floating and shooting airplanes trying to catc..ALL
Developer User18010｜Date and time 24/2/1 15:34:27
Build time 21.007 sec｜Game capacity 4.753KB｜

Script

Sure! Here's an example of a simple UFO shooting game implemented as a single HTML file using JavaScript. The game can be played on a smartphone and includes pictograms for UFO and airplanes. You can copy the code below and save it as an HTML file to run it in your browser:

To play the game on a smartphone, open the HTML file in a mobile browser, and you can control the UFO's movement using touch gestures. Tapping the screen fires bullets from the UFO to shoot down the airplanes. Avoid colliding with the airplanes, as they are trying to catch the UFO.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }

canvas {
      background-color: black;
      display: block;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas"></canvas>

// Set canvas dimensions
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

// UFO
    const ufo = {
      x: canvas.width / 2,
      y: canvas.height / 2,
      size: 50,
      speed: 8,
      bullets: [],
    };

// Airplanes
    const airplanes = [];
    const airplaneSize = 40;
    const airplaneSpeed = 5;
    const airplaneSpawnInterval = 1500;
    let lastAirplaneSpawn = 0;

// Game loop
    function gameLoop() {
      requestAnimationFrame(gameLoop);
      update();
      draw();
    }

// Update game objects
    function update() {
      // Move UFO
      if (ufo.leftPressed) {
        ufo.x -= ufo.speed;
      } else if (ufo.rightPressed) {
        ufo.x += ufo.speed;
      }

if (ufo.upPressed) {
        ufo.y -= ufo.speed;
      } else if (ufo.downPressed) {
        ufo.y += ufo.speed;
      }

// Keep UFO within canvas bounds
      if (ufo.x < 0) {
        ufo.x = 0;
      } else if (ufo.x + ufo.size > canvas.width) {
        ufo.x = canvas.width - ufo.size;
      }

if (ufo.y < 0) {
        ufo.y = 0;
      } else if (ufo.y + ufo.size > canvas.height) {
        ufo.y = canvas.height - ufo.size;
      }

// Move bullets
      ufo.bullets.forEach((bullet) => {
        bullet.y -= 10;

// Remove bullet if out of canvas
        if (bullet.y < 0) {
          ufo.bullets.splice(ufo.bullets.indexOf(bullet), 1);
        }

// Check collision with airplanes
        airplanes.forEach((airplane) => {
          if (
            bullet.x < airplane.x + airplaneSize &&
            bullet.x + 2 > airplane.x &&
            bullet.y < airplane.y + airplaneSize &&
            bullet.y > airplane.y
          ) {
            airplanes.splice(airplanes.indexOf(airplane), 1);
            ufo.bullets.splice(ufo.bullets.indexOf(bullet), 1);
          }
        });
      });

// Spawn airplanes
      const currentTime = Date.now();
      if (currentTime - lastAirplaneSpawn > airplaneSpawnInterval) {
        airplanes.push({
          x: Math.random() * (canvas.width - airplaneSize),
          y: -airplaneSize,
        });
        lastAirplaneSpawn = currentTime;
      }
    }

// Draw game objects
    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw UFO
      ctx.fillStyle = "white";
      ctx.fillRect(ufo.x, ufo.y, ufo.size, ufo.size);

// Draw bullets
      ufo.bullets.forEach((bullet) => {
        ctx.fillStyle = "red";
        ctx.fillRect(bullet.x, bullet.y, 2, 10);
      });

// Draw airplanes
      ctx.fillStyle = "blue";
      airplanes.forEach((airplane) => {
        ctx.fillRect(airplane.x, airplane.y, airplaneSize, airplaneSize);
      });
    }

// Handle user input
    function handleKeyDown(event) {
      if (event.keyCode === 37) {
        ufo.leftPressed = true;
      } else if (event.keyCode === 39) {
        ufo.rightPressed = true;
      } else if (event.keyCode === 38) {
        ufo.upPressed = true;
      } else if (event.keyCode === 40) {
        ufo.downPressed = true;
      } else if (event.keyCode === 32) {
        const bullet = {
          x: ufo.x + ufo.size / 2,
          y: ufo.y,
        };
        ufo.bullets.push(bullet);
      }
    }

// Event listeners
    document.addEventListener("keydown", handleKeyDown);
    document.addEventListener("keyup", handleKeyUp);

// Start the game loop
    gameLoop();
  </script>
</body>
</html>
```