もぐらたたきっぽいゲーム - jQuery入門
目次
- jQuery入門
- jQueryのインストール・簡単な使い方
- クイズゲームの作り方
- 秘密の暗号を作ってみよう（たぬき暗号）
- アクションゲームを作ってみよう（ぬりかべ）
- 画像を使ったジグソーパズルを作ってみよう
- もぐらたたきっぽいゲーム
- ドラッグ可能なポップアップウインドウを作ろう
- jQuery UI Sortableで１ラインオセロゲーム
- ブラウザ全体をブロックしてみる
- Geolocation APIを使って都道府県のセレクトボックスを現在地に近い順にソートする
- 発生したイベントの状態を保持・保存する6つのパターン
- Ajaxを利用したシンプルなイメージギャラリーを作ってみる
- テーブルにページ送り（ページング）を実装してみる
- jQuery UI Draggableを使って付箋(sticky)を作ってみる
- カラムでソートできるテーブルを自作してみる
- テーブルを使ったシンプルなドット絵エディタを作ってみる
- iPhoneのようにマウスではじいてスクロール（フリックスクロール）を実装してみる
- テキストフィールドの数値をマウスの上下移動で増減する
- iPhoneのように大きい画像の表示領域をマウスのドラッグで移動してみる
- iPhoneのように画像をダブルクリックした地点を中心に拡大縮小する
- リアルタイムプレビュー付きのHTMLエディタを作ろう
- 保存できる付箋を作ってみる(Cookie、localStorage）
チェックボックスたたき
jQuery入門の第７回目です。今回のゲームは画面上を複数のチェックボックスが浮遊しているので、それを素早くチェックする、というものです。チェックボックスというのは動かないと相場が決まっているので、動くとそれだけで異様な感じがして面白いかもです。実行結果
画面上を浮遊する全てのチェックボックスをチェックすると、クリアするまでに経過した時間が表示されます。チェックボックスたたきのソース
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<title>チェックボックスたたき</title>
<script>
$(function() {
$('a').click(function() {
var NUM = 5; // チェックボックス数
var SIZE = 200; // ステージの大きさ
var count = 0; // 現在チェックされている数
var st = new Date().getTime(); // 開始時間
$('body').empty();
// チェックボックスの新しい位置を返す。
function newPos() {
return {
left: Math.floor(Math.random() * SIZE),
top: Math.floor(Math.random() * SIZE)
};
}
// チェックボックスの生成・アニメーションの設定
for (var i = 0; i < NUM; i++) {
$('<input type="checkbox">')
.appendTo('body')
.css('position', 'absolute')
.css(newPos())
.each(function() {
$(this).animate(newPos(), 3000, arguments.callee);
});
}
// チェックボックスが押されたときの処理
$('input').click(function() {
$(this).stop().attr('disabled', 'disabled');
var t = (new Date().getTime() - st) / 1000;
if (++count >= NUM) alert('クリア！所要時間：' + t + '秒');
});
return false;
});
});
</script>
</head>
<body>
<a href="#">素早く全てクリックするのだ！</a>
</body>
</html>
プログラムの解説
レキシカル変数
$('a').click(function() {
var NUM = 5; // チェックボックス数
var SIZE = 200; // ステージの大きさ
var count = 0; // 現在チェックされている数
var st = new Date().getTime(); // 開始時間
aタグのclickイベント関数上部に、変数がいくつが定義してあります。普通、関数内で定義したローカル変数は関数の実行が終了すると消えてしまいますが、JavaScriptの場合はレキシカル変数と言って、関数内に定義した関数（例えばnewPosや$(‘input’).click）からは親関数が終わったあとでも参照・変更できます。変数stはチェックボックスの全てのチェックが完了するまでの時間を計るため、ゲーム開始時の時間を保存しています。「new Date()」によって日付と時刻を表すDateオブジェクトを現在時刻で生成し、getTimeメソッドでその時刻をミリ秒で取得しstに代入しています。
チェックボックスの新しい位置をランダムで決める
function newPos() {
return {
left: Math.floor(Math.random() * SIZE),
top: Math.floor(Math.random() * SIZE)
};
}
チェックボックスの位置をランダムで生成してCSSのleft,topプロパティの値として返す関数です。今回、「チェックボックスの最初の位置決め」「次のアニメーション用の位置決め」の２箇所でleft,topプロパティを設定しなければいけない部分が出てくるので関数にしてみました。戻り値は「{left: xxx, top: xxx}」という連想配列の形式です。コロンの前が配列のキー、コロンの後ろが値となります。「Math.floor(Math.random() * SIZE)」は、0以上SIZE未満の整数を得ます。
チェックボックス生成＆アニメーション設定
for (var i = 0; i < NUM; i++) {
$('<input type="checkbox">')
.appendTo('body')
.css('position', 'absolute')
.css(newPos())
.each(function() {
$(this).animate(newPos(), 3000, arguments.callee);
});
}
この部分でチェックボックスの生成と、アニメーションの設定をまとめて行なっています。「$('<input type="checkbox">')」この書式でHTML文字列からDOMエレメントを生成し、appendToメソッドでbody要素に追加しています。さらにメソッドチェーンを繋げてCSSの設定とアニメーションの設定を一気に行なっています。eachはjQueryオブジェクトにそれぞれに対して、順番に関数を実行するものなのですが、今回はオブジェクトがひとつしかないのでeachの意味はありません。他にうまい書き方が思いつかなかったものですみません。
「arguments.callee」は実行している関数自体を指します。匿名関数の再帰処理などでよく使われます。ここではアニメーションが終わった後に自分自身を再度呼び出してアニメーションを繰り返します。
チェックボックスがチェックされたときの処理
$('input').click(function() {
$(this).stop().attr('disabled', 'disabled');
var t = (new Date().getTime() - st) / 1000;
if (++count >= NUM) alert('クリア！所要時間：' + t + '秒');
});
各チェックボックスがチェックされたときに呼ばれる部分です。まずstop()でチェックボックスのアニメーションを止め、attrメソッドでチェックを出来なくしています。
その後現在時刻からゲーム開始時刻を引いて所要時間を割り出しています。
return false;
最後のこの行は、aタグのデフォルトの動作（href="#" にジャンプ）を無効にしています。まとめ
- レキシカル変数の使い道。
- JavaScriptの連想配列（ハッシュ）は強力。jQueryの引数で連想配列を渡すものが沢山ある。
- arguments.calleeは現在呼ばれている関数自体を指す。
ツイート
そっか0