A shoot game, where you shoot aliens's game

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

No:12920

151

←

Prev Next

→

A shoot game, where you shoot aliens
Developer User5631｜Date and time 23/8/25 5:17:02
Build time 30.226 sec｜Game capacity 3.98KB｜

Script

Sure! Here's a simple shoot game where you shoot aliens using JavaScript code embedded in a single HTML file. You can play it on a smartphone by tapping on the screen to shoot.

Save the above code in a `.html` file and open it in a browser, or you can copy and paste it into an HTML editor or an online HTML playground to play the game.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

Sure! Here's a simple shoot game where you shoot aliens using JavaScript code embedded in a single HTML file. You can play it on a smartphone by tapping on the screen to shoot.

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Shoot the Aliens!</title>
    <style>
      #game {
        width: 100vw;
        height: 100vh;
        background-color: #000;
        position: relative;
        overflow: hidden;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
      }

.alien {
        width: 50px;
        height: 50px;
        position: absolute;
        background-color: #0f0;
        border-radius: 50%;
        pointer-events: none;
        transition: transform 0.3s ease-in-out;
      }

.bullet {
        width: 5px;
        height: 10px;
        position: absolute;
        background-color: #fff;
        pointer-events: none;
        transition: transform 0.2s linear;
      }

.hidden {
        display: none;
      }
    </style>
  </head>
  <body>
    <div id="game"></div>

function initGame() {
        gameContainer = document.getElementById("game");
        aliens = [];
        bullets = [];

gameContainer.addEventListener("click", shoot);

spawnAlien();
        animateGame();
      }

function spawnAlien() {
        var alien = document.createElement("div");
        alien.className = "alien";
        alien.style.left = getRandomPosition(gameContainer.offsetWidth - 50) + "px";
        alien.style.top = "0";
        gameContainer.appendChild(alien);
        aliens.push(alien);
      }

function shoot(event) {
        var bullet = document.createElement("div");
        bullet.className = "bullet";
        bullet.style.left = event.pageX + "px";
        bullet.style.top = (window.innerHeight - gameContainer.offsetHeight + event.pageY) + "px";
        gameContainer.appendChild(bullet);
        bullets.push(bullet);
      }

function animateGame() {
        var gameLoop = setInterval(function () {
          for (var i = 0; i < aliens.length; i++) {
            var alien = aliens[i];
            alien.style.top = (parseInt(alien.style.top) + 10) + "px";
            if (parseInt(alien.style.top) > window.innerHeight) {
              aliens.splice(i, 1);
              gameContainer.removeChild(alien);
              i--;
            }
          }

for (var j = 0; j < bullets.length; j++) {
            var bullet = bullets[j];
            bullet.style.top = (parseInt(bullet.style.top) - 10) + "px";
            if (parseInt(bullet.style.top) < 0) {
              bullets.splice(j, 1);
              gameContainer.removeChild(bullet);
              j--;
            }

for (var k = 0; k < aliens.length; k++) {
              var alien = aliens[k];
              if (isColliding(bullet, alien)) {
                aliens.splice(k, 1);
                bullets.splice(j, 1);
                gameContainer.removeChild(alien);
                gameContainer.removeChild(bullet);
                k--;
                j--;
                break;
              }
            }
          }

if (aliens.length < 5 && Math.random() < 0.05) {
            spawnAlien();
          }
        }, 30);

function isColliding(el1, el2) {
          var rect1 = el1.getBoundingClientRect();
          var rect2 = el2.getBoundingClientRect();
          return (
            rect1.top < rect2.bottom &&
            rect1.bottom > rect2.top &&
            rect1.left < rect2.right &&
            rect1.right > rect2.left
          );
        }
      }

function getRandomPosition(max) {
        return Math.floor(Math.random() * max);
      }

initGame();
    </script>
  </body>
</html>
```

Save the above code in a `.html` file and open it in a browser, or you can copy and paste it into an HTML editor or an online HTML playground to play the game.