タイトルの通り、React.jsでテトリス風のゲームを作りました。
http://kmaebashi.com/programmer/reacttetris/index.html
ゲーム画面はこんな感じ。
遊び方やゲーム本体のページへのリンク、ソースプログラム一式は上記のページに記載しています。
見た目、前回のCanvasを使ったJavaScriptテトリスと何が違うんだ、と言われそうですが、中身は結構違うのです。いやほんと。
前回のJavaScriptテトリスではCanvasを使っていましたが、仮想DOMを使うReact.jsでゲームステージをCanvasで描いていたらメリットも使い方もわからないわけで、そこで今回はゲームステージはtableで作っています。Nextのところが同じクラスで作れたのがReact.jsのコンポーネント指向の強み? でも正直、自力でDOMをいじっても、うまく作れば同様のソースの再利用はできるのでは。
あとは正直、React.js版はCanvas版と比べて動きがちょっともっさりしている(特に↓押下時)気がするのですが、これは作りが悪いんでしょうか。