インベーダーゲーム。自機はロケット。レーザーを発射してインベーダーたちを撃ち落とす。's game

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

No:43167

←

Prev Next

→

インベーダーゲーム。自機はロケット。レーザーを発射してインベーダーたちを撃ち落とす。
Developer User19111｜Date and time 24/2/14 15:56:14
Build time 17.742 sec｜Game capacity 4.545KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<!DOCTYPE HTML>
<html>
<head>
  <title>インベーダーゲーム</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #000;
    }
    #game-canvas {
      position: relative;
      width: 100%;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 24px;
    }
    #rocket {
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
      width: 50px;
      height: 50px;
      background-color: #fff;
    }
    .laser-beam {
      position: absolute;
      width: 5px;
      height: 20px;
      background-color: red;
    }
    .invader {
      position: absolute;
      width: 40px;
      height: 40px;
      background-color: green;
    }
  </style>
</head>
<body>
  <div id="game-canvas">
    <div id="rocket"></div>
  </div>
  
  <script>
    // ゲームの設定
    const gameSettings = {
      rocketSpeed: 10,
      laserSpeed: 8,
      invaderSpeed: 2,
      invaderFrequency: 1250
    };
    
    // グローバル変数
    let rocket;
    let lasers = [];
    let invaders = [];
    let score = 0;
    
    // インベーダーを作成する関数
    function createInvader() {
      const invader = document.createElement("div");
      invader.classList.add("invader");
      invader.style.top = "-40px";
      invader.style.left = Math.random() * (window.innerWidth - 40) + "px";
      document.getElementById("game-canvas").appendChild(invader);
      invaders.push(invader);
    }
    
    // レーザーを作成する関数
    function createLaser() {
      const laser = document.createElement("div");
      laser.classList.add("laser-beam");
      laser.style.top = window.innerHeight - 60 + "px";
      laser.style.left = parseInt(rocket.style.left) + 23 + "px";
      document.getElementById("game-canvas").appendChild(laser);
      lasers.push(laser);
    }
    
    // ゲームオーバー処理
    function gameOver() {
      alert("Game Over! Your score: " + score);
      location.reload();
    }
    
    // ゲームループ関数
    function gameLoop() {
      for (let i = 0; i < lasers.length; i++) {
        lasers[i].style.top = parseInt(lasers[i].style.top) - gameSettings.laserSpeed + "px";
        
        // レーザーが上端に達したら削除する
        if (parseInt(lasers[i].style.top) < -20) {
          document.getElementById("game-canvas").removeChild(lasers[i]);
          lasers.splice(i, 1);
          i--;
        }
        
        // インベーダーとの当たり判定
        for (let j = 0; j < invaders.length; j++) {
          if (
            parseInt(lasers[i].style.top) < parseInt(invaders[j].style.top) + 40 &&
            parseInt(lasers[i].style.left) > parseInt(invaders[j].style.left) - 5 &&
            parseInt(lasers[i].style.left) < parseInt(invaders[j].style.left) + 40
          ) {
            document.getElementById("game-canvas").removeChild(lasers[i]);
            lasers.splice(i, 1);
            i--;
            document.getElementById("game-canvas").removeChild(invaders[j]);
            invaders.splice(j, 1);
            score++;
            break;
          }
        }
      }
      
      // インベーダーを下方向に移動させる
      for (let i = 0; i < invaders.length; i++) {
        invaders[i].style.top = parseInt(invaders[i].style.top) + gameSettings.invaderSpeed + "px";
        
        // インベーダーが画面下端に達したらゲームオーバー
        if (parseInt(invaders[i].style.top) > window.innerHeight) {
          gameOver();
        }          
      }
    }
    
    // ゲーム開始
    function startGame() {
      rocket = document.getElementById("rocket");
      document.addEventListener("keydown", function(event) {
        if (event.code === "ArrowLeft" && parseInt(rocket.style.left) > 0) {
          rocket.style.left = parseInt(rocket.style.left) - gameSettings.rocketSpeed + "px";
        } else if (event.code === "ArrowRight" && parseInt(rocket.style.left) < window.innerWidth - 50) {
          rocket.style.left = parseInt(rocket.style.left) + gameSettings.rocketSpeed + "px";
        } else if (event.code === "ArrowUp") {
          createLaser();
        }
      });
      
      setInterval(createInvader, gameSettings.invaderFrequency);
      setInterval(gameLoop, 16);
    }
    
    // ゲーム開始時にstartGame関数を呼び出す
    startGame();
  </script>
</body>
</html>