JavaScriptでの同時キー入力

(C)WorldWideSoftware

<!DOCTYPE html>
<html lang="ja">
 <head>
  <meta charset="utf-8">
  <title>JavaScriptでの同時キー入力</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>
※スペースキーを押し続けると、環境によってはその他１つのキーしか判定できない場合があります<br>
  <a href="key01src.html">ソースコードの確認</a>

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

  //キー入力
  var key = [];
  for(var i=0; i<256; i++) key[i] = 0;
  window.onkeydown = function(event) { key[event.keyCode]++; }
  window.onkeyup = function(event) { key[event.keyCode] = 0; }

  //自機
  var myX = 320, myY = 480;

  //弾丸用の変数
  var BULLET_MAX = 10;
  var bullet = 0;
  var buX = [], buY = [];//座標
  for(var i = 0; i < BULLET_MAX; i++) { buX[i] = 0; buY[i] = 0; }

  //背景の星
  var STAR_MAX = 50;
  var stX = [], stY = [];//座標
  for(var i = 0; i < STAR_MAX; i++) {
   stX[i] = parseInt(Math.random()*640);
   stY[i] = parseInt(Math.random()*640);
  }

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

  //メイン処理
  function mainProc() {

   //背景
   ctx.fillStyle = "black";
   ctx.fillRect(0, 0, 640, 640);
   for(var i = 0; i < STAR_MAX; i++) {
    stY[i] = (stY[i]+1+i)%640;
    line(stX[i], stY[i], stX[i], stY[i]+2, "blue");
   }

   //自機の移動
   if(key[37] > 0 && myX >   0) myX -= 10;
   if(key[39] > 0 && myX < 640) myX += 10;
   if(key[38] > 0 && myY >   0) myY -= 10;
   if(key[40] > 0 && myY < 640) myY += 10;
   line(myX-30, myY+40, myX+30, myY+40, "yellow");
   line(myX, myY-40, myX-30, myY+40, "yellow");
   line(myX, myY-40, myX+30, myY+40, "yellow");

   //弾の発射
   if(key[32] > 0 || key[90] > 0) {
    if(buX[bullet] == 0 && buY[bullet] == 0) {//発射されていない状態
     buX[bullet] = myX;
     buY[bullet] = myY-40;
     bullet++; if(bullet == BULLET_MAX) bullet = 0;
    }
   }

   //弾の処理
   for(var i = 0; i < BULLET_MAX; i++) {
    if(buX[i] == 0 && buY[i] == 0) continue;//発射されていない状態
    buY[i] -= 40;
    line(buX[i], buY[i]-20, buX[i], buY[i]+20, "lime");
    if(buY[i] < 0) { buX[i] = 0; buY[i] = 0; }//画面上部に消えたら発射されていない状態にする
   }

   setTimeout( mainProc, 1000/30 );//リアルタイム処理
  }

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