JavaScriptでモグラたたきゲームを作る方法について説明します。
全５回に分けて説明します。
第５回：仕上げ ←今回はここ
今日は第５回、最終回です。
モグラたたきゲームの終了時間を設定する
モグラたたきゲームは、Webブラウザを閉じるまでゲームが続きます。
モグラたたきゲームを一定時間で終わるよう、プログラムを修正します。今回は60秒で終了します。
Webブラウザを開いてから60秒たつと、「END！」というメッセージを表示してゲームを終わるよう、プログラムを修正します。
修正するファイルはJavaScriptファイルです。
var mogura1; //左のモグラ
var mogura2; //中央のモグラ
var mogura3; //右のモグラ
var tensu = 0;
var gokei;
var game_end = false; //ゲームが終了かどうか判断する変数
window.onload = function() {
start_game()
}
function start_game() {
mogura1 = document.getElementById(“image_file1”); //左のモグラ
mogura2 = document.getElementById(“image_file2”); //中央のモグラ
mogura3 = document.getElementById(“image_file3”); //右のモグラ
gokei = document.getElementById(“tensu_hyoji”);
mogura1.onclick = function() { //左のモグラがクリックされたとき
click(mogura1);
}
mogura2.onclick = function() { //中央のモグラがクリックされたとき
click(mogura2);
}
mogura3.onclick = function() { //右のモグラがクリックされたとき
click(mogura3);
}
var ransu1 = Math.random() * 3* 1000
setTimeout(function() {
hidden(mogura1);
},ransu1);
var ransu2 = Math.random() * 3* 1000
setTimeout(function() {
hidden(mogura2);
},ransu2);
var ransu3 = Math.random() * 3* 1000
setTimeout(function() {
hidden(mogura3);
},ransu3);
setTimeout(stop_game, 60000) //60秒後にstopする処理を実行するタイマーをセット
}
function stop_game() {
alert(“END!”);
game_end = true; //ゲーム終了をセット
}
function click(img_mogura) { //引数で渡されたモグラの画像がクリックされたとき
img_mogura.src = “img/ng.png”
setTimeout(function() {
modosu(img_mogura);
},1000);
tensu = tensu + 1;
gokei.innerHTML = tensu;
}
function modosu(img_mogura) {
img_mogura.src = “img/ok.png”
}
function hidden(img_mogura) {
img_mogura.style.visibility = “hidden”; //引数で渡されたモグラを非表示にする
if (game_end == false) { //ゲームが終了でないとき
var ransu = Math.random() * 3* 1000
setTimeout(function() {
visible(img_mogura);
},ransu); //引数で渡されたモグラを表示するタイマーをセット
}
}
function visible(img_mogura) {
if (game_end == false) { //ゲームが終了でないとき
img_mogura.style.visibility = “visible”; //引数で渡されたモグラを表示する
}
var ransu = Math.random() * 3* 1000
setTimeout(function() {
hidden(img_mogura);
},ransu ); //引数で渡されたモグラを非表示にするタイマーをセット
}
モグラたたきゲームの状態が分かるよう、変数「game_end」を用意し、モグラたたきゲーム中はfalse、60秒たってモグラたたきゲームが終了したらtrueに設定します。
初期値はfalseです。
var game_end = false;
60秒（60000ミリ秒）たつと、モグラたたきゲームを終わらせる処理（stop_game）を実行するため、タイマーをセットします。
setTimeout(stop_game, 60000);
モグラたたきゲームを終わらせる処理（stop_game）では、画面に「END！」というメッセージを表示し、モグラたたきゲームの状態「game_end」をtrueに設定します。
function stop_game() {
alert(“END!”);
game_end = true; //ゲーム終了をセット
}
WebブラウザでHTMLファイルを開くと、モグラたたきゲームが始まります。
60秒たつと、メッセージが表示されます。
「OK]ボタンをクリックすると、メッセージ、モグラは消え、モグラたたきゲーム終了となります。
スタートボタンを作る
モグラたたきゲームが終了し、もう一度モグラたたきゲームをしたい場合、再度HTMLファイルを開く必要があります。
スタートボタンを作って、開きなおさなくても、もう一度モグラたたきゲームができるように修正します。
まずは、HTMLファイルを修正し、スタートボタンを表示します。
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>かいけつプログラム</title>
<script src=”mogura.js”></script>
</head>
<body>
<h1 align=”center”>モグラたたき</h1>
<div align=”center”>
<img id=”image_file1″src=”img/ok.png”>
<img id=”image_file2″src=”img/ok.png”>
<img id=”image_file3″src=”img/ok.png”>
</div>
<div align=”center”><span id = “tensu_hyoji”>0</span>点</div>
<div align=”center”><button id = “start”>START</button></div>
</body>
</html>
HTMLファイルを修正しただけでは、ボタンを押しても何も起こりません。
JavaScriptファイルを修正します。
var mogura1; //左のモグラ
var mogura2; //中央のモグラ
var mogura3; //右のモグラ
var start_botan; //STARTボタン
var tensu = 0;
var gokei;
var game_end = false; //ゲームが終了かどうか判断する変数
window.onload = function() {
start_game();
}
function start_game() {
mogura1 = document.getElementById(“image_file1”); //左のモグラ
mogura2 = document.getElementById(“image_file2”); //中央のモグラ
mogura3 = document.getElementById(“image_file3”); //右のモグラ
gokei = document.getElementById(“tensu_hyoji”);
start_botan = document.getElementById(“start”);
start_botan.onclick = function() { //STARTボタンがクリックされたとき
game_end = false; //ゲーム中の状態に戻す
tensu = 0; //点数を0点にする
gokei.innerHTML = tensu; //点数の表示を0点に設定する
start_game(); //もう一度スタートする
}
mogura1.onclick = function() { //左のモグラがクリックされたとき
click(mogura1);
}
mogura2.onclick = function() { //中央のモグラがクリックされたとき
click(mogura2);
}
mogura3.onclick = function() { //右のモグラがクリックされたとき
click(mogura3);
}
var ransu1 = Math.random() * 3* 1000
setTimeout(function() {
hidden(mogura1);
},ransu1);
var ransu2 = Math.random() * 3* 1000
setTimeout(function() {
hidden(mogura2);
},ransu2);
var ransu3 = Math.random() * 3* 1000
setTimeout(function() {
hidden(mogura3);
},ransu3);
setTimeout(stop_game, 60000) //60秒後にstopする処理を実行するタイマーをセット
}
function stop_game() {
alert(“END!”);
game_end = true; //ゲーム終了をセット
}
function click(img_mogura) { //引数で渡されたモグラの画像がクリックされたとき
img_mogura.src = “img/ng.png”
setTimeout(function() {
modosu(img_mogura);
},1000);
tensu = tensu + 1;
gokei.innerHTML = tensu;
}
function modosu(img_mogura) {
img_mogura.src = “img/ok.png”
}
function hidden(img_mogura) {
img_mogura.style.visibility = “hidden”; //引数で渡されたモグラを非表示にする
if (game_end == false) { //ゲームが終了でないとき
var ransu = Math.random() * 3* 1000
setTimeout(function() {
visible(img_mogura);
},ransu); //引数で渡されたモグラを表示するタイマーをセット
}
}
function visible(img_mogura) {
if (game_end == false) { //ゲームが終了でないとき
img_mogura.style.visibility = “visible”; //引数で渡されたモグラを表示する
}
var ransu = Math.random() * 3* 1000
setTimeout(function() {
hidden(img_mogura);
},ransu ); //引数で渡されたモグラを非表示にするタイマーをセット
}
まとめ
JavaScriptでモグラたたきゲームを作る方法の第５回を説明しました。
第５回は最終回「仕上げ」でした。
プログラムは、同じ処理でも異なる書き方ができることがあります。いろいろ試してみてください。
以上、JavaScriptでモグラたたきゲームを作る方法の第５回でした。
