ゲーム開始時の処理
ゲーム開始時の処理は初期設定の処理とほとんど同じです。まず、ゲームが開始されたら「ゲーム開始」ボタンを非表示にします。これは、ゲーム開始ボタンがあると間違って押してしまうのを防ぐためと、ゲームが再スタートしてしまうのを防ぐためです。
何問目かを示すのが変数countです。最初は0の値を設定しておきます。あとは、表示されているスコアを0点にし表示します。この表示処理を入れておかないと、ゲームをリトライした場合に前回の得点が表示されたままになってしまいます。
コード05
function gameStart(){
document.getElementById("startButton").style.visibility = "hidden";
gameFlag = true; // ゲーム中であることを示すフラグ
score = 0; // スコアは0点にする
count = 0; // 回数をカウントする変数
startFlag = false; // 最初に○か×ボタンが押された時からカウント開始
lockFlag = false; // ロックフラグ
document.getElementById("gameScore").innerHTML = "0点";
setTitle(); // ゲーム開始
}
最後に
今回は少し時事ネタを取り入れてみました。といっても、認識力や反射神経、集中力を鍛えるというのは時代に左右されないものです。このゲームで認識力を鍛えて、まがいものをつかまされないようにしましょう。といっても、面白いまがいものを見て楽しむというのもありかとは思うのですが。
＊なお、このプログラムは自由に改造して配布しても問題ありません。適当にプログラム書き換えて楽しんでください。
完成したプログラムコード
<!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:16pt; color:red; }
#gameScore, #qNum { font-size:22pt; }
#mTitle { font-size:24pt; background-color:#b7feb3; }
#NGbutton,#OKbutton,#startButton {
position:absolute;
top:200px;
font-size:24pt;
}
#startButton { top:280px; left: 50px; }
#NGbutton { left:10px; }
#OKbutton { left:230px; }
--></style>
<script type="text/javascript"><!--
// ===============================================
// ゲームに必要な変数
// ===============================================
var movieTitle = [ // 表示するまぎらわしい単語
"マイコミジャーナル",
"カケコミジャーナル", "ヨミコミジャーナル",
"コミコミジャーナル", "マイコミキャーナル", "マイコミジャーナル",
"マイコミジャーナレ", "マイコミジャーナル",
"マイロミジャーナル", "ウリコミジャーナル", "マイコミジャーナル",
"マイコ三ジャーナル", "マイコミジャーナル"
];
var okTitle = "マイコミジャーナル"; // 正解の文字
var startTime; // 時間を入れる変数
var gameFlag = false; // 最初はゲーム中ではないのでfalseにする
var score = 0; // スコアは0点にする
var count = 0; // 回数をカウントする変数
var maxCount = 10; // 表示する単語の数
var startFlag = false; // 最初に○か×ボタンが押された時からカウント開始
var lockFlag = false; // ロックフラグ
// ===============================================
// 表示する文字を設定
// ===============================================
function setTitle(){
var n = Math.floor(Math.random() * movieTitle.length);
document.getElementById("mTitle").innerHTML = movieTitle[n];
count++;
document.getElementById("qNum").innerHTML = count + "問目";
lockFlag = false; // ロック解除
if (count <= maxCount) return; // 指定したカウント以下なら関数から抜ける
document.getElementById("qNum").innerHTML = "ゲーム終了";
var time = ((new Date()).getTime() - startTime) / 1000;
gameFlag = false; // ゲーム終了であることを示す
alert("ゲームオーバー：得点は"+score+"点で、秒数は"+time+"秒でした。");
document.getElementById("startButton").style.visibility = "visible";
}
// ===============================================
// ○かチェック
// ===============================================
function checkTitle(buttonType){
if (!gameFlag) return;
if (lockFlag) return; // ロック中ならボタン処理を行わない
if (!startFlag) {
startTime = (new Date()).getTime(); // ゲーム開始時間
startFlag = true; // 計測開始
}
var txt = document.getElementById("mTitle").innerHTML;
if (buttonType == 'ok') { // OKボタンの場合
flag = (txt == okTitle);
}else{ // NGボタンの場合
flag = (txt != okTitle);
}
if (flag) { // 押したボタンが正解だった場合
document.getElementById("mTitle").innerHTML = "正解!!";
score++;
document.getElementById("gameScore").innerHTML = score + "点";
setTitle(); // 正解の場合はすぐに次の問題に進む
}else{
document.getElementById("mTitle").innerHTML = "間違い！";
document.body.style.backgroundColor = "red"; // 間違っていたので画面を赤にする
// 失敗時には0.2秒後に次の問題を表示（これでタイムロスになる）してボタンが押せないようにロックする
setTimeout('document.body.style.backgroundColor = "white";setTitle()', 200);
lockFlag = true;
}
}
// ===============================================
// ゲーム開始
// ===============================================
function gameStart(){
document.getElementById("startButton").style.visibility = "hidden";
gameFlag = true; // ゲーム中であることを示すフラグ
score = 0; // スコアは0点にする
count = 0; // 回数をカウントする変数
startFlag = false; // 最初に○か×ボタンが押された時からカウント開始
lockFlag = false; // ロックフラグ
document.getElementById("gameScore").innerHTML = "0点";
setTitle(); // ゲーム開始
}
// --></script>
</head>
<body>
<h1>まぎらわしい！</h1>
<div id="gameScore">0点</div>
<div id="qNum"></div>
<div id="mTitle">-----</div>
<form id="gameForm">
<input type="button" value="×" id="NGbutton" onTouchStart="checkTitle('ng')">
<input type="button" value="○" id="OKbutton" onTouchStart="checkTitle('ok')"><br>
<input type="button" value="ゲーム開始" onClick="gameStart()" id="startButton">
</form>
</body>
</html>
