めも

2年生

JavaScriptでドット絵インコを歩かせる

ドット絵が好きなので書いてみました。
f:id:ktlcs517:20160928004742g:plain
なかなかの力作!(所要時間:3分)
せっかくなのでJavaScriptで歩かせましょ!
f:id:ktlcs517:20160928004821g:plain
一歩踏み出し画像を用意しました。



歩いた~~^^
まず画像を格納した配列(imageUrl)と配列の要素の番号を表す変数(imageCount)を用意します。
そしてimageCountが0ならインクリメントしてimageCount[1]の画像のURLをセット、1ならその逆でimageCount[0]の画像のURLをセット。。という処理を0.5秒毎にしてます。


と、頑張ったのですがただ一定のテンポで画像を切り替えるだけならGIFアニメ作成した方が楽でした。
f:id:ktlcs517:20160928004827g:plain
www.bannerkoubou.com
上記サイトで一瞬で作れました。なんという。。


悔しかったので横に動かしました。

jQueryのanimateメソッドを使用しました。操作したい属性としてleftをセットして横に移動させています。
ちなみにleftは左方向ではなくx座標のことを指します。
leftに200px移動させたからrightに200px移動させよ~!とかすると、画面外に行ったまま帰ってきませんでした。。
また座標を対象とする場合は対象物のcssにpositionを設定する必要があります。


かなり簡単な動作だと思うのですがJavaScriptにあまり触れたことがなかったので苦労しました。じわじわレベルアップしていきたいです!
あと前回の記事のAPIと組み合わせて天気予報インコ作ってみたいです。
それではおやすみなさい~