HTML5講習所

七転八倒(&&)四苦八苦、でも楽しい

WORK

ラグビーボールを追いかけて

2017/09/07

さて前回の続き、2つの画像が canvas の枠の中を動くソースを見つけてラグビーボールを私のおじんラガーアイコンが追いかけるものを作って自分のWEBサイトのTOPページに置こうと思いましたが枠から出るとなくなっちゃうので悪戦苦闘しておりました。

ソースを引っ張ってきてつなぎ合わせても自分流にカスタマイズすることは難しいので、参考の書籍とドットインストールの canvas 入門の動画を見て " canvas で画像を表示する、そしてその画像を動かす" ところからお勉強のし直しです。

ボールを持ったらとりあえず突っ込んじゃうので、毎度のことながら足踏みの連続ですよね。

初期値(最初に画像をおく座標)と画像の動く速度を設定するのですが、2つの画像なので Array を使い設定して、IF文では枠の上下左右の端に画像が来たときに反転する(速度に-1をかける)ところに留意してようやく完成となりました。

さて今度はこのスクリプトを "gengen33ドットコム” のTOPページに貼っけなくては。

うーーん。またここで苦労しそうだゾ。






-WORK
-