ここで触れる
https://tet-simulator.ahyaemon.com/
ソースコード
https://github.com/ahyaemon/react-tetris
はじめに
数年前からテトリスをやってるけど、良い感じに練習できるサービスが見当たらない。
いろいろなサイトを巡ってテンプレを探しては実機（自分の場合は switch のぷよテト2）で練習する、というのは効率的じゃない気がした。
実機だとミノが時間経過で落ちてきてしまうので、落ち着いてゆっくり考えることができない。
そこで、自分のペースで考えて練習できるようなサイトを作った。
ほぼ自分用だけど、もしかしたら誰かの役に立つかもしれない。
使用技術
- TypeScript
- React
- React Router
- Jest
- Netlify
二つのゲームモード
エンドレス と テンプレ練習 の二つのモードを用意した。
エンドレス
普通のテトリスだけど、時間経過でミノ落ちてこないからゆっくり練習できる。
「一手戻る」機能があるので好きなだけ戻って考え直せる。
あとは最初からやり直すときに ミノ順ランダム ミノ順同じ シード値固定 を選べるようにした。
ミノ順ランダム : 毎回違う順番でミノが落ちてくる（つまりシード値が更新される）
ミノ順同じ : 前回のプレイと同じ順番でミノが落ちてくる（つまりシード値そのままでやり直し）
シード値固定 : 好きなシード値で固定してプレイできる
テンプレ練習
あらかじめ用意されたテンプレートに沿って練習できる。
「ここに落としてください」という目印が表示されるので、それに合うようにミノを設置して行くモード。
これが一番作りたかった機能。
テンプレ作成
エンドレスモードの手順を記録し、テンプレ練習モードのお題として作成することができる。
具体的には、エンドレスでプレイした後、「メニュー」->「テンプレ練習 URL 作成」とすると、専用のテンプレ練習モードの URL が作成される。
URL を共有すれば、自分の作ったテンプレを誰かに練習してもらえる。
↓ DT砲のテンプレを作成するサンプル
UX, レスポンシブ
レスポンシブというのか分からないけど、キーボード操作とタッチ操作の二種類に対応するようにした。
キーボード操作に関しても [w][a][s][d] キーで移動するパターン（左手で移動させる用）と矢印で移動するパターン（右手で移動させる用）の 2 パターンを用意した。
これは、軽くプレイするには矢印で移動させた方が直感的だけど、一般的な家庭用ゲーム機のコントローラーは左側に十字キーが付いていてそれを踏襲するため。
他にも主要な操作にはキーバインドを用意し、PC からプレイした際になるべくキーボード操作のみでゲームをプレイできるようにした。
状態管理
あんまり仰々しい状態管理は苦手なので、シンプルに Recoil を使用した。
自分は状態管理の方法として、オブジェクトを管理対象にするよりは、クラスのインスタンスを管理対象にすることが多い。（これが良いのか分からない）
https://github.com/ahyaemon/react-tetris/blob/main/src/pages/endless/useEndlessProps.ts
https://github.com/ahyaemon/react-tetris/blob/main/src/pages/practice/usePracticeProps.ts
↑みたいな実装。
atom だけ作っておいて、selector は作らない。
selector にロジックを書くよりはクラスに書く方が凝集されてる感じがある。
Netlify で公開
ahyaemon.com を お名前.com で取得した後に DNS を Netlify に移しており、このサイトはサブドメインで公開した。
Netlify はサブドメインでの公開の設定が一瞬で終わるので楽だった。
DNS を移した後、 Add domain alias から tet-simulator.ahyaemon.com を追加しただけ。
おわりに
サイトを作る時間をテトリスの練習に充てた方が上手くなっていたかも知れない