SRSの回転中心を眺めるだけ 📖

テトリスブロック回転の話で、SRS(スーパーローテーションシステム)というものがあります。 世のプログラム解説サイトではSRSを回転＋XY移動で実装していることが多いです。 　 このサンプルはSRSを回転の中心点変更を用いて実装したものです。 このアルゴリズムで解説しているサイトは、ない。　…なんでないの？　じゃあ作るか、で作りました。 　 下のほうの描画設定でブロックの種類、回転方向、ループ描画の変更ができます。 その下は使用した回転の中心点テーブルです。

プログラム: (→大)
！インデント構文 //--------------- ブロック幅=20 //ブロック初期値　[0,0]が初期の回転中心 ブロック初期値={} ブロック初期値["T"]=[[0,0],[1,0],[-1,0],[ 0,-1]] ブロック初期値["L"]=[[0,0],[1,0],[-1,0],[ 1,-1]] ブロック初期値["J"]=[[0,0],[1,0],[-1,0],[-1,-1]] ブロック初期値["S"]=[[0,0],[1,-1],[-1,0],[0,-1]] ブロック初期値["Z"]=[[0,0],[1,0],[-1,-1],[0,-1]] ブロック初期値["I"]=[[-1.5,-0.5],[-0.5,-0.5],[0.5,-0.5],[1.5,-0.5]] ブロック初期値["O"]=[[0.5,0.5],[-0.5, 0.5],[-0.5,-0.5],[0.5,-0.5]] タイプ別色={} タイプ別色["影"]=黒色 タイプ別色["T"]=紫色 タイプ別色["L"]=金色 タイプ別色["J"]=青色 タイプ別色["S"]=緑色 タイプ別色["Z"]=赤色 タイプ別色["I"]=水色 タイプ別色["O"]=黄色 //--------------- //1ブロックの画像 ブロック画像 = {} タイプ別色を反復 　　ブロック画像[対象キー] = [ブロック幅,ブロック幅]のキャンバス作成 　　対象に塗色設定 　　[0,0,ブロック幅,ブロック幅]へ四角描画 //現在ブロック画像 = ブロック画像["T"] 改行作成 //--------------- 「・状態rは回転の状態（右回転方向に0～3）。　座標[x,y]は回転の中心点 （SRS解説によくある座標のズレではない）」のラベル作成 改行作成 //--------------- //キャンバスの作成 描画先=[] 描画先作成 ●描画先作成 　変数　rot = 0　//回転状態 　変数　srs = 0　//SRS試行回数 　rotを0から3まで繰り返す 　　描画先[rot] = [] 　　srsを0から5まで繰り返す 　　　描画先[rot][srs] = [8*ブロック幅,8*ブロック幅 + 22]のキャンバス作成 　　改行作成 　　改行作成 //操作中ブロック ブロック={} ブロック["塊"] = [[0,0],[1,0],[-1,0],[0,-1]] ブロック["回転"] = 0　　//0:0度 1:90度 2:180度 3:270度 (右回転) ブロック["回転方向"] = 1　//1:90度(右回転) -1:-90度(左回転)　 ブロック["タイプ"] = "T"　//タイプは"TLJSZIO"どれか ブロック変更適用 ●ブロック変更適用 　定数　type =ブロック["タイプ"] 　定数　rot = ブロック["回転"] 　 　変数　bl=ブロック初期値[type] 　(rot)回 　　bl = blを右回転 　 　ブロック["塊"] = bl 　 　//現在ブロック画像 = ブロック画像[type] //--------------- //ブロック = [[x,y],[x,y],[x,y],[x,y]] みたいな感じ ●右回転(ブロックを) 　ブロックを[0,0]で1にブロック回転 ●左回転(ブロックを) 　ブロックを[0,0]で-1にブロック回転 ●左右反転(vを) 　変数　結果 = [] 　vを反復 　　　x,y = 対象 　　　結果に[-x,y]を配列追加 　結果を戻す //回転方向：1=右　それ以外=左 //新しい配列を生成して返す ●ブロック回転(ブロックを,回転中心で,回転方向に) 　結果 = [] 　変数　[中心X, 中心Y] = 回転中心 　もし回転方向=1でなければ、回転方向=-1 　 　ブロックを反復 　　　x,y = 対象 　　　 　　　x,y = [x-中心X, y-中心Y]　//中心を引く 　　　x,y = [-y*回転方向, x*回転方向] 　　//回転する(回転方向は+1が右、-1が左) 　　　x,y = [x+中心X, y+中心Y]　//中心を足す 　　　 　　　結果に[x,y]を配列追加 　結果を戻す //---------------SRS回転テーブルの作成と取得 //4回転状態×回転方向2×回転中心5種類×[x,y] //SRSテーブル1[回転状態0～3][回転方向0～1][SRS0～4][xy] 定数　SRSテーブル1 = SRSテーブル1作成 ●SRSテーブル1作成　//棒以外 　変数　table = []　//戻り値 　変数　v = [[0,0],[0.5,-0.5],[0,-1],[1,1],[1.5,0.5]]　//通常回転[0,0] とSRS1～4（状態0の左回転） 　変数　a = 0 　 　//a = [回転状態] 　aを0から3まで繰り返す 　　　table[a]=[] 　　　table[a][0]=v　//[a][左回転] 　　　もしa=0またはa=2ならば 　　　　　v=vを左右反転 　　　違えば 　　　　　v=vを右回転 　　　table[a][1]=v　//[a][右回転] 　　　v=vを右回転 　　//↑ vを左右反転・右回転・右回転・右回転・左右反転・右回転・右回転・右回転 の8回 　 　tableを戻す //--------------- //[ちょっと左下・右上・横棒の左のブロック・右ブロック]が左回転の軸の初期値 //[左上・ちょっと右下・横棒の左のブロック・右ブロック]が右回転の軸の初期値 定数　SRSテーブル2 = SRSテーブル2作成 ●SRSテーブル2作成　//棒 　変数　table =[]　//戻り値 　変数　v0 = [[0,0],[-0.5, 0.5],[ 1.0,-1.0],[-1.5,-0.5],[ 1.5,-0.5]]　//[状態0][左回転] 　変数　v1 = [[0,0],[-1.0,-1.0],[ 0.5, 0.5],[-1.5,-0.5],[ 1.5,-0.5]]　//[状態0][右回転] 　変数　a = 0 　 　//a = [回転状態] 　aを0から3まで繰り返す 　　　table[a]=[v0,v1]　//[左回転時,右回転時] 　　　v0,v1 = [v1を右回転,v0を右回転] //右回転してv0とv1を入替 　 　tableを戻す //--------------- //棒以外　回転前:0～3、回転方向：1=右　それ以外=左、srs：0～4 //中心座標[x,y]を戻す ●SRSテーブル1取得(回転前,回転方向,srs) 　もし回転方向が1ならば 　　SRSテーブル1[回転前][1][srs]を戻す//右回転 　違えば 　　SRSテーブル1[回転前][0][srs]を戻す//左回転 //棒　　回転前:0～3、回転方向：1=右　それ以外=左 ●SRSテーブル2取得(回転前,回転方向,srs) 　もし回転方向が1ならば 　　SRSテーブル2[回転前][1][srs]を戻す//右回転 　違えば 　　SRSテーブル2[回転前][0][srs]を戻す//左回転 //--------------- //現在ブロックの状態に応じたスーパーローテーションの回転中心を返す ●中心座標取得(srs) 　定数　type = ブロック["タイプ"] 　定数　回転方向 = ブロック["回転方向"] 　定数　回転前 = ブロック["回転"] 　 　もしtypeが"I"でなければ 　　　SRSテーブル1取得(回転前,回転方向,srs) 　違えば 　　　SRSテーブル2取得(回転前,回転方向,srs) //------------------------------ //------------------------------ //角度を変えてループで呼ぶ　ぐだぐだ ●描画更新(角度) 　変数 rot = 0　//回転状態 　変数 srs = 0　//スーパーローテーション 　 　rotを0から3まで繰り返す 　　ブロック["回転"] = rot 　　ブロック変更適用 　　 　　描画先[rot][0]へ描画開始 　　回転軸全描画 　　 　　srsを0から4まで繰り返す 　　　描画先[rot][srs+1]へ描画開始　//キャンバス選択 　　　全描画クリア 　　　定数　中心座標 = 中心座標取得(srs) 　　　 　　　回転描画(角度,中心座標) 　　 　　 　　 ●回転描画(角度,中心座標) 　定数　w=ブロック幅 　定数　type = ブロック["タイプ"] 　中心 = [中心座標[0]*w,中心座標[1]*w]　//描画のスケールに合わせる 　 　格子描画 　 　キャンバス状態保存 　 　[3*w+w/2,3*w+w/2]に描画起点設定。 　もしtypeが"I"ならば、[w/2,w/2]に描画起点設定。 　 　ブロック塊描画(ブロック画像["影"],[0,0])　//回転前 　 　中心に描画起点設定 　角度に描画回転 　ブロック塊描画(ブロック画像[type],中心)　//回転後 　 　回転軸描画　//黄色い点 　 　キャンバス状態復元 　 　 　//中心点を文字描画 　黒色に塗色設定 　18に描画フォント設定 　定数　[x,y]=[ブロック幅*2,8*ブロック幅+18] 　「↑[{中心座標}]」を[x,y]へ文字描画 //背景と罫線の描画 ●格子描画 　定数　w=ブロック幅 　 　//背景色 　銀色に塗色設定 　[0,0,8*w,8*w]へ四角描画 　白色に塗色設定 　もしブロック["タイプ"]が"I"ならば 　　　[2*w,2*w,4*w,4*w]へ四角描画 　違えば 　　　[2*w,2*w,3*w,3*w]へ四角描画 　 　//格子 　変数　[x,y]=[0,0] 　y=8 　xを0から8まで繰り返す 　　　[x*w,0]から[x*w,y*w]へ線描画 　yを0から8まで繰り返す 　　　[0,y*w]から[x*w,y*w]へ線描画 　 //影とか残像とかブロックを描画 ●ブロック塊描画(img,中心) 　定数　w=ブロック幅 　キャンバス状態保存 　ブロック["塊"]を反復 　　　定数　[x,y] = 対象 　　　imgの[0,0,w,w]を[x*w-w/2-中心[0],y*w-w/2-中心[1],w,w]へ画像部分描画 　キャンバス状態復元 //黄色い回転軸マーク ●回転軸描画 　定数　w=ブロック幅 　キャンバス状態保存 　45に描画回転 　黄色に塗色設定 　[-w/6,-w/6,w/3,w/3]へ四角描画 　キャンバス状態復元 //------------------------------ //------------------------------ ●回転軸全描画 　定数　w=ブロック幅 　定数　type = ブロック["タイプ"] 　 　全描画クリア 　格子描画 　 　キャンバス状態保存 　[3*w+w/2,3*w+w/2]に描画起点設定 　もしtypeが"I"ならば、[w/2,w/2]に描画起点設定。 　 　ブロック塊描画(ブロック画像[type],[0,0]) 　 　srsを0から4まで繰り返す 　　　定数　中心座標 = 中心座標取得(srs) 　　　中心 = [中心座標[0]*w,中心座標[1]*w]　//描画のスケールに合わせる 　　　キャンバス状態保存 　　　中心に描画起点設定 　　　回転軸描画　//黄色い点 　　　キャンバス状態復元 　 　キャンバス状態復元 　 　//中心点を文字描画 　黒色に塗色設定 　rot = ブロック["回転"] 　18に描画フォント設定 　定数　[x,y]=[ブロック幅*2,8*ブロック幅+18] 　「状態{rot}」を[x,y]へ文字描画 //--------------------------設定部品 「hr」のDOM部品作成 「・描画設定」のラベル作成 改行作成 1回 　「ブロック：」のラベル作成 　「TLJSZI」を文字列分解 　それのセレクトボックス作成 　それの「size」に6をDOM属性設定 　それの「change」がDOMイベント発火時には 　　ブロック["タイプ"] = 対象からテキスト取得 1回 　「　回転方向：」のラベル作成 　「右左」を文字列分解 　それのセレクトボックス作成 　それの「size」に2をDOM属性設定 　それの「change」がDOMイベント発火時には 　　対象からテキスト取得 　　もしそれが「右」ならば 　　　　ブロック["回転方向"] = 1 　　違えば 　　　　ブロック["回転方向"] = -1 　　 1回 　ループ設定="ループ"のチェックボックス作成 　それの「checked」にオンをDOM属性設定 //-------------------------- //SRSテーブルを出力 1回 　//テーブルはコンソールからもっていけ 　「棒以外：」をコンソール表示 　SRSテーブル1をコンソール表示 　「棒：」をコンソール表示 　SRSテーブル2をコンソール表示 　 　 　「hr」のDOM部品作成 　「回転中心点のテーブル（棒以外）」のラベル作成 　テーブル用=SRSテーブル1を配列複製 　["左回転","右回転"]をテーブル用の0に配列挿入 　テーブル用からテーブル作成 　 　「hr」のDOM部品作成 　「回転中心点のテーブル（棒）」のラベル作成 　テーブル用=SRSテーブル2を配列複製 　["左回転","右回転"]をテーブル用の0に配列挿入 　テーブル用からテーブル作成 　「hr」のDOM部品作成 //-------------------------- //初期値 ブロック["タイプ"] = "T" ブロック["回転方向"] = 1 //描画ループ 1の間 　rを0から90まで10ずつ増やし繰り返す 　　r=r*ブロック["回転方向"] 　　描画更新(r) 　　もしrが0ならば0.5秒待つ 　　0.1秒待つ 　　 　0.8秒待つ 　 　「抜ける」までの間 　　　もし（ループ設定の「checked」をDOM属性取得）ならば、抜ける 　　　0.5秒待つ