最後に
時節柄、なまけもの(ずぼらな)のサンタクロースがプレゼントをばらまくことになっていますが、画像などを変えて楽しむこともできます。例えば、サンタクロースを首相にして、プレゼントボックスを12枚の1,000円札にするのもよいかもしれません。このプログラムは自由に改造して配布しても問題ありません。背景画像を変更したりプログラム書き換えて楽しんでください。
完成したプログラムコード
<!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"><!--
h1 { font-size:14pt; }
body { background-image: url(images/bg.png); background-repeat:no-repeat; }
#displayScore { position:absolute; top:0px; left:260px; color:#ffffff; font-size:9pt; }
#gameForm { position:absolute; top:80px; left:60px; font-size:9pt; }
#gameForm div { width:210px; color:white; }
input { font-size:16pt; }
#point { position:absolute; top:-100px; left:0px; font-size:12pt; opacity:0.75;
font-weight:bold; width:40px; height:14px; color:white; z-index:999; }
--></style>
<script type="text/javascript"><!--
// ===============================================
// ゲームに必要な変数
// ===============================================
var maxCount = 20; // プレゼントの最大数
var count = 0; // プレゼントのカウント数
var limitY = 309; // 下限
var presentData = new Array(); // プレゼントボックス情報を入れる配列
var timerID = null; // タイマー変数
var ptTimer = null; // ポイント表示のタイマー変数
var score = 0; // スコア
window.onload = function(){
for (var i=0; i<maxCount; i++) {
presentData[i] = presentAdd(i);
}
}
// ===============================================
// プレゼントボックスを生成
// ===============================================
function presentAdd(n){
var img = document.createElement("img"); // imgエレメントを生成
document.body.appendChild(img); // ページに追加
img.id = "present"+n; // ID名を割り当てる
img.speed = Math.random() * 5 + 2; // 落下速度を設定する
img.degree = Math.floor(Math.random() * 36) * 10; // 初期角度
img.src = "images/present.png"; // 表示する画像
img.style.top = img.posY = (Math.random() * -180) -24; // 画像のY座標
img.style.left = img.posX = Math.random() * 280 + 20; // 画像のX座標
img.style.width = "24px"; // 画像の横幅
img.style.height = "24px"; // 画像の縦幅
img.style.position = "absolute";
img.ontouchstart = function(){ // タッチした時に処理
this.ontouchstart = null;
if (this.posY < limitY) {
var pt = 370 - Math.floor(this.degree); // 回転角度によってスコアを変える
pt = pt + Math.floor(this.posY / 10); // 下に行くほど高得点
}else{
pt = 1; // 下限より下なら1点
}
score = score + pt; // スコアを加算する
displayPoint(this.posX, this.posY, pt); // 上に移動するスコア表示を設定
document.getElementById("displayScore").innerHTML = score + "点";
this.style.visibility = "hidden"; // プレゼントボックスを非表示にする
gameOverCheck(); // ゲームオーバーチェック
}
img.fall = function(){ // 落下処理を行うメソッド
this.posY = this.posY + this.speed;
if (this.posY < limitY) {
this.degree = (this.degree + 10) % 360; // 10度ずつ回転
}
this.style.top = this.posY;
this.style["-webkit-transform"]="rotate("+this.degree+"deg)"; // CSSで回転させる
if (this.posY > limitY) {
this.posY = limitY; // ある程度よりは下に落下しないようにする
}
}
return img;
}
// ===============================================
// プレゼントボックスを落下させる
// ===============================================
function movePresentBox(){
for (var i=0; i<maxCount; i++) {
presentData[i].fall();
}
var ptObj = parseInt(document.getElementById("point").style.top);
ptObj = ptObj - 2;
document.getElementById("point").style.top = ptObj;
var n = document.getElementById("point").style.opacity;
n = n - 0.15;
document.getElementById("point").style.opacity = n;
}
// ===============================================
// 得点を表示
// ===============================================
function displayPoint(x,y,pt){
clearTimeout(ptTimer); // ポイントのタイマーをクリア
document.getElementById("point").style.opacity = 1.0;
document.getElementById("point").style.left = x;
document.getElementById("point").style.top = y;
document.getElementById("point").innerHTML = pt;
ptTimer = setTimeout('document.getElementById("point").innerHTML=""', 800);
}
// ===============================================
//ゲームオーバー
// ===============================================
function gameOverCheck(){
count = count + 1;
if (count >= maxCount){
clearInterval(timerID); // タイマー解除
alert("ゲームオーバー");
}
}
// ===============================================
// ゲーム開始
// ===============================================
function gameStart(){
document.getElementById("gameForm").style.visibility = "hidden";
timerID = setInterval("movePresentBox()", 250);
}
// --></script>
</head>
<body>
<div id="displayScore">0点</div>
<form id="gameForm">
<div>
落下するプレゼントボックスをタッチして回収しよう。<br>
回転するボックスが傾いていない時にタッチすると高得点。<br>
赤線に近いほど高得点。でも赤線越えると1点。<br>
20箱回収すればゲームクリア！<br><br>
再度ゲームプレイする時はリロードしてください。<br>
</div>
<input type="button" value="ゲーム開始" onClick="gameStart()">
</form>
<div id="point"></div>
</body>
</html>
