2018.05.10TwitterFacebookGoogle+はてブPocketスポンサードリンク数回に分けて公開している、HTML5+JavaScriptによるテトリスのソースコードを解読するシリーズの4です。コードレシピ※自分なりの解釈ですので、正確ではないかもしれません。今回は、その方向へ操作ブロックを移動できるかどうかを返すvalid()関数を解読します。valid()関数とはvalid()関数は、キーボードが押されたときに呼び出されるkeyPress()関数と、指定した秒数毎に呼び出されるtick()関数に呼び出される関数です。true;}https://github.com/ottati/canvas-tetris/blob/master/js/tetris.js基本的には現在の操作ブロック(current)が引数(offsetX,offsetY)に渡された値の方向へ移動できるかどうかを判定します。newCurrentに値が渡されると、newCurrentが引数(offsetX,offsetY)に渡された値の方向へ移動できるかどうかを判定します。current;とすることで、newCurrentに値が何も渡されなかったときにcurrentを代わりに渡すことができます。続いて、valid()関数内でどのようなことが行われているのかを小割りにして解読します。{newCurrent[0][0]が1以上(操作ブロック内の色が付いているマス)だったら、次のif文(2.)に進みます。反対に0(色が付いていないマス)であれば処理を抜け、newCurrent[0][1]へ移ります。'undefined'縦方向へのブロックの移動先([y+offsetY])が盤面の範囲外(20番目以降の行)だったら次のif文(3.)に進みます。盤面内は配列で定義されていますが、盤面外は何も定義されていませんよね?そういうことです。'undefined'2.又は横方向へのブロックの移動先([y+offsetY][x+offsetX])が盤面の範囲外(左端を越えるor右端を越える)だったら次のif文(4.)に進みます。]2.又は移動先のマス内が0ではなく1だったら、そこには既にブロックがあるということなので、次のif文(5.)に進みます。02.又は横方向の移動先が盤面の左端を越えたら次のif文(6.)に進みます。ROWS2.又は縦方向の移動先が盤面の下端を越えるか、色つきブロックが19番目の行に到達すれば、次のif文(7.)に進みます。{2.又は横方向の移動先が盤面の右端を越えるか、色つきブロックがy+offsetY行目の9番目のマスに到達すれば、次のif文(8.)に進みます。false;移動量(offsetY)が1且つ横方向への移動が出来なくなった(offsetX-currentX==0)且つ横方向への移動が出来なくなった(offsetX-currentX==0)らゲームオーバーとなり、loseがtrueに切り替わります。false;となります。newGameで指定した秒数毎に呼び出される関数。}}https://github.com/ottati/canvas-tetris/blob/master/js/tetris.js8.の後、tick()のelse文が実行され、freeze()でブロックを固定、clearLines()で揃った行を消去、newShape()で新たに盤面上部に操作ブロックをセットします。true;の場合のみif(lose){...}が実行されます。true;のまま操作ブロックが落下しながら移動します。以上で、【HTML5+JavaScript】テトリスのコード内にある関数を解読4を終わります。WATANABE1北海道在住。HTML+CSS+JavaScriptによるコンテンツ制作を行なっている。脱初心者を目標に、今後も次々とコンテンツを制作し、スキルを高めていきたい。