弾の軌跡２

(C)WorldWideSoftware

<!DOCTYPE html>
<html lang="ja">
 <head>
  <meta charset="utf-8">
  <title>弾の軌跡２</title>
 </head>
 <body>
  <a href="http://www.wwsft.com">(C)WorldWideSoftware</a><br>
  <canvas id="bg" width="640" height="640"></canvas><br>
画面クリック（タップ)した位置からレーザー発射<br>
スペースキーでも発射できます<br>
レーザーは一定時間で消失します<br>
  <a href="laser01src.html">ソースコードの確認</a>

  <script>
  //描画面（キャンバス）の準備
  var cvs = document.getElementById("bg");
  var ctx = cvs.getContext("2d");

  //キー入力
  var key = 0;
  window.onkeydown = function(ev) { key = ev.keyCode; }
  window.onkeyup = function(ev) { key = 0; }

  //マウスとタップの判定
  var tapX = 320, tapY = 320, tapC = 0;
  cvs.addEventListener("touchstart", touchStart);
  cvs.addEventListener("touchmove", touchMove);
  cvs.addEventListener("touchend", touchEnd);
  function touchStart(ev) {
   ev.preventDefault();
   var rect = ev.target.getBoundingClientRect();
   tapX = ev.touches[0].clientX-rect.left;
   tapY = ev.touches[0].clientY-rect.top;
   tapC = 1;
  }
  function touchMove(ev) {
   ev.preventDefault();
   var rect = ev.target.getBoundingClientRect();
   tapX = ev.touches[0].clientX-rect.left;
   tapY = ev.touches[0].clientY-rect.top;
  }
  function touchEnd(ev) { tapC = 0; }

  cvs.addEventListener("mousedown", mouseDown);
  cvs.addEventListener("mousemove", mouseMove);
  cvs.addEventListener("mouseup", mouseUp);
  function mouseDown(ev) {
   var rect = ev.target.getBoundingClientRect();
   tapX = ev.clientX-rect.left;
   tapY = ev.clientY-rect.top;
   tapC = 1;
  }
  function mouseMove(ev) {
   var rect = ev.target.getBoundingClientRect();
   tapX = ev.clientX-rect.left;
   tapY = ev.clientY-rect.top;
  }
  function mouseUp(ev) { tapC = 0; }

  //移動量
  var XP = [-16,  16, 16, -16];
  var YP = [-16, -16, 16,  16];
  var dir = 0;

  //レーザー用の変数
  var LASER_MAX = 50;
  var laX = [], laY = [];//座標
  var laXP = [], laYP = [];//方向（移動量）
  var laP = [];//発射後のカウント
  var lasNo = 0;
  var laserX, laserY;//発射する座標
  var laserP = 0;//発射用のフラグ

  //レーザーをクリア
  function clrLaser(n) {
   laXP[n] = 0;
   laYP[n] = 0;
  }

  //レーザーをセット（自機から撃ち出す弾をセットする処理）
  function setLaser() {
   laX[lasNo] = laserX;
   laY[lasNo] = laserY;
   laXP[lasNo] = XP[dir];
   laYP[lasNo] = YP[dir];
   laP[lasNo] = 0;
   lasNo ++; if(lasNo == LASER_MAX) lasNo = 0;
  }

  for(var i = 0; i < LASER_MAX; i++) clrLaser(i);

  //線を描く関数
  function line(x1, y1, x2, y2, col) {
   ctx.strokeStyle = col;
   ctx.beginPath();
   ctx.moveTo(x1, y1);
   ctx.lineTo(x2, y2);
   ctx.stroke();
  }

  //メイン処理
  var tmr = 0;
  function mainProc() {
   tmr ++;
   ctx.fillStyle = "black";
   ctx.fillRect(0, 0, 640, 640);

   //レーザー発射
   if(laserP == 0) {
    if(key == 32 || tapC > 0) {
     dir = (dir+1)%4;//レーザーの向き
     laserX = 16*parseInt(tapX/16);
     laserY = 16*parseInt(tapY/16);
     laserP = LASER_MAX;
    }
   }
   else {
    setLaser();
    laserP --;
   }

   //レーザーの描画と移動
   for(var i = 0; i < LASER_MAX; i++) {
    if(laXP[i] == 0 && laYP[i] == 0) continue;//発射されていない状態
    line(laX[i], laY[i], laX[i]+laXP[i], laY[i]+laYP[i], "cyan");//レーザーの線を描く
    laX[i] += laXP[i];//座標の計算
    laY[i] += laYP[i]
    if(laX[i] <= 0 || 640 <= laX[i]) laXP[i] = -laXP[i];//反射
    if(laY[i] <= 0 || 640 <= laY[i]) laYP[i] = -laYP[i];
    laP[i] ++;//発射後のカウント
    if(laP[i] > 100) clrLaser(i);
   }

   //タップ位置の表示
   ctx.fillStyle = "white";
   ctx.fillText(tmr+":"+tapC, tapX, tapY);
   setTimeout( mainProc, 1000/60 );//リアルタイム処理
  }

  mainProc();//処理スタート
  </script>
 </body>
</html>
←動作確認に戻る