今回はおおまかなアバターの位置と制限時間で使うステータスバーを作る作業です。モックでは右にキャラクターが縦に５人並びます。 ステータスバーは少し難しかったため先輩に教えて頂きながらやりました。
アバターはとりあえず適当な画像を５枚用意し、それを右に寄せ、縦に並べるといった感じで作業を進めました。 この辺りはモック作りを練習した際に似たようなことをやっていたので、floatやmargin、paddingを使いながら調節していき並べる事ができました。 floatを使ったらclearすることを忘れないように！
このモックは釣りゲームのため、魚がhitし、魚をタッチするたびに魚のメーターが減っていくという物を作るので、「クリックされたら メーターが減る」というプログラミングを作る必要があります。先輩から簡単だから作ってみなと言われたので挑戦することに。一応調べて挑戦は するものの、プログラミングを分かってない自分にはやはり難しい。どうやらjavascriptを使えばできるみたいなのですが,jqueryを使えば簡単みたいなのでjquery を使ってやってみるものの、jquery自体やったことがなかったので 撃沈状態に。。すると魔法使いであるS先輩がたったの１分ぐらいで書いたプログラムが以下になります。
$(document).ready(function(){
$("#").click(function(){
aniani();
});
});
function aniani(){
$("#").animate({
width:'-=10'
},500,function(){});
}
先輩はこのプログラムをあっという間に書いてしまったのです。これを実行してみると下のサンプルのようになります。
黒い部分をクリックしてみてください。
クリックした時にバーが減っていくのが分かるかと思います。すごいなぁと感動しつつプログラムを解析してみました。
まず、$(document).readyの部分はページが読み込まれた時という意味です。
次の$("#").clickの部分は指定したidを呼び出し、それがクリックされた時となります。そしてaniani()を実行するようにしています。
function aniani(){はaniani()という関数を定義しています。ここで定義されたものが上の部分で実行されます。$("#").animate({の部分はwidth
が-10ずつ減りかつその減るスピードが0.5秒の速さで減っていく。というアニメーションを設定しています。
jqueryではこんな短いソースで簡単にプログラムを書くことができてしまうのです。
12月10日 宮本 勇