sfpgmr

three.jsのPathのシリアライズ(2)

エドワード・マイブリッジの「Horse in motion」をInkscapeでトレースし、各馬をセル化したものをthree.jsのshapeに変換し表示しています。

今回はシリアライズ・デシリアライズのコードを最適化してみました。 http://bl.ocks.org/sfpgmr/cee0c48acb0854e2055c#pathSerializer.js

下記のURLから動くデモが見れます。Windows 10 Tech Preview 9926 のIE11では動作しませんでした。ひょっとするとIE11ではそもそも動作しないのかもしれません。原因は不明ですが。。

http://bl.ocks.org/sfpgmr/cee0c48acb0854e2055c

sfpgmr

node_modules

sfpgmr

スクリーンサイズに合わせてゲーム画面を変更する

• three.jsでスクリーンサイズに合わせてゲーム画面サイズを変更する
• ゲーム画面はW 192 × H 256の昔のレトロのピクセル数
• ゲーム画面を保ったまま、スクリーンサイズにフィットさせる

sfpgmr

パドルを追加して、跳ね返るようにする

sfpgmr

ゲームとしての体裁を整えた

• 文字列表示・スコア表示を追加
• ES6ジェネレータによるゲームフローの実装

sfpgmr

難易度を徐々に上げていく

• ボールのスピードを上げていく

sfpgmr

Pointer Lock APIを使ってみる

• Pointer Lock APIを使って、マウスを占有してみた。
• ESCを押すとPointer Lockを停止します。
• EdgeではPointer Lock APIが未実装のため、Pointer Lockできません。
• iPhoneでは今のところ動作しません。理由は不明ですが、おそらくES6 Generatorを使っているせいだと思われます。

sfpgmr

パドルでボールをコントロールする

• 簡単なベクトル演算を行い、ボールを跳ね返す時のx軸をコントロールできるようにしてみる。
• まずはパドルの直近のx移動量(Δpx)をボールに反映するコードを追加してみる。アルゴリズムは以下の通り。

sfpgmr

パドルでボールをコントロールする（２）

• パドルでコントロールできるのは角度のみになるようにコードを修正

sfpgmr

効果音をつける

• 自作の波形メモリ音源を使って効果音をつける。

今のところ

• Chrome,Firefoxでは動作
• Edgeではabout:flagsにて「試験的なJavaScript機能を有効にする」にチェックを入れると動作する。またPointer Lockができない。