【ハウツー】
iPhoneゲーム自作工房7 - ブロック崩しゲームを創る
3 完成したコード
古籏一浩
[2008/08/15]
最後に
かなりシンプルなブロック崩しなので改良の余地はたくさんあります。背景画像を用意してブロックも隙間なく敷き詰め、ブロックが壊されるたびに下に隠された画像が見えてくるようにするのもよいでしょう。ステージ制にして、ステージが進むにつれパドルのサイズが小さくなるようにし難易度を上げていく方法もあります。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>
関連記事
| iPhoneゲーム自作工房6 - ひとりで壁に向かってボールを打ち続けるゲーム [2008/8/7] |
| iPhoneゲーム自作工房5 - Googleマップ回転ゲームの作成 [2008/8/6] |
| iPhoneゲーム自作工房4 - iPhoneで反射神経を鍛えるゲームを作る [2008/8/4] |
| iPhoneゲーム自作工房3 - タッチポイントゲームを作成 [2008/8/1] |
| iPhoneゲーム自作工房2 - 隕石破壊ゲームの作成 [2008/7/30] |
| iPhoneゲーム自作工房 - iPhone用ゲームを手軽に作る [2008/7/28] |
新着記事
| 【レポート】マカフィーの世界の専門家の意識調査「サイバー防衛報告書」とセキュリティソリューション [21:15 5/25] |
| アップル、Aperture 3.2.4を公開 - バグ修正、安定性向上など [20:51 5/25] |
| 【レポート】GTC 2012 - VGXでエンタープライズ環境でのGPU需要開拓を狙うNVIDIA [20:07 5/25] |
| デル、期間限定キャンペーンに特価アイテム追加、アップグレード無料も継続 [19:41 5/25] |
| 上海問屋、iPhoneとほぼ同じ薄さのバッテリ内蔵ヘッドホンアンプ [19:05 5/25] |
特設サイトの情報
人気記事
一覧新着記事
|
【特集】クライマックス突入記念! 『Fate/Zero』の舞台裏に迫る!! [22:00 5/26] ホビー |
|
最もセクシーな男性「メン・オン・ファイア」21人をAARP誌が発表 [21:30 5/26] エンタメ |
|
【インタビュー】栗山千明 - ファンタジーという世界観だからできること [21:30 5/26] エンタメ |
|
ゲイリー・オールドマン、『ロボコップ』リメイク作品に科学者役で出演決定 [21:30 5/26] エンタメ |
|
ビースティ・ボーイズのマイクD、「アダムに一番美しい方法で嘘をつかれた」 [21:30 5/26] エンタメ |
サービス一覧
