【canvas / JavaScript】壁に反射しつつげるボール

Pocket
LINEで送る

今更ながら、canvasを勉強中です。
前回に引き続き、canvasでやったことをつらつら書き残します。

作ったもの

See the Pen 【JavaScript】canvasの表示テスト5 by nkmrkisk (@rekid) on CodePen.

ひたすらに軌跡を残しつつ壁に跳ね返り続けるJavaScriptです。多分デキる人には恐ろしく簡単なのだと思います(四苦八苦しました。。。)

最初に移動速度をx,yで設定し、まずはひたすらにその移動速度を現在地に加算。加算。これで直線的な動きが実装できます。

次に、壁に到達した場合の処理を記述します。壁は、単純にエレメント(canvas)のサイズを流用しました。

現在地のx,yのどちらかが、canvasの幅or高さ以上に到達したらdirection(向き)を変更するように記述しています。

余談

出来上がったものと掛けた時間を鑑みて「先長いな〜。。。」という感想しかでないww

SNSでもご購読できます。