めも

2年生

JavaScriptでたこ焼きを飛ばす

またJavaScriptです。JavaScriptドット絵の練習と息抜きを兼ねてます。
投稿するの恥ずかしいのですがせっかく頑張って作ったので投稿します。
前回の記事の要素を左右に動かす動作をレベルアップさせてみました。
どうレベルアップさせたかというと、動いている要素の位置を起点とした動く要素を追加できるようになりました???
とりあえず↓をResultタブに切り替えてボタンクリックしてください!

appendメソッドでimgタグ(たこ焼き)を追加してからcssメソッドで属性を追加しています。
このとき、ボタンを押下したときのタコの位置(top)をたこ焼きのtopに設定してます。これでタコと同じ高さにたこ焼きが表示されます。
そしてanimateメソッドで横に移動するようにしています。たこ焼きを残したままにするとなぜかバグるので移動し終わったタイミングで消すようにしてます。
これでボタンを押下するとタコからたこ焼きが発射されるようになります。

タコ画像の背景が透過されてなかったり連打するとバグったり連射できなかったり詰めが甘々なのでそのあたりが課題ですね。

使用しているエディタはatomなのですが、特にパッケージも追加してないので書いてて手探り状態でしんどいです。でもデベロッパーツールがいるから頑張れます。
とりあえず環境整えてからまたやろうと思います~~月末ハロウィンなのでそれっぽい何か作りたいですね。

f:id:ktlcs517:20161003231400g:plain
顔の輪郭に影をつけました。前よりほんのり進化?