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

No:99

283

←

Prev Next

→

Shooting down missiles game
Developer User1851｜Date and time 23/5/15 22:28:57
Build time 91.214 sec｜Game capacity 4.18KB｜

Script

Missile Defense game

SCORE: 0

How to play Use the left and right arrow keys to move the player and、The game is to shoot down red missiles. The game is over when the player is hit by a missile. 10 missiles must be shot down to clear the game. Emojis are not used in the game.、The simple UI makes it easy to operate on a smartphone.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>ミサイル防衛ゲーム</title>
  </head>
  <body>
    <h1>ミサイル防衛ゲーム</h1>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    
    <script>
      // ゲームオブジェクトの定義
      let player;
      let missiles = [];
      let score = 0;
      
      // ゲームの初期化
      function init() {
        player = {
          x: 200,
          y: 350,
          radius: 20,
          color: "purple"
        }
        missiles = [];
        score = 0;
        updateScore();
      }
      
      // ゲームスタート
      init();
      
      // 描画関数
      function draw() {
        const canvas = document.getElementById("gameCanvas");
        const ctx = canvas.getContext("2d");
        
        // 背景を描画
        ctx.fillStyle = "lightblue";
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        
        // プレイヤーを描画
        ctx.fillStyle = player.color;
        ctx.beginPath();
        ctx.arc(player.x, player.y, player.radius, 0, Math.PI*2);
        ctx.fill();
        
        // ミサイルを描画
        missiles.forEach(function(missile) {
          ctx.fillStyle = "red";
          ctx.beginPath();
          ctx.arc(missile.x, missile.y, missile.radius, 0, Math.PI*2);
          ctx.fill();
        });
      }
      
      // 移動関数
      function move() {
        // プレイヤーの移動
        if (leftPressed && player.x > 0) {
          player.x -= 5;
        }
        if (rightPressed && player.x < 400) {
          player.x += 5;
        }
        
        // ミサイルの移動
        for (let i=0; i<missiles.length; i++) {
          const missile = missiles[i];
          missile.y += 7;
          // 当たり判定
          if (Math.sqrt((missile.x-player.x)**2 + (missile.y-player.y)**2) < player.radius+missile.radius) {
            // ミサイルを削除してスコアを加算
            missiles.splice(i, 1);
            score++;
            updateScore();
          }
        }
      }
      
      // スコアの更新関数
      function updateScore() {
        const scoreElement = document.getElementById("score");
        scoreElement.textContent = "SCORE: " + score;
      }
      
      // ゲームループ
      function gameLoop() {
        // クリア
        const canvas = document.getElementById("gameCanvas");
        const ctx = canvas.getContext("2d");
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        draw();
        move();
        
        // ミサイルを生成
        if (Math.random() < 0.05) {
          missiles.push({
            x: Math.random()*400,
            y: -30,
            radius: 10
          });
        }
        
        // リスタート
        if (score >= 10) {
          alert("ゲームクリア！スコア: " + score);
          init();
        } else {
          setTimeout(gameLoop, 30);
        }
      }
      
      // イベントハンドラ
      let leftPressed = false;
      let rightPressed = false;
      function onKeydown(event) {
        if (event.keyCode === 37) {  // 左
          leftPressed = true;
        } else if (event.keyCode === 39) {  // 右
          rightPressed = true;
        }
      }
      function onKeyup(event) {
        if (event.keyCode === 37) {  // 左
          leftPressed = false;
        } else if (event.keyCode === 39) {  // 右
          rightPressed = false;
        }
      }
      document.addEventListener("keydown", onKeydown);
      document.addEventListener("keyup", onKeyup);
      
      // ゲームスタート
      gameLoop();
    </script>
    
    <p id="score" style="font-size:24px;padding:10px;">SCORE: 0</p>
  </body>
</html>

【遊び方】
左右の矢印キーでプレイヤーを移動させ、赤いミサイルを撃ち落とすゲームです。ミサイルにプレイヤーが当たるとゲームオーバーです。10個のミサイルを撃ち落とすとクリアです。絵文字は使用していませんが、簡単なUIでスマホでも操作しやすくなっています。