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

Facebookが開発を行っているReact.jsを勉強しておきたいなぁと思っていながら大分経ってしまいましたが、ちょっと先週末に簡単なカウンターを必要だったので、土曜日にReact.jsを使って作ってみました。 作る 今回はFluxまでには手を付けず、コチラのスライドのデモを参考にさせていただきました。(Fluxっぽい作りにはなっていますが、Dispatcherの代わりに簡易的なEventEmitterを噛ませているようです。) 後は、キーボードのイベント追加したり、効果音を鳴らしたりする処理を加えたりと、大きな機能変更はしていなかったりするので、実はそこまで書くことが無かったりします…。 ということで、出来上がったものがコチラ。 (アクセス時に名前の入力が求められます。) 8×8 ドットのフリーフォント「美咲フォント」をインストールしているPCで閲覧していただくと、さらに某RPGっぽい雰囲気が感じられると思います。 雑感 JavaScriptの中にHTML書くのはちょっと気持ち悪いですが、...

three.jsを少し触ってみたのでテクスチャを利用する際のメモ

次世代Canvasとも言える、WebGLを簡単に扱うことができる、three.jsを少しだけ触ってみたのでメモです。 インストールから初期設定、簡単なサンプルの実行までは、既に詳細に分かりやすく説明されている記事がありますので、そちらをご覧頂ければと思います。 ※「THREE.CubeGeometry」は「THREE.BoxGeometry」に名称変更されている様なので注意。 画像をテクスチャとして貼る 画像をテクスチャとして貼る場合は、「THREE.ImageUtils.loadTexture」で読み込んで、Materialに貼り付けます。 // 立方体を用意 var geometry = new THREE....

ローカルファイルをブラウザにドラッグするJavaScriptを試してみた

随分前からある機能ですが、今更ながら調べてみて自分にとって使いやすいライブラリとして用意したのでメモしておきます。 仕様について どうせやるならウィンドウ全体に出来ると良いよね、ということでGmailとかWodPressとかみたいに、ウィンドウの何処でもいいのでドラッグ出来るような方法でやってます。 処理としては単純で、下記の通りです。参考にさせていただいたのはコチラ、感謝です。 画面全体を覆う空のdiv(マスク)を用意して、最初は非表示にしておく bodyに対してdragoverイベントを付与、マスクにはdragleave、dropイベントを付与 dragoverイベント発火時にマスクを表示 dragleave、dropイベント発火時にはマスクを非表示 という方法を取れば、ローカルファイルをブラウザ内にドラッグした時にマスクが表示されて次の工程のイベントが発火出来る状態になるので、ウィンドウ全体でドロップできるようになります。 オレオレライブラリ ライブラリ全体はGistにアップしてあります。 使い方はこんな感じ。...

TickTack.js - requestAnimationFrameをもうちょっと使いやすいモノにしてみた

以前に「setTimeoutの代替関数?requestAnimationFrameを試してみた」という記事を書きましたが、ちょっと実行時間に狂いが激しかったので、色々と試してみてラッパークラスを作ってみたのでメモ。 改善点 ある程度FPSに近づける→FPSの実行回数に近づける 以前のデモだと実はIE8非対応だったのですが解消 使い方 <script src="path/to/TickTack.js"></script> <script&...