2007/08/15
逃げるゲーム with jQuery
jQueryを少し触ってみた。いろいろと試しながら遊んでいたらなんだかゲームっぽいのができた。
マウスで逃げて下さい。
使用されている画像は、弊社製品AirOneにおける『ミーティング』を示す画像と、『出欠の返事がまだですよ!』を示す画像です。
自分的にはこの画像に追われるのは慣れっこですが、精神的にくるものがあります。
AirOneでもこんな感じに、画像が追ってきて捕まったら出欠返信フォームが自動的に開いてしまうような機能をつけるといいのかも。
ソース.
なにかの参考になるかもしれません。
簡単な解説
jQueryはある要素にアニメーションをどんどん追加しても、自動的に順番待ちしてくれる。
順番待ちのfunctionはElement.queue.fxの中に入れられるようだ:
var daaaaaah = function(){ $('#hoge').animate({ left:0 }) };
$('#hoge').animate({ left:100 }, daaaaaah); // -> 1
$('#hoge').animate({ left:200 }); // -> 2
$('#hoge').animate({ left:300 }); // -> 3
上記が実行される順番は『1、2、3、daaaaaah』である(daaaaaahは1のコールバック)。
1のアニメーション中、2と3は$('#hoge')のキューに入り順番待ち。
1が終わるとdaaaaaahがキューに登録され、2が実行される。
このゲームはこのキュー待ちを利用している。全ての敵は自分のマウスの軌跡を追ってくるが、
キュー登録の間隔がアニメーションの間隔よりも短い敵はワンテンポ遅れて追ってくる。
また、速く逃げるほど速く追ってくるので、マウスの移動量(=onmousemoveの回数)をScoreにしてみました。
Levelは敵の数です。
その他のポイント
- animateでleftやtopをアニメーションさせたいとき、初期値を指定しておかないとIE7でエラー?
- ゲームオーバーの判定は、全ての敵にonmouseoverイベントを設定してしたいとこだが、
- ただIE7でマウスを全く動かさなかった場合、子要素が勝手にマウスの下に潜り込んでもイベントは発生しなかった(裏技)
- 『マウスの移動量 = onmousemoveの回数』って計算はよくないっぽい。速く移動すればmousemoveイベントはすっ飛ばされる。
- 初めてのjQuery、どういう書き方をしたら読みやすいかわからなかった。インデントは多めが吉。
- Category(s)
- JavaScript
- jQuery
- The URL to Trackback this entry is:
- http://dev.ariel-networks.com/Members/hamabe/9003308b30fc30e0-with-jquery/tbping