javascript（テトリス001_キーボードから入力）

■1セルのピースを操作する。
テトリスのコードを作成するにあたり、いろいろと試行錯誤中。始め、位置情報を使って組み立てていこうかと思ったけど、微妙なずれの調整が難しそうなので、各クラスごとに番号を付与する。

<div class="grid-demo">
    <div class="grid">
      <div class="squ001"></div>
      <div class="squ002"></div>
      <div class="squ003"></div>
　　　...
      <div class="squ199"></div>
      <div class="squ200"></div>
    </div>
    <div class="piece"></div>
  </div>
</body>

落ちるピースは通常は4セル分だけど、まずは1セルの簡単な形で動作を試してみる。上のpieceクラスがそれ。setInterval で繰り返し動作させ、番号を10ずつ増やしていく。横10×縦20にしているので、これで1セル分下に移動する。
指定した番号のセルから位置情報を取得し、ピースへコピーすることで移動させる。番号がないところまで行ったら、一つ前のセルを緑にして、判定用の変数board（200の要素を持つ配列で、要素の番号をセル番号とみなす。何もない状態を0、ピースが置かれた状態を1とする）を更新。

   const timer = setInterval(function () {
      $('.squ017').css('background-color', 'Green');
      currentPosId = currentPosId + 10;
      let temp = ( '000' + currentPosId).slice( -3);
      if($('.squ' +temp).get(0) === undefined || board[temp] === 1){
         let temp2 = temp - 10;
         temp2 = ('000' + temp2).slice(-3);
         $('.squ' +temp2).css('background-color', 'Green');
         $('.piece').css('top', '0px');
         board[temp2] = 1;
         currentPosId = 5;
      } else {
         console.log(temp)
         $('.piece').css('left', $('.squ'+temp).position().left + 'px');
         $('.piece').css('top', $('.squ'+temp).position().top + 'px');
         $('.piece').css('background-color', 'red');
      }
   }, 1000);

実行画面が下。赤色が落ちるピース。緑色が積みあがったもの。上の緑は squ017クラスで、色が変わるか確認したもの（コードが動くか確認のため残している）。

この落ちるピースをキーボード入力で左右に動かしたり下に速く落としたりしたい。

キーボード入力は、addEventListener でできるよう。左右の位置調整は、セルの番号を1ずらすことでできるので、現在位置から±1にする。左端、右端までいったら、それ以上動かないよう逆に±1する。下のコードでは、「a」か「A」で左、「d」か「D」で右に行く。

document.addEventListener('keypress', keypress_event);

function keypress_event(e) {
   if(e.key === 'a' || e.key === 'A'){
      currentPosId = currentPosId - 1;
      let temp2 = ( '000' + currentPosId).slice( -3);
      if (temp2.slice(2,3) === '0') {
          currentPosId = currentPosId + 1;
      } else{
      $('.piece').css('left', $('.squ'+temp2).position().left + 'px');
      $('.piece').css('top', $('.squ'+temp2).position().top + 'px');
      }
   } else if(e.key === 'd' || e.key === 'D'){
      (省略、右へ行く処理)
   } else if(e.key === 'x' || e.key === 'X'){
      (省略、下へ行く処理)
   }
   return false; 
}

これで1セル分のピースを移動させるコードはできた。次は、1行がそろったときに消える処理かな。
とりあえず、1セル分のピースでテトリスのような操作ができるものを作ろうと思う。