なでしこさんで跳が跳ねる
今週は、2日に1本くらいQiitaの記事を書けた。
しかし、その代償なのか、またもやnoteは書けなかった。
しょうがないですね。今日も元気に雑プログラムで繋ぐよ。
今回は、早めにネタを思いついて、それを大枠としてはそのまま採用した。
今回やったこと
なでしこで、「跳」の字を跳ねさせる。
プログラム
跳が跳ねる (プログラム貯蔵庫)
ポイント
画面の用意
枠は「DIV」のDOM部品作成。
それに{
"幅": "25em",
"高さ": "15em",
"border": "1px solid currentColor",
"position": "relative",
}をDOMスタイル一括設定。
それにDOM親要素設定。
跳は「跳」のラベル作成。
それに{
"文字サイズ": "200%",
"position": "absolute",
"top": "20px",
"left": "50px",
}をDOMスタイル一括設定。「跳」がその中で跳ねる枠と、跳ねる「跳」を用意する。
枠の大きさの取得と、状態の用意
定数の左端は0。
定数の右端は枠$clientWidth－跳$clientWidth。
定数の上端は0。
定数の下端は枠$clientHeight－跳$clientHeight。枠の大きさと「跳」の大きさをもとに、枠の端の座標を取得する。
変数のxは0。
変数のyは上端＋(下端－上端)×0.2。
変数のsxは80。
変数のsyは0。
定数のgは250。「跳」の位置 (x, y)、速度 (sx, sy)、y方向の加速度 g を用意する。
状態の更新
変数の前回描画時刻は時間ミリ秒取得。経過時間に応じて状態を更新するため、前回更新を行った時刻を保存できるようにする。
●更新とは
定数の現在時刻は時間ミリ秒取得。
定数の経過時間は(現在時刻－前回描画時刻)÷1000。
前回描画時刻は現在時刻。前回の更新からの経過時間を秒単位で取得する。
xをsx×経過時間だけ増やす。
もし、x＜左端ならば
xは左端－x。
sxは－sx。
違えば、もし、右端＜xならば
xは右端－(x－右端)。
sxは－sx。
ここまで。横方向の移動処理を行う。
端をオーバーしていたら、反射させ、位置を補正する。
もし、下端＜y＋sy×経過時間ならば
定数の到達時間は(下端－y)÷sy。
定数の到達後時間は経過時間－到達時間。
syをg×到達時間だけ増やす。
syは－sy。
yは下端＋sy×到達後時間。
syをg×到達後時間だけ増やす。
違えば
yをsy×経過時間だけ増やす。
syをg×経過時間だけ増やす。
ここまで。縦方向の移動処理を行う。
今回の移動を行った結果下端を越えるようであれば、まず下端まで移動させ、反射させてから反射後の移動を処理する。
下端を越えないようであれば、位置と速度をそれぞれ速度と加速度に従って変化させる。
もし、y＜上端ならば
yは上端。
syは0。
ここまで。理論上は最初に落ち始めた場所までしか上がらないはずなのに、計算精度が悪いためか、なぜかどんどん跳ねる高さが高くなり、すぐに上端を越えてしまった。
そこで、天井にぶつかったらそこで止まるようにする処理を入れ、ごまかした。
跳に{
"top": 「{y}px」,
"left": 「{x}px」,
}をDOMスタイル一括設定。「跳」の移動後の新しい位置を、表示に反映させる。
{関数}更新を画面更新時実行。
ここまで。ちょうどいいタイミングで、次の更新が行われるようにする。
更新。最初の更新を行う。
おわりに
なでしこで、「跳」を跳ねさせることができた……？
面倒なので、とりあえずはなぜかどんどん跳ねる高さが高くなっていく不具合を抱えたまま提出する。
今回は、「回が回る回」に続く文字動作シリーズの第2弾だった。
このシリーズ、これからもstreak繋ぎに活躍してくれるかな……？
あとは、アドベントカレンダー化する案も……？
コメント