横沢電鉄幕回しシミュレータ

2020.12.29公開

遊び方

①モニタ装置風の画面から種別と行先を指定してください。
②「設定」を押してください。方向幕が動き始めます。
③方向幕が回り切ると再度「設定」できるようになります。

注意

ときどき幕が止まったままになったり、動いたままになったりします（原因不明）。そういうときは再読み込みをしてください。

動作確認済ブラウザはEdge 87、Chrome Mobile。
IEやスマホ独自のブラウザでは正しく表示されない場合があります。

動作の仕組み

＜javascriptで幕回しをする＞
動作の肝になるのはrequestAnimationFrameメソッドによる関数の再帰呼び出しです。このメソッドは（スペックが許すなら）1秒間に60回関数を呼び出してくれるというもので、呼び出し関数の中に描画命令を仕込むことで簡単に60fpsアニメーションを実現できるようになります。
ただし実際には「表示している画像を消す→位置を変えてまた描く」ということをしており、DOM操作と画像描画を伴う重い処理なのでコマ落ちすることがあります。スマホ等でもぬるぬる動かすにはまだ工夫の余地がありそうです。

対照表

©エンゼシアの架空鉄道 トップページ