今回はオブジェクト指向を少し取り入れてみました。敵車の移動方法を新たに作成しmoveメソッドとして割り当てることで他の車とは異なる動きにすることもできます。昔のレースゲームでは、なぜか道路に落とし穴があったり、岩が障害物として用意されていたりしていました。このような新たな障害物も出てくるようにしてみるのもよいでしょう。
＊なお、このプログラムは自由に改造して配布しても問題ありません。適当にプログラム書き換えて楽しんでください。
完成したプログラムコード
<!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>SimpleRace</title>
<style type="text/css"><!--
body { background-color: #000000; background-image:url(images/bg.gif) }
#gameForm { position:absolute; left:50px; top:170px; z-index:10; }
#gameForm input { font-size:24pt; z-index:10; }
#score { position:absolute; left:30px; top:2px; color:#000000; }
#mycar { position:absolute; left:160px; top:260px; color:#ffffff; }
--></style>
<script type="text/javascript"><!--
// ===============================================
// 初期設定
// ===============================================
var myCarW = 24; // マイカーの横幅
var myCarX = 160; // マイカーのX座標
var enemyCarW = 24; // 敵車の横幅
var bgY = 0; // 背景画像のY座標
var enemy = []; // 敵車の情報を入れる配列
var maxCar = 4; // 移動させる敵の車の最大数
var carLimit = 20; // 敵車の出現最大数
var enemyCounter = 0; // 敵車を出現させるカウンタ
var score = 0; // スコア
// ===============================================
// マイカーの位置を設定するためのイベントを設定
// ===============================================
window.addEventListener("load", function(){ // ページ内容が読み込まれたらイベントを設定
document.addEventListener("touchmove", function(){
event.preventDefault(); // デフォルトのイベントを禁止する
myCarX =event.touches[0].pageX - myCarW / 2; // タッチされた横位置を取得しマイカーのX座標とする
if (myCarX < 16) myCarX = 16; // 一定以上左に行かないようにする
if (myCarX > 280) myCarX = 280; // 一定上右に行かないようにする
document.getElementById("mycar").style.left = myCarX; // 自機を指定したX座標に表示する
}, false);
});
// ===============================================
// 敵車を生成する
// ===============================================
function createEnemy(eID){
this.x = Math.floor(Math.random() * 280) + 20;
this.y = Math.random() * -100 - 24; // 最初の位置
this.move = moveEnemy; // 移動処理を行う関数名
this.dx = Math.random() * 3 - 1;
this.dy = Math.random() * 10 + 4;
this.id = eID; // 敵車のID
var imgObj = document.createElement("img");
imgObj.id = eID;
imgObj.src = "images/enemy.gif";
imgObj.width = enemyCarW;
imgObj.height = enemyCarW;
imgObj.style.position = "absolute";
imgObj.style.left = this.x;
imgObj.style.top = this.y;
document.body.appendChild(imgObj);
}
// ===============================================
// 敵車を移動させるための関数(メソッド)
// ===============================================
function moveEnemy(){
this.x = this.x + this.dx;
this.y = this.y + this.dy;
var img = document.getElementById(this.id);
img.style.left = this.x;
img.style.top = this.y;
if (this.y > 360) {
this.x = Math.floor(Math.random() * 280) + 20;
this.y = -24;
this.dx = Math.random() * 3 - 1;
this.dy = Math.random() * 16 + 4;
enemyCounter++;
enemyCounter = enemyCounter & 15; // 16台追い越したら1台増やす
if (enemyCounter == 0){
if (maxCar < carLimit){
enemy[maxCar] = new createEnemy("car"+maxCar);
maxCar++;
}
}
}
// マイカーとの接触判定
if ( (this.y > 260) && (this.y < 284) && ((this.x + enemyCarW) > myCarX) && (this.x < (myCarX + myCarW)) ) {
alert("どか～ん！ ゲームオーバー！");
gameFlag = false;
clearInterval(timerID); // タイマー処理を終了
document.getElementById("gameForm").style.visibility = "visible";
}
}
// ===============================================
// ゲーム開始時に敵車を生成
// ===============================================
function startEnemy() {
for (var i=0; i<carLimit; i++) {
enemy[i] = null; // 全ての敵車を消す
var img = document.getElementById("car"+i);
if (img != null) {
img.style.top = -100; // 画面外に移動させておく
}
}
for (var i=0; i<maxCar; i++){
enemy[i] = new createEnemy("car"+i);
}
}
// ===============================================
// 全ての敵車を移動
// ===============================================
function moveAllEnemy() {
for (var i=0; i<maxCar; i++){
enemy[i].move();
}
}
// ===============================================
// 背景を移動
// ===============================================
function moveBG(){
bgY = bgY + 16; // 16ピクセルごと背景画像を下に移動
bgY = bgY & 0x7f; // 128との論理積
document.body.style.backgroundPositionY = bgY;
score++;
document.getElementById("score").innerHTML = score + "点";
}
// ===============================================
// ゲーム開始
// ===============================================
function gameStart(){
document.getElementById("gameForm").style.visibility = "hidden";
maxCar = 4; // 最初の敵車の数
score = 0; // 0点
gameFlag = true; // ゲーム中であることを示すフラグをセットする
document.getElementById("score").innerHTML = "0点";
startEnemy();
timerID = setInterval("moveBG();moveAllEnemy();", 20); // 20ミリ秒ごとに処理するようにタイマーを設定
}
// --></script>
</head>
<body>
<div id="score">0点</div>
<form id="gameForm">
<input type="button" value="ゲーム開始" ontouchstart="gameStart()" onclick="gameStart()">
</form>
<img id="mycar" src="images/mycar.gif" width="24" height="24">
</body>
</html>
