Shooting Game の説明

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

  1. 弾丸を発射

    弾丸を発射, 弾丸を広がりながら発射, 弾丸を同心円状に発射などを説明しています。

  2. シップから連射


    1. Space キーの連打(押し続け)でシップから弾丸を連射するプログラムです。
      左右の矢印キー(←→)を軽くタイプするとシップの移動が始まります。
      下矢印キー(↓)を押すとシップが停止します。
      Space キーを押すごとにシップから弾丸が発射されます。
    2. <body> から setInterval('func()',25) で func() を呼び出します。
      <body onLoad="setInterval('func()',25)">
    3. func() 関数では cls[i].move(); で最大２０発の弾丸を移動します。
      毎回シップのＸ座標を xd だけ移動します。
        function func()
  { for(i=0; i<20; i++)
    { cls[i].move();  }
    x= x+xd;
    document.Ship.style.left= x;
    document.Ship.style.top= y;
  }
    4. Space キー(矢印キー)が押されると KeyDown() 関数が呼び出されます。
      x, y はシップの座標です。
      date は連打の間隔を調整する値です。
        document.onkeydown = KeyDown;
  x= 300;
  y= 400;
  xd= 0;
  date = (new Date).getTime();
    5. new shot() で２０発分の shot Class を生成します。
      弾丸は 400 の座標から上(-4)に向けて移動します。
        cls = new Array();
  for(i=0; i<20; 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(スペースキー)のとき getTime() で連射の間隔を調整します。
          var w = (new Date).getTime();
    if (date+200>w) return;
      200ミリ秒の間隔を取って cls[20] の空きを検索して弾丸を登録します。
        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)
    { var w = (new Date).getTime();
      if (date+200>w) return;
      date = (new Date).getTime();
      for(i=0; i<20; i++)
      { if (cls[i].flg==false)
        { cls[i].x = x+20;
          cls[i].y = 400;
          cls[i].flg = true;
          return;
        }
      }
    }
  }

  3. 爆発のアニメーション

    1. マウスクリックで爆発音がしてアニメーションが再生されます。
      マウスをクリックすると次の関数が呼び出されます。
      audio.play(); で "bomb.wav" を鳴らします。
      次に setInterval で 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. 画像を切り替えてアニメーションする元の画像です。
      ０番目と１７番目の画像は全領域が透明色で何も描画されません。
      <img src="bomb_0.gif" name="anime">

  4. 敵にヒット

    1. 画面上部で往復運動をする敵に向かって弾丸を発射します。
      左右の矢印キー(←→)を軽くタイプするとシップの移動が始まります。
      Space キーの連打(押し続け)でシップから弾丸が発射され、ヒットすると爆発します。
    2. <body> から setInterval('func()',25) で func() を呼び出します。
      <body onLoad="setInterval('func()',25)">
    3. func() 関数では cls[i].move(); で最大２０発の弾丸を移動します。
      エネミーと弾丸の当たり判定をして、ヒットすると start() で爆発を起動します。
      ex はエネミーのＸ座標です。
      Ship と Enemy の座標を計算して移動します。
        function func()
  { for(i=0; i<20; i++)
    { cls[i].move();
      if (cls[i].flg && cls[i].x>ex-40 && cls[i].x<ex+40 && cls[i].y>20 && cls[i].y<120)
      { document.anime.style.left= ex;
        start();
      }
    }
    x= x+xd;
    document.Ship.style.left= x;
    document.Ship.style.top= y;
    ex+=exd;
    if ((ex>800)||(ex<0))   exd= -exd; 
    document.Enemy.style.left= ex;
  }
    4. start(), upDate(), Disp() は爆発に関係する関数です。
      爆発の説明は 爆発のアニメーション を参照して下さい。
    5. x, y, xd はシップを操作するための領域です。
      ex はエネミーの座標で、exd はエネミーの移動量(往復運動)です。
      id, num, audio は爆発のアニメーションに関係する領域です。
        document.onkeydown = KeyDown;
  x= 300;
  y= 400;
  xd= 0;
  ex= 0;
  exd= 2;
  id= 0;
  num= 0;
  audio = new Audio("bomb.wav");
    6. シップとエネミーと爆発の画像領域を定義します。
        <img src="ship.png" name="Ship" style="position:absolute;left:300px;top:400px;"><br>
  <img src="enemy1.gif" name="Enemy" style="position:absolute;left:0px;top:20px;"><br>
  <img src="bomb_0.gif" name="anime" style="position:absolute;left:0px;top:20px;">
  5. 背景画像の描画やスクロールは Back Image や Gama BackGround を参照して下さい。

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