背景画像を変えたい場合には表示する航空写真の座標値が入っている変数area内の文字列を変更してください。また、要素の数に応じて自動的に処理するようになっているので、好きな数だけ増やしたり減らしたりすることができます。いろいろな場所を飛行させてみるのもよいでしょう。また、オリジナルの画像を使いたい場合には以下の行に表示したいURLを指定してください。変数gmapPrefやgmapPostの内容を変更して対処することも可能です。
document.body.style.backgroundImage = gmapPref + area[areaCount] + gmapPost;
このプログラムは自由に改造して配布しても問題ありません。適当にプログラム書き換えて楽しんでください。
完成コード
★★★★★の部分には取得したグーグルマップのキーを入れてください
<!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>GMshot</title>
<style type="text/css"><!--
body { background-color: #000000; background-image:url(images/title.jpg) }
#gameScreen { position:absolute; left:0px; top:0px; width:320px; height:356px; }
#gameForm { position:absolute; left:50px; top:270px; z-index:10; }
#gameForm input { font-size:24pt; z-index:10; }
#score { position:absolute; left:4px; top:2px; color:#ffffff; background-color:black; width:80px; height:20px; text-align:right; font-weight:bold; }
#stageNumber { position:absolute; left:230px; top:2px; color:#ffffff; background-color:black; height:20px; text-align:right; font-weight:bold; }
#laser { position:absolute; left:10px; top:-50px; color:#ffffff; }
#fighter { position:absolute; left:4px; top:260px; color:#ffffff; }
#fire { position:absolute; left:0px; top:-100px; z-index:999; }
#cloud { width:320px; height:480px; position:absolute;top:0px;left:0px; background-color:#ffffff; opacity:0.25; }
--></style>
<script type="text/javascript"><!--
// ===============================================
// 初期設定
// ===============================================
var gmapPref = "url(http://maps.google.com/staticmap?center=";
var gmapPost = "&size=320x640&maptype=satellite&key=★★★★★)";
var laserX = -10; // レーザーのX座標
var laserY = -50; // レーザーのY座標
var laserW = 3; // レーザーの横幅
var laserH = 20; // レーザーの縦幅
var dy = -10; // レーザーの縦の移動量
var fighterX = 1; // 自機のX座標
var fighterY = 260; // 自機のY座標
var fighterW = 24; // 自機の横幅
var fighterH = 24; // 自機の縦幅
var fighterDx = 8; // 1回の自機の移動量
var pointX = 0;
var enemy = []; // 敵車の情報を入れる配列
var maxEnemy = 4; // 移動させる敵の車の最大数
var enemyLimit = 20; // 敵車の出現最大数
var enemyCounter = 0; // 敵車を出現させるカウンタ
var enemyW = 24; // 敵機の横幅
var enemyH = 24; // 敵機の縦幅
var fireX = 0; // 爆発のX座標
var fireY = -100; // 爆発のY座標
var bgY = 420; // 背景画像のY座標
var stage = 1; // ステージ
var areaCount = 0;
var area = [
"-21.143431,151.390228&zoom=10", // グレートバリアリーフ
"35.689509,139.691752&zoom=18", // 東京都庁
"35.632291,139.880719&zoom=16", // ディズニーランド
"39.022151,125.732539&zoom=16", // 北の都市
"48.804263,2.121434&zoom=17", // ベルサイユ宮殿
"-14.690307,-75.123112&zoom=18", // ナスカの地上絵
"41.890234,12.492324&zoom=17", // ローマ
"48.858472,2.294716&zoom=17", // エッフェル塔
"29.978989,31.134009&zoom=16", // エジプト
"37.418785,-122.057011&zoom=17", // 某社
"38.897554,-77.036519&zoom=18" // 白い家
];
// ===============================================
// 自機の位置を設定するためのイベントを設定
// ===============================================
window.addEventListener("load", function(){ // ページ内容が読み込まれたらイベントを設定
document.getElementById("cloud").style.opacity = 0;
document.addEventListener("touchmove", function(){
event.preventDefault(); // デフォルトのイベントを禁止する
fighterX =event.touches[0].pageX - fighterW / 2; // タッチされた横位置を取得し自機の座標とする
document.getElementById("fighter").style.left = fighterX; // 自機を指定したX座標に表示する
}, false);
}, true);
// ===============================================
// レーザーを発射する（自動発射）
// ===============================================
function startLaser(){
laserX = fighterX + 10;
laserY = fighterY;
}
// ===============================================
// レーザーを移動させる
// ===============================================
function moveLaser(){
if (!gameFlag) return; // ゲーム中でなければ処理しない
laserY = laserY + dy; // レーザーを縦方向に移動させる
document.getElementById("laser").style.left = laserX; // レーザーを指定したX座標に表示する
document.getElementById("laser").style.top = laserY; // レーザーを指定したY座標に表示する
if (laserY< -laserH) startLaser(); // レーザーを再度発射する
}
// ===============================================
// 背景を移動
// ===============================================
function moveBG(){
bgY = bgY + 1; // 1ピクセルごと背景画像を下に移動
if (bgY > 610) {
document.getElementById("cloud").style.opacity = ((bgY - 610) * 4)/100;
}
if (bgY > 640) {
bgY = 410;
stage = stage + 1; // ステージを増やす
document.getElementById("stageNumber").innerHTML = "STAGE "+stage;
areaCount = areaCount + 1; // エリアを増やす
areaCount = areaCount % area.length; // 剰余で延々と繰り返すようにする
document.body.style.backgroundImage = gmapPref + area[areaCount] + gmapPost;
enemyCounter++;
enemyCounter = enemyCounter & 15; // 16機下にいったら1機ずつ増やす
if (enemyCounter == 0){
if (maxEnemy < enemyLimit){
enemy[maxEnemy] = new createEnemy("teki"+maxEnemy);
maxEnemy++;
}
}
setTimeout('document.getElementById("cloud").style.opacity = 0;', 1500);
}
document.body.style.backgroundPositionY = bgY;
}
// ===============================================
// 敵機を生成する
// ===============================================
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 = enemyW;
imgObj.height = enemyH;
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() * 10 + 4 ;
}
// 自機との接触判定
if ( (this.y > 260) && (this.y < 284) && ((this.x + enemyW) > fighterX) && (this.x < (fighterX + fighterW)) ) {
clearInterval(timerID); // タイマー処理を終了
document.getElementById("gameForm").style.visibility = "visible";
document.getElementById("fire").style.left = fighterX;
document.getElementById("fire").style.top = fighterY;
alert("ぼ～～～ん！ ゲームオーバー！"); // ゲームオーバーの表示
}
// レーザーとの接触判定
if ( ((laserX + laserW) >= this.x) && (laserX <= (this.x + enemyW)) &&
((laserY + laserH) >= this.y) && (laserY <= (this.y + enemyH)) ) { // レーザーが敵に当たった
document.getElementById("fire").style.left = this.x;
document.getElementById("fire").style.top = this.y;
setTimeout("clearFire()", 750); // 0.75秒後に爆発パターンを消す
this.x = Math.floor(Math.random() * 280) + 20; // やられたら再度上から出す
this.y = Math.random() * - 100 - 30; // やられたら再度上から出す
this.dx = Math.random() * 3 - 1;
this.dy = Math.random() * 10 + 4 ;
startLaser(); // レーザーを発射する
score = score + 1; // スコアを加算
document.getElementById("score").innerHTML = score+"点";
}
}
// ===============================================
// 爆発パターンをクリア
// ===============================================
function clearFire() {
document.getElementById("fire").style.top = -100;
}
// ===============================================
// ゲーム開始時に敵機を生成
// ===============================================
function startEnemy() {
for (var i=0; i<enemyLimit; i++) {
enemy[i] = null; // 全ての敵車を消す
var img = document.getElementById("teki"+i);
if (img != null) {
img.style.top = -100; // 画面外に移動させておく
}
}
for (var i=0; i<maxEnemy; i++){
enemy[i] = new createEnemy("teki"+i);
}
}
// ===============================================
// 全ての敵機を移動
// ===============================================
function moveAllEnemy() {
for (var i=0; i<maxEnemy; i++){
enemy[i].move();
}
}
// ===============================================
// ゲーム開始
// ===============================================
function gameStart(){
document.getElementById("gameForm").style.visibility = "hidden";
document.body.style.backgroundImage = gmapPref + area[0] + gmapPost;
setTimeout("gameStart2()", 1200); // Static mapが読み込まれるまでのタイムラグ
}
function gameStart2(){
maxEnemy = 4; // 最初の敵機の数
enemyCounter = 0; // 敵を出現させるためのカウンタを0にする
score = 0; // 0点
stage = 1; // ステージを1にする
document.getElementById("stageNumber").innerHTML = "STAGE 1";
gameFlag = true; // ゲーム中であることを示すフラグをセットする
clearFire(); // 爆発パターンを消しておく
document.getElementById("score").innerHTML = "0点";
startEnemy(); // 敵を出現させる
timerID = setInterval("moveLaser();moveBG();moveAllEnemy()", 20); // 20ミリ秒ごとに処理するようにタイマーを設定
}
// --></script>
</head>
<body>
<div id="cloud"></div>
<div id="score">0点</div>
<div id="stageNumber">STAGE 1</div>
<div id="gameScreen"></div>
<form id="gameForm">
<input type="button" value="ゲーム開始" ontouchstart="gameStart()">
</form>
<img id="laser" src="images/laser.gif" width="3" height="20">
<img id="fighter" src="images/fighter.gif" width="24" height="24">
<img id="fire" src="images/fire.png" width="24" height="24">
</body>
</html>
