Photo by
shiekasai
なでしこさんで降を降らす
今週は、Qiita の記事数稼ぎは「回が回る回」と「Hello World あたたたた」の活躍で、そこそこ進んだ。
しかし、note は大変遺憾ながら書けなかった。
頭の良さが足りない。
というわけで、安定の雑プログラムでの繋ぎを行使。
今回も文字アクションシリーズで。
今回やったこと
なでしこで、「降」を降らす。
面倒なので、「画面更新時実行」と時刻による管理ではなく、昔ながらのフレーム単位での制御を採用した。
プログラム
降を降らす (プログラム貯蔵庫)
ポイント
画面と文字のサイズを決める
横幅は400。
縦幅は240。
文字サイズは20。画面として用いる領域と、そこに降らせる文字のサイズをピクセル単位で用意する。
画面を用意する
「DIV」のDOM部品作成。
それに{
"position": "relative",
"width": "{横幅}px",
"height": "{縦幅}px",
"border": "1px solid currentColor",
"overflow": "clip",
}をDOMスタイル一括設定。
それにDOM親要素設定。画面として用いる領域を用意する。
降を降らせる
進行中は空配列。降っている「降」の情報を管理する配列を用意する。
1/60秒毎には各「フレーム」の処理を行う。
もし、20の乱数が0と等しいならば
定数の新ラベルは「降」のラベル作成。
それに{
"position": "absolute",
"font-size": "{文字サイズ}px",
"left": "{(横幅－文字サイズ)の乱数}px",
}をDOMスタイル一括設定。
{
"部品": 新ラベル,
"位置": －文字サイズ,
"速度": 0,
}を進行中に配列追加。
ここまで。だいたい20フレームに1回、新しい「降」をランダムな位置に生成し、落とし始める。
表示用の部品と、管理用の位置と速度の情報を用意する。
進行中を反復
対象$位置を対象$速度だけ増やす。
対象$速度を0.1だけ増やす。
対象$部品の「top」に「{対象$位置}px」をDOMスタイル設定。
もし、対象$位置が縦幅超ならば
対象$部品をDOM部品削除。
ここまで。
ここまで。
進行中を配列フィルタには(E)
E$位置が縦幅以下を戻す。
ここまで。
進行中はそれ。
ここまで。今落ちている「降」の位置と速度を更新する。
数値を更新した後、表示用の部品の位置をそれに合わせて更新する。
さらに、「降」が画面の下端を過ぎたら、部品と管理情報を削除する。
おわりに
なでしこで、降を降らせることができた。
昔、Tonyu System でこんな感じで画像を降らせたこともあったっけな……。
降った後そのまま画面下に消えるのではなく、積もらせるようにしたことはあったかな……？
コメント