注意事項と完成コード
最後に注意事項があります。どのiPhoneでも再現するかどうか確認できていませんがSafariが停止状態になることがあります。このため、マルチタッチ/タップはしないようにしてください。大量にマルチタッチ/タップを繰り返すとSafari自体がハングアップするか落ちてしまうことがあります(最初に作成したプチプチiPhone 3Gもタッチイベント対応にすると画面の再描画までに異様に時間がかかったりします)。Safariを再度起動しても駄目な場合は一度iPhoneの電源を落としてみてください。
＊なお、このプログラムは自由に改造して配布しても問題ありません。背景画像を追加したりプログラム書き換えて楽しんでください。
完成したプログラムコード
<!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; }
.box { border:1px solid black; font-size:30px; width:60px; height:48px; text-align:center; }
--></style>
<script type="text/javascript"><!--
// ===============================================
// ゲームに必要な変数
// ===============================================
var maxCount = 0; // マス目の合計数
var rand = new Array(); // 乱数値を入れる配列
// ===============================================
// ゲーム画面を生成
// ===============================================
window.onload = function(){
var boxW = 60; // マス目の横幅
var boxH = 48; // マス目の縦幅
var startX = 10; // マス目の横の表示開始位置
var startY = 90; // マス目の縦の表示開始位置
var htmlStr = ""; // 生成するHTMLを入れる変数
for (var j=0; j<5; j++){ // 縦に5マス
for(var i=0; i<5; i++){ // 横に5マス
var tempX = startX + i * boxW;
var tempY = startY + j * boxH;
htmlStr = htmlStr + '<div class="box" id="'+maxCount+'" style="position:absolute;left:'+tempX+'px;top:'+tempY+'px;" onTouchStart="checkNumber('+maxCount+')"></div>';
maxCount++;
}
}
document.getElementById("gameScreen").innerHTML = htmlStr;
}
// ===============================================
// 番号設定
// ===============================================
function setNumber(){
for (var i=0; i<maxCount; i++) { // 数値を順番に配列変数に入れる
rand[i] = i + 1;
}
for (i=0; i<20; i++){ // シャッフル
var pt1 = Math.floor(Math.random() * rand.length);
var pt2 = Math.floor(Math.random() * rand.length);
var n = rand[pt2];
rand[pt2] = rand[pt1];
rand[pt1] = n;
}
for (i=0; i<maxCount; i++){ // 数値を表示する
document.getElementById(i).innerHTML = rand[i];
document.getElementById(i).style.backgroundColor = "#fff"; // 背景色を白にする
}
}
// ===============================================
// タップされた番号をチェック
// ===============================================
function checkNumber(uID){
if (!gameFlag) return; // ゲーム中でなければ処理しない
if (!tapFlag){
tapFlag = true; // 一度タップされたのでフラグを立てる
startTime = (new Date()).getTime(); // 開始時間を取得
}
var n = rand[uID]; // タップされたボックスの番号を読み出す
if (n != tapCount) return; // タップ数と異なる場合は何もしない
endTime = (new Date()).getTime(); // 終了時間を取得
tapCount++;
document.getElementById(uID).style.backgroundColor = "#4f4f6f"; // 背景色をグレーにする
document.getElementById(uID).onTouchStart = null; // イベントを解除
if (tapCount < maxCount+1) return; // 全部タップし終わっていない場合は処理しない
var sec = (endTime - startTime) / 1000; // ミリ秒なので秒数にする
alert(sec+"秒かかりました");
gameFlag = false; // ゲームが終了したのでフラグをfalseにする
document.getElementById("gameForm").style.visibility = "visible";
}
// ===============================================
// ゲーム開始
// ===============================================
function gameStart(){
document.getElementById("gameForm").style.visibility = "hidden";
gameFlag = true; // ゲーム中であることを示すフラグ
setNumber(); // 番号を生成し表示
tapCount = 1; // 最初1からタップするので1にする
tapFlag = false; // タップ開始フラグ
}
// --></script>
</head>
<body>
<h1>タッチナンバーゲーム</h1>
<form id="gameForm">
<input type="button" value="ゲーム開始" onClick="gameStart()">
</form>
<div id="gameScreen"></div>
</body>
</html>
