今更ながら、canvasを勉強中です。
前回に引き続き、canvasでやったことをつらつら書き残します。
作ったもの
See the Pen 【JavaScript】canvasの表示テスト5 by nkmrkisk (@rekid) on CodePen.
ひたすらに軌跡を残しつつ壁に跳ね返り続けるJavaScriptです。多分デキる人には恐ろしく簡単なのだと思います(四苦八苦しました。。。)
最初に移動速度をx,yで設定し、まずはひたすらにその移動速度を現在地に加算。加算。これで直線的な動きが実装できます。
次に、壁に到達した場合の処理を記述します。壁は、単純にエレメント(canvas)のサイズを流用しました。
現在地のx,yのどちらかが、canvasの幅or高さ以上に到達したらdirection(向き)を変更するように記述しています。
余談
出来上がったものと掛けた時間を鑑みて「先長いな〜。。。」という感想しかでないww