弾丸を発射

弾丸の発射のような速い反応を要求する場合は JavaScript を使います。
Shot 関係のプログラムファイルの文字コードは utf-8 を使っています。
ソースコードは、右クリックからソースの表示(V)を選んで下さい。
Microsoft Edge では「F12キー」を押すとソースコードを確認することが出来ます。

  1. 弾丸を発射


    1. プログラムを起動すると弾丸が左端から右側に向けて発射されます。
      【shot_1.html】 
      <html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script type="text/javascript">
  x= 0;
  function move()
  { x+= 4;
    if (x<600)  document.tama.style.left= x;
  }
</script>
</head>

<body onLoad="setInterval('move()',25)">
<img src="tama.gif" name="tama" style="position:absolute;left:0px;top:50px;">

</body>
</html>
    2. onLoad から setInterval で move() 関数を呼び出します。
      <img src="tama.gif" ・・・ > が移動する弾丸の画像です。
      <body onLoad="setInterval('move()',25)">
<img src="tama.gif" name="tama" style="position:absolute;left:0px;top:50px;">
    3. 呼び出される move() 関数です。
      x が弾丸の座標で document.tama.style.left= x; で座標を移動します。
      Ｘ座標が 600 を超えると停止します。
      <script type="text/javascript">
  x= 0;
  function move()
  {
    x+= 4;
    if (x<600)  document.tama.style.left= x;
  }
</script>

  2. ShotClass

    1. プログラムを起動すると３発の弾丸が広がりながら発射されます。
      【shot_2.html】 
      <html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script src="shot.js" type="text/javascript"></script>
</head>

<body onLoad="setInterval('func()',25)">
<script type="text/javascript">
  var cls0 = new shot("tama0", 600, 70, -4, 0);
  var cls1 = new shot("tama1", 600, 70, -4, 1);
  var cls2 = new shot("tama2", 600, 70, -4, 2);

  function func()
  { cls0.move();
    cls1.move();
    cls2.move();
  }
</script>

<img src="tama.gif" id="tama0" style="position:absolute;left:600px;top:70px;">
<img src="tama.gif" id="tama1" style="position:absolute;left:600px;top:70px;">
<img src="tama.gif" id="tama2" style="position:absolute;left:600px;top:70px;">

</body>
</html>
    2. 弾丸の移動を shot Class で定義します。
      this. で始まるのが shot クラスの内部変数と内部メソッドです。
      this.flg は弾丸の描画フラグで画面の外(0,0 ～ 800,400)に出た弾丸は描画しません。
      弾丸の描画範囲は、ゲームの実行環境に合わせて修正して下さい。
      【shot.js】
        function shot(id, x, y, xd, yd)
  { this.id = id;
    this.x = x;
    this.y = y;
    this.xd = xd;
    this.yd = yd;
    this.flg = true;

    this.move = function()
    { if (this.flg)
      { this.x += this.xd;
        this.y += this.yd;
        if (this.x<0 || this.x>800 || this.y<0 || this.y>400)   this.flg = false;
      }
      if (this.flg)
      { document.getElementById(this.id).style.visibility= "visible";
        document.getElementById(this.id).style.left= this.x;
        document.getElementById(this.id).style.top= this.y;
      }
      else  document.getElementById(this.id).style.visibility= "hidden";
    }  
  }
    3. shot_2.html では <head> の中で shot Class を取り込んでいます。
      Class File の取り込みは Class File を参照して下さい。
      <head>
<script src="shot.js" type="text/javascript"></script>
</head>
      <body> の onLoad から setInterval で func() 関数を呼び出します。
      <body onLoad="setInterval('func()',25)">
    4. 今回は、弾丸を描画する shot Class を使って３発の弾丸を発射します。
      new shot() のパラメータとして、弾丸のＩＤ, Ｘ座標, Ｙ座標, Ｘの移動量, Ｙの移動量を渡します。
      発射する座標は同じですが、３発の弾丸の軌道を変えています。
      パラメータの値を変更して試してみて下さい。
      func() 関数では、それぞれの shot Class の move() メソッドを呼び出します。
        var cls0 = new shot("tama0", 600, 70, -4, 0);
  var cls1 = new shot("tama1", 600, 70, -4, 1);
  var cls2 = new shot("tama2", 600, 70, -4, 2);
  function func()
  { cls0.move();
    cls1.move();
    cls2.move();
  }
    5. 発射する３発の弾丸のイメージ画像を定義します。
      "tama0", "tama1", "tama2" が弾丸のＩＤです。
      <img src="tama.gif" id="tama0" style="position:absolute;left:600px;top:70px;">
<img src="tama.gif" id="tama1" style="position:absolute;left:600px;top:70px;">
<img src="tama.gif" id="tama2" style="position:absolute;left:600px;top:70px;">

  3. 円状に発射

    1. プログラムを起動すると shot Class を使って同心円状に弾丸が発射されます。
      【shot_3.html】 
      <html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script src="shot.js" type="text/javascript"></script>
</head>

<body onLoad="setInterval('func()',25)">
<script type="text/javascript">
  var cls = new Array();
  for(i=0; i<10; i++)
  { var w = "tama" + i;
    var x = 3 * Math.cos((i*36)/180*Math.PI);
    var y = 3 * Math.sin((i*36)/180*Math.PI);
    cls[i] = new shot(w, 300, 200, x, y);
  }
  function func()
  { for(i=0; i<10; i++) cls[i].move();
  }
  for(i=0; i<10; i++)
  { var w = "tama" + i;
    document.write('<img src="tama.gif" id="', w, '" style="position:absolute;left:300px;top:200px;">');
  }
</script>

</body>
</html>
    2. 弾丸を描画する shot Class を使って同心円状に発射してみます。
      <head> の中で shot Class を取り込みます。
      <head>
<script src="shot.js" type="text/javascript"></script>
</head>
    3. <body> の onLoad から setInterval で func() 関数を呼び出します。
      <body onLoad="setInterval('func()',25)">
    4. プログラムは <body> の先頭から実行されます。
      cls = new Array(); で１０発分の shot Class を生成します。
      座標 300,200 を中心に１０発の弾丸を発射します。
      w が弾丸のＩＤ("tama0"～"tama9" )です。
      3 は円の半径で、今回は弾丸の移動速度になります。
      new shot() のパラメータとして、弾丸のＩＤ, Ｘ座標, Ｙ座標, Ｘの移動量, Ｙの移動量を渡します。
        var cls = new Array();
  for(i=0; i<10; i++)
  { var w = "tama" + i;
    var x = 3 * Math.cos((i*36)/180*Math.PI);
    var y = 3 * Math.sin((i*36)/180*Math.PI);
    cls[i] = new shot(w, 300, 200, x, y);
  }
    5. 呼び出される func() 関数です。
      func() 関数では、それぞれの shot Class の move() メソッドを呼び出します。
        function func()
  { for(i=0; i<10; i++) cls[i].move();
  }

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