前回のflashcast：フリーで働くITエンジニア集団のブログ: jQueryを使って、htmlとcssを分離するようにjavascriptも分離してみる（Design完成編）の続きです。
javascriptを完成させましょう。
ていうかまあ、作っちゃってあるので、簡単にポイントを解説していきます。
まずは、定数と、変数の定義です。
jQuery(function($){
var MAX_BLOCK = 64;
var MAX_COL = 4;
var MAX_PAT = 6;
var FADE_TIME = 1500;
var bonus = [
0,
100,
500,
5000,
10000,
50000,
100000,
500000,
1000000,
1500000,
2500000,
5000000,
9999999
];
var player = {
hi:0,
sc:0,
hit:0,
point:0,
bonus:0,
total:0,
pow:0
};
この辺は、みたまんまですね。
次に、メインルーチン
init();
start();
init()で初期化した後、start()でゲームを開始します。
ゲームオーバーになった後は、RESTARTボタンを押すことで、再度start()が呼ばれて、ゲームが始まる仕組みです。
今回は、単純なゲームなので、画面全体の流れなどは管理していません。
その分、ソースが短くなっている代わりに理解が難しいかもしれませんが、順番に見ていきましょう。
init()では、最初にだけ必要な設定をします。
個々のタイトルを設定し、RESTARTボタンにstart関数をひもづけます。
また、ハイスコアを初期化します。
function init(){
$("#hi_score_title").text("HI-SCORE");
$("#score_title").text("SCORE");
$("#hit_title").text("HIT");
$("#point_title").text("POINT");
$("#bonus_title").text("BONUS");
$("#total_title").text("TOTAL");
$("#pow_title").text("POWER:");
$("#restart").click(start);
player.hi = 0;
}
start()では、開始処理を行います。
RESTARTボタンを非表示にして、メッセージエリア（GAME OVERの文字）を消します。
また、ブロックをいったん全部削除して、追加し直します。
その後、slideDownを使って、ブロックを表示するエリアをアニメーションで表示します。
アニメーションが終わったら、点数などを初期化し、各ブロックのクリックイベントに、removeBlockを設定します。
function start(){
$("#restart").hide();
$("#message").text("");
$("#view").hide();
$("#view .block").remove();
while($("#view .click").length < MAX_BLOCK){
addBlock();
}
$("#view").slideDown(
FADE_TIME,
function(){
player.sc = 0;
player.pow = 10;
player.hit = 0;
player.bonus = 0;
putScore();
$("#view .click").live("click", removeBlock);
}
);
}
点数表示関数です。powerについては、※を連続で表示しています。
function putScore(){
var p = '';
for(var i=0;i < player.pow; ++i){
p = p + '※';
}
$("#hi_score").text(player.hi);
$("#score").text(player.sc);
$("#hit").text(player.hit);
$("#point").text(player.point);
$("#bonus").text(player.bonus);
$("#total").text("+" + player.total);
$("#pow").text(p);
}
ブロック追加関数です。
色、種類を乱数で求めて、それをclassとしてブロックを作成しています。
function addBlock(){
var col = Math.floor(Math.random() * MAX_COL) + 1;
var pat = Math.floor(Math.random() * MAX_PAT) + 1;
var el = $(document.createElement("div")).addClass("block click color" + col + " pattern" + pat).text(pat);
$("#view").append(el);
$.data(el.get(0), "tono_param", {col:col, pat:pat});
$(el).hide().fadeIn(
FADE_TIME,
function(){
if($(this).attr("style")){
$(this).removeAttr("style");
}
}
);
}
個々のブロックがクリックされたときに呼ばれる関数です。
点数を計算し、同じ色または同じ種類のブロックを削除します。
また、powerがなくなったら、ゲームオーバーの処理を行います。
function removeBlock(){
var param = $.data($(this).get(0), "tono_param");
player.hit = $("#view .click.color" + param.col + ", #view .click.pattern" + param.pat).length;
if (player.hit !== 0) {
player.bonus = bonus[Math.floor(player.hit / 5)];
player.point = player.hit * 100;
player.total = player.point + player.bonus;
} else {
player.bonus = 0;
player.point = 0;
player.total = 0;
}
player.sc = player.sc + player.total;
if(player.hi < player.sc){
player.hi = player.sc;
}
player.pow = player.pow - 1;
if(player.pow === 0){
$("#view .click").die("click", removeBlock);
$("#message").text("GAME OVER");
$("#restart").show();
}
putScore();
$("#view .click.color" + param.col + ", #view .click.pattern" + param.pat).removeClass("click").fadeOut(
FADE_TIME,
function(){
$(this).remove();
if($("#view .click").length < MAX_BLOCK){
addBlock();
}
}
);
}
});
プログラムの解説は、こんな感じです。
実際に作成したものに、cssの枠組みを組み合わせたのは
jQuery Block Braker Sample
になります。
※block.htmlを選択してください。
このままでも、一応動作が試せると思います。
同様に、cssの途中版と組み合わせたのが
jQuery Block Braker Sample
になります。
※block.htmlを選択してください。
最後に、cssの完成版と組み合わせた完成版が
jQuery Block Braker Sample
になります。
※block.htmlを選択してください。
今回、html+cssのほうを先に作り、javascriptを後に作りましたが、実際の開発では、先に進行しているほうがどんどん最新バージョンを相手に渡す感じになります。
その場合の、組み合わせを
jQuery Block Braker Sample
においてみました。
どの組み合わせでも、ちゃんとページとして成立しているのが分かると思います。
実際、ここまでうまくいくかは微妙ですが（HTMLの修正があると、前バージョンでの組み合わせは難しい）、デザインとjavascriptを分離することによって、並行に開発できるのが理解していただけたでしょうか？
このあとは、無駄な部分を削ったり、微調整をした後に、最終版でテストをして、納品という形になります。
今回の最終版は、
jQuery Block Braker Sample
になります。
よかったら、遊んでみてください！
