Personal tools
You are here: Home ブログ hamabe Categories jQuery
« December 2010 »
Su Mo Tu We Th Fr Sa
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31  
Recent comments
Re:コマンド入力を実装しよう inoue 2007-08-14
 
Document Actions

jQuery

Up one level

Document Actions

逃げるゲーム 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イベントを設定してしたいとこだが、
    document.onmouseoutを一つ設定することで済ます(子要素のmouseoverで親要素のmouseoutも発生する)
    • ただIE7でマウスを全く動かさなかった場合、子要素が勝手にマウスの下に潜り込んでもイベントは発生しなかった(裏技)
  • 『マウスの移動量 = onmousemoveの回数』って計算はよくないっぽい。速く移動すればmousemoveイベントはすっ飛ばされる。
  • 初めてのjQuery、どういう書き方をしたら読みやすいかわからなかった。インデントは多めが吉。


The URL to Trackback this entry is:
http://dev.ariel-networks.com/Members/hamabe/9003308b30fc30e0-with-jquery/tbping

Copyright(C) 2001 - 2006 Ariel Networks, Inc. All rights reserved.