React.jsの勉強も兼ねて某RPG風レベルアップカウンターを作ってみた

Facebookが開発を行っているReact.jsを勉強しておきたいなぁと思っていながら大分経ってしまいましたが、ちょっと先週末に簡単なカウンターを必要だったので、土曜日にReact.jsを使って作ってみました。

作る

今回はFluxまでには手を付けず、コチラのスライドのデモを参考にさせていただきました。（Fluxっぽい作りにはなっていますが、Dispatcherの代わりに簡易的なEventEmitterを噛ませているようです。）

後は、キーボードのイベント追加したり、効果音を鳴らしたりする処理を加えたりと、大きな機能変更はしていなかったりするので、実はそこまで書くことが無かったりします…。

~~ということで、出来上がったものがコチラ。~~
（アクセス時に名前の入力が求められます。）

8×8 ドットのフリーフォント「美咲フォント」をインストールしているPCで閲覧していただくと、さらに某RPGっぽい雰囲気が感じられると思います。

JavaScriptの中にHTML書くのはちょっと気持ち悪いですが、JSX楽しいです。

ただ、まだ参考にしたデモから追記をした程度なので、詳しい部分が理解できておらず具体的な説明などやポイントまでは書くことが出来ませんが、次回は1から書いてみて、Fluxにも手を出してみたいなぁと思います。

またちなみにですが、実際に使った現場ではまさにそのまんま某RPGっぽい画像とSEを集めてきましたが、版権的にやはりちょっと怖いので、今回のデモは差し替えています。