Fly through space shooting aliens's game

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

No:41046

←

Prev Next

→

Fly through space shooting aliens
Developer User17371｜Date and time 24/2/5 12:17:00
Build time 18.428 sec｜Game capacity 5.611KB｜

Script

Sure! Here's an example of a simple game where you can fly through space shooting aliens. This game is implemented as a single HTML file, using JavaScript and enclosed in script tags. You can play it as a finished game:

To play the game, simply open the HTML file in a web browser, and you can control the player's movement by touching and dragging it. Tap on the screen to shoot projectiles and try to hit the aliens. The score will be displayed in the top right corner of the screen. Have fun flying through space and shooting aliens!

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    html, body {
      margin: 0;
      padding: 0;
    }
    
    #game-container {
      position: relative;
      width: 100%;
      height: 100vh;
      overflow: hidden;
    }
    
    #player {
      position: absolute;
      width: 50px;
      height: 50px;
      background-color: green;
    }
    
    .projectile {
      position: absolute;
      width: 10px;
      height: 10px;
      background-color: red;
    }
    
    .alien {
      position: absolute;
      width: 50px;
      height: 50px;
      background-color: blue;
    }
  </style>
</head>
<body>
  <div id="game-container">
    <div id="player"></div>
  </div>
  
  <script>
    // Game configuration
    const gameContainer = document.getElementById("game-container");
    const player = document.getElementById("player");
    const projectileSpeed = 5;
    const alienSpeed = 2;
    const alienSpawnInterval = 2000;
    
    // Game variables
    let playerX = gameContainer.clientWidth / 2;
    let projectiles = [];
    let aliens = [];
    let score = 0;
    
    // Function to handle player movement
    function handlePlayerMove(event) {
      playerX = event.touches[0].clientX - player.offsetWidth / 2;
      if (playerX < 0) playerX = 0;
      if (playerX > gameContainer.clientWidth - player.offsetWidth) playerX = gameContainer.clientWidth - player.offsetWidth;
      player.style.left = playerX + "px";
    }
    
    // Function to handle shooting projectiles
    function shootProjectile() {
      const projectile = document.createElement("div");
      projectile.classList.add("projectile");
      projectile.style.left = playerX + player.offsetWidth / 2 - 5 + "px";
      gameContainer.appendChild(projectile);
      projectiles.push(projectile);
    }
    
    // Function to move projectiles
    function moveProjectiles() {
      for (let i = 0; i < projectiles.length; i++) {
        const projectile = projectiles[i];
        projectile.style.top = parseInt(projectile.style.top) - projectileSpeed + "px";
        
        if (parseInt(projectile.style.top) < 0) {
          projectiles.splice(i, 1);
          gameContainer.removeChild(projectile);
          i--;
        }
      }
    }
    
    // Function to spawn aliens
    function spawnAlien() {
      const alien = document.createElement("div");
      alien.classList.add("alien");
      alien.style.left = Math.random() * (gameContainer.clientWidth - 50) + "px";
      gameContainer.appendChild(alien);
      aliens.push(alien);
    }
    
    // Function to move aliens
    function moveAliens() {
      for (let i = 0; i < aliens.length; i++) {
        const alien = aliens[i];
        alien.style.top = parseInt(alien.style.top) + alienSpeed + "px";
        
        if (parseInt(alien.style.top) > gameContainer.clientHeight) {
          aliens.splice(i, 1);
          gameContainer.removeChild(alien);
          i--;
        }
      }
    }
    
    // Function to handle collisions between projectiles and aliens
    function checkCollisions() {
      for (let i = 0; i < projectiles.length; i++) {
        const projectile = projectiles[i];
        
        for (let j = 0; j < aliens.length; j++) {
          const alien = aliens[j];
          
          if (isColliding(projectile, alien)) {
            projectiles.splice(i, 1);
            aliens.splice(j, 1);
            gameContainer.removeChild(projectile);
            gameContainer.removeChild(alien);
            i--;
            j--;
            score++;
          }
        }
      }
    }
    
    // Helper function to check collision between two elements
    function isColliding(elem1, elem2) {
      const rect1 = elem1.getBoundingClientRect();
      const rect2 = elem2.getBoundingClientRect();
      
      return !(rect1.right < rect2.left || 
               rect1.left > rect2.right || 
               rect1.bottom < rect2.top || 
               rect1.top > rect2.bottom);
    }
    
    // Function to update the game state
    function update() {
      moveProjectiles();
      moveAliens();
      checkCollisions();
    }
    
    // Start the game loop
    setInterval(update, 1000 / 60);
    setInterval(spawnAlien, alienSpawnInterval);
    
    // Bind touch events for player movement
    gameContainer.addEventListener("touchmove", handlePlayerMove);
    gameContainer.addEventListener("touchstart", shootProjectile);
    
    // Display the score
    const scoreContainer = document.createElement("div");
    scoreContainer.style.position = "fixed";
    scoreContainer.style.top = "10px";
    scoreContainer.style.right = "10px";
    scoreContainer.style.color = "white";
    scoreContainer.style.fontFamily = "Arial";
    scoreContainer.style.fontSize = "24px";
    scoreContainer.innerHTML = "Score: 0";
    document.body.appendChild(scoreContainer);
    
    // Update the score
    function updateScore() {
      scoreContainer.innerHTML = "Score: " + score;
    }
    
    // Update the score every second
    setInterval(updateScore, 1000);
  </script>
</body>
</html>
```