最後に
かなりシンプルなブロック崩しなので改良の余地はたくさんあります。背景画像を用意してブロックも隙間なく敷き詰め、ブロックが壊されるたびに下に隠された画像が見えてくるようにするのもよいでしょう。ステージ制にして、ステージが進むにつれパドルのサイズが小さくなるようにし難易度を上げていく方法もあります。iPhone 3Gの場合、インターバルタイマーの呼び出し間隔を短くしても、あまり処理速度の向上は見込めません。難易度を上げるにはスピード以外の部分で工夫する必要があります。
＊なお、このプログラムは自由に改造して配布しても問題ありません。適当にプログラム書き換えて楽しんでください。
完成したプログラムコード
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta name="viewport" content="initial-scale=1, user-scalable=no">
<title>ブロック崩し</title>
<style type="text/css"><!--
body { background-color: #000000; }
#gameScreen { position:absolute; left:0px; top:0px; width:320px; height:356px; }
#gameForm { position:absolute; left:50px; top:170px; }
#gameForm input { font-size:24pt; }
#score { position:absolute; left:4px; top:2px; color:#ffffff; }
#ball { position:absolute; left:10px; top:150px; color:#ffffff; }
#pad { position:absolute; left:4px; top:280px; color:#ffffff; }
--></style>
<script type="text/javascript"><!--
// ===============================================
// 初期設定
// ===============================================
var ballX = 10; // ボールのX座標
var ballY = 10; // ボールのY座標
var ballW = 8; // ボールの横幅
var ballH = 8; // ボールの縦幅
var dx = 6; // ボールの横の移動量
var dy = 4; // ボールの縦の移動量
var padX = 1; // パドルのX座標
var padY = 280; // パドルのY座標
var padW = 48; // パドルの横幅
var padH = 16; // パドルの縦幅
var blockFlag = new Array(); // ブロックの有無を示すフラグ
var blockX = new Array(); // ブロックのX座標
var blockY = new Array(); // ブロックのY座標
var blockW = 24; // ブロックの横幅
var blockH = 8; // ブロックの縦幅
var total; // ブロックの総数
var count; // 消したブロックをカウントするための変数
// ===============================================
// パドルの位置を設定するためのイベントを設定
// ===============================================
window.addEventListener("load", function(){ // ページ内容が読み込まれたらイベントを設定
document.addEventListener("touchmove", function(){
event.preventDefault(); // デフォルトのイベントを禁止する
padX =event.touches[0].pageX - padW / 2; // タッチされた横位置を取得しパドルの座標とする
document.getElementById("pad").style.left = padX;
}, false);
drawBlock(); // 雰囲気を出すためにブロックを描画する
});
// ===============================================
// ボールを移動させる
// ===============================================
function moveBall(){
ballX = ballX + dx; // ボールを横方向に移動させる
ballY = ballY + dy; // ボールを縦方向に移動させる
document.getElementById("ball").style.left = ballX; // ボールを指定したX座標に表示する
document.getElementById("ball").style.top = ballY; // ボールを指定したY座標に表示する
checkBlock(); // ブロックとの接触判定
if (ballY< 0) dy = -dy; // 上の壁に当たったら移動方向を反転する
if ((ballX < 0) || (ballX > (320-ballW))) dx = -dx; // 左右の壁に当たったら移動方向を反転
if (((ballY+ballH) > padY) && (ballY < padY + padH)){ // ボールがパドルのY座標を超えたら判定
if ( ((ballX + ballW) >= padX) && (ballX <= (padX + padW)) ) { // ボールがパドルに当たった
dy = -dy; // 移動方向を反転させる
ballY = padY - ballH;
return;
}
}else{
if (ballY < 356) return; // 完全に画面に消えるまで動かす
clearInterval(timerID); // タイマーをクリア
alert("ゲームオーバー");
document.getElementById("gameForm").style.visibility = "visible";
}
}
// ===============================================
// ブロックとの接触判定
// ===============================================
function checkBlock(){
for(var i=0; i<total; i++){ // ブロックの数だけ繰り返す
if (!blockFlag[i]) continue; // ブロックがない場合は繰り返しの先頭に戻る
if ( ((ballX + ballW) >= blockX[i]) && (ballX <= (blockX[i] + blockW)) &&
((ballY + ballH) >= blockY[i]) && (ballY <= (blockY[i] + blockH)) ) { // ボールがブロックに当たった
blockFlag[i] = false; // ブロックを消す
document.getElementById("blk"+i).style.visibility = "hidden"; // ブロックの表示も消す
dy = -dy; // 移動方向を反転させる
score = score + 1; // スコアを加算
document.getElementById("score").innerHTML = score+"点";
count++; // カウンタを増やす
if (count == total){ // 全てのブロックを消した
drawBlock(); // 再度ブロックを描画しゲームを継続する
}
}
}
}
// ===============================================
// ブロックを描画
// ===============================================
function drawBlock(){
var txt = "";
total = 0; // ブロックの総数を0にする
for(var j=0; j<5; j++){ // 縦5個
for (var i=0; i<9; i++){ // 横9個
var bx = i * 32 + 16; // 横の表示位置を求める
var by = j * 20 + 40; // 縦の表示位置を求める
blockX[total] = bx; // ブロックのX座標を配列変数に入れる
blockY[total] = by; // ブロックのY座標を配列変数に入れる
blockFlag[total] = true; // ブロックの存在を「有り」にする
txt += '<img src="images/block.gif" width="24" height="8" style="position:absolute;left:'+bx+'px;top:'+by+'px;" id="blk'+total+'">';
total++; // ブロック数を増やす
}
}
document.getElementById("gameScreen").innerHTML = txt;
count = 0; // カウンタをリセット
}
// ===============================================
// ゲーム開始
// ===============================================
function gameStart(){
document.getElementById("gameForm").style.visibility = "hidden";
drawBlock(); // ブロックを描画
score = 0; // 0点
document.getElementById("score").innerHTML = "0点";
ballX = 10; // ボールのX座標
ballY = 150; // ボールのY座標
timerID = setInterval("moveBall()", 20); // 20ミリ秒ごとにボールを移動させるようにタイマーを設定
}
// --></script>
</head>
<body>
<div id="score">0点</div>
<div id="gameScreen"></div>
<form id="gameForm">
<input type="button" value="ゲーム開始" onClick="gameStart()">
</form>
<img id="ball" src="images/ball.gif" width="8" height="8">
<img id="pad" src="images/pad.gif" width="48" height="16">
</body>
</html>
