Shooting Game の説明

Shooting Game のように速い反応を要求する場合は JavaScript が最適です。
ソースコードは、右クリックからソースの表示(V)を選んで下さい。
Microsoft Edge では「F12キー」を押すとソースコードを確認することが出来ます。

爆発のアニメーション

  1. マウスクリックで爆発音がしてアニメーションが再生されます。
    マウスをクリックすると次の関数が呼び出されます。
    audio.play(); で "bomb.wav" を鳴らします。
    upDate() 関数を 123 ミリ秒ごとに呼び出します。
    id = 0;     //Interval のID
    num = 0;    //画像番号
    audio = new Audio("bomb.wav");
    
    window.onmousedown = start;
    function start()
    {   num = 0;
        audio.play();
        clearInterval(id);
        id = window.setInterval("upDate()",123);
    }
    
  2. upDate() 関数では num をカウントしながら Disp() 関数を呼び出します。
    num が 16 を超えると爆発アニメーションの終了です。
    function upDate()
    {   if (num>16)
        {   clearInterval(id);  }
        else    num++;
        Disp();
    }
    
  3. Disp() 関数では num番目の画像を描画します。
    function Disp()
    {   document.anime.src="bomb_" + num + ".gif";
    }
    
  4. 画像を切り替えてアニメーションする元の画像です。
    0番目の画像は全領域が透明色で何も描画されません。
    <img src="bomb_0.gif" name="anime">
    

シップから連射


  1. Space キーを押すごとに弾丸が発射されます。
    左右の矢印キー(←→)を押すとシップの移動が始まります。
    下矢印キー(↓)を押すとシップが停止します。
  2. 弾丸を移動する shot Class を使って、シップから連射します。
    shot Class の説明は 弾丸を発射 を参照して下さい。
  3. <body> から setInterval('func()',25) で func() を呼び出します。
    func() 関数では cls[i].move(); で最大10発の弾丸を移動します。
    毎回シップのX座標を xd だけ移動します。
      function func()
      { for(i=0; i<10; i++)
        { cls[i].move();  }
        x= x+xd;
        document.Ship.style.left= x;
        document.Ship.style.top= y;
      }
    
  4. Space キーが押されると KeyDown() 関数が呼び出されます。
    x, y はシップの座標です。
      document.onkeydown = KeyDown;
      document.onkeydown = KeyDown;
      x= 300;
      y= 400;
      xd= 0;
    
  5. new shot() で10発分の shot Class を生成します。
    弾丸は 400 の座標から上(-4)に向けて移動します。
      cls = new Array();
      for(i=0; i<10; i++)
      { var w = "tama" + i;
        cls[i] = new shot(w, 300, 400, 0, -4);
        cls[i].flg = false;
        document.write('<img src="tama.gif" id="', w, '" style="position:absolute;left:300px;top:400px;">');
      }
    
  6. シップの画像です。
      <img src="ship.png" name="Ship" style="position:absolute;left:300px;top:400px;">
    
  7. キーをタイプすると KeyDown() 関数が呼ばれます。
    0x25(←)が押されると xd に -2 を設定します。
    0x27(→)が押されると xd に 2 を設定します。
    0x28(↓)が押されると xd に 0 を設定します。
    0x20(スペースキー)のとき、cls[10] の空きを検索して弾丸を登録します。
      function KeyDown()
      { if(document.all)
            kcode = event.keyCode;
        else if(document.getElementById)
            kcode = (event.keyCode)? event.keyCode: event.charCode;
        else if(document.layers)
            kcode = event.which;
        switch(kcode)
        { case 0x25:
              xd= -2;
              break;
          case 0x27:
              xd= 2;
              break;
          case 0x28:
              xd= 0;
              break;
        }
        if (kcode==0x20)
        { for(i=0; i<10; i++)
          { if (cls[i].flg==false)
            { cls[i].x = x+20;
              cls[i].y = 400;
              cls[i].flg = true;
              return;
            }
          }
        }
      }
    

前田稔の超初心者のプログラム入門
超初心者のプログラム入門(JavaScript)