React.jsでテトリス風ゲームを作ったよ

タイトルの通り、React.jsでテトリス風のゲームを作りました。

http://kmaebashi.com/programmer/reacttetris/index.html

ゲーム画面はこんな感じ。

f:id:kmaebashi:20190701005922p:plain

React.jsによるテトリス風ゲーム

遊び方やゲーム本体のページへのリンク、ソースプログラム一式は上記のページに記載しています。

見た目、前回のCanvasを使ったJavaScriptテトリスと何が違うんだ、と言われそうですが、中身は結構違うのです。いやほんと。

前回のJavaScriptテトリスではCanvasを使っていましたが、仮想DOMを使うReact.jsでゲームステージをCanvasで描いていたらメリットも使い方もわからないわけで、そこで今回はゲームステージはtableで作っています。Nextのところが同じクラスで作れたのがReact.jsのコンポーネント指向の強み? でも正直、自力でDOMをいじっても、うまく作れば同様のソースの再利用はできるのでは。

あとは正直、React.js版はCanvas版と比べて動きがちょっともっさりしている(特に↓押下時)気がするのですが、これは作りが悪いんでしょうか。