開始ボタンとスコア処理
まず、ゲームが開始されたら最初にゲーム開始ボタンを見えないようにします。これは、ゲーム開始ボタンが何度も押されないようにするためです。 今回はこれまで作成したゲームと異なりゲーム中かどうかのフラグはありません。ゲーム停止中でもパドルの操作が行えるようになっています。 あとは、スコアを0にしボールの位置と速度を設定します。実際にボールを移動させるためにインターバルタイマーを使ってボールを移動させる関数moveBall()を20ミリ秒ごとに呼び出します。
コード04
function gameStart(){
document.getElementById("gameForm").style.visibility = "hidden";
score = 0; // 0点
document.getElementById("score").innerHTML = "0点";
ballX = 10; // ボールのX座標
ballY = 10; // ボールのY座標
timerID = setInterval("moveBall()", 20); // 20ミリ秒ごとにボールを移動させるようにタイマーを設定
}
最後に
背景画像も何もないので気に入った画像などを貼り付けてみると雰囲気が変わるでしょう。また、ボールやパドルの画像やサイズも変更すると難易度が変わります。ある程度スコアが上がったらパドルのサイズを小さくする、もしくはボールのサイズを小さくする、ボールの移動速度を変化させるのもよいでしょう。パドルの当たった位置に応じて反射角度を変えるという方法もあります。このプログラムは高速化処理を行っていないので、最適化し全体の速度をアップさせるのも面白いかもしれません。
＊なお、このプログラムは自由に改造して配布しても問題ありません。適当にプログラム書き換えて楽しんでください。
完成したプログラムコード
<!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; }
#gameForm { position:absolute; left:50px; top:100px; }
#gameForm input { font-size:24pt; }
#score { position:absolute; left:4px; top:2px; color:#ffffff; }
#ball { position:absolute; left:10px; top:10px; 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 = 16; // ボールの横幅
var ballH = 16; // ボールの縦幅
var dx = 4; // ボールの横の移動量
var dy = 8; // ボールの縦の移動量
var padX = 1; // パドルのX座標
var padY = 280; // パドルのY座標
var padW = 48; // パドルの横幅
var padH = 16; // パドルの縦幅
// ===============================================
// パドルの位置を設定するためのイベントを設定
// ===============================================
window.addEventListener("load", function(){ // ページ内容が読み込まれたらイベントを設定
document.addEventListener("touchmove", function(){
event.preventDefault(); // デフォルトのイベントを禁止する
padX =event.touches[0].pageX - padW / 2; // タッチされた横位置を取得しパドルの座標とする
document.getElementById("pad").style.left = padX;
}, false);
});
// ===============================================
// ボールを移動させる
// ===============================================
function moveBall(){
ballX = ballX + dx; // ボールを横方向に移動させる
ballY = ballY + dy; // ボールを縦方向に移動させる
document.getElementById("ball").style.left = ballX; // ボールを指定したX座標に表示する
document.getElementById("ball").style.top = ballY; // ボールを指定したY座標に表示する
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;
score = score + 1;
document.getElementById("score").innerHTML = score+"点";
return;
}
}else{
if (ballY < 356) return; // 完全に画面に消えるまで動かす
clearInterval(timerID); // タイマーをクリア
alert("ゲームオーバー");
document.getElementById("gameForm").style.visibility = "visible";
}
}
// ===============================================
// ゲーム開始
// ===============================================
function gameStart(){
document.getElementById("gameForm").style.visibility = "hidden";
score = 0; // 0点
document.getElementById("score").innerHTML = "0点";
ballX = 10; // ボールのX座標
ballY = 10; // ボールのY座標
timerID = setInterval("moveBall()", 20); // 20ミリ秒ごとにボールを移動させるようにタイマーを設定
}
// --></script>
</head>
<body>
<div id="score">0点</div>
<form id="gameForm">
<input type="button" value="ゲーム開始" onClick="gameStart()">
</form>
<img id="ball" src="images/ball.gif" width="16" height="16">
<img id="pad" src="images/pad.gif" width="48" height="16">
</body>
</html>
