JavaScript モグラたたきゲームを作る(第5回)

JavaScriptでモグラたたきゲームを作る方法について説明します。

全5回に分けて説明します。

第1回:モグラを表示、非表示にする処理

第2回:モグラをたたく処理

第3回:点数を表示する処理

第4回:モグラを増やす処理

第5回:仕上げ ←今回はここ

 

今日は第5回、最終回です。

モグラたたきゲームの終了時間を設定する

モグラたたきゲームは、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でモグラたたきゲームを作る方法の第5回を説明しました。

第5回は最終回「仕上げ」でした。

プログラムは、同じ処理でも異なる書き方ができることがあります。いろいろ試してみてください。

以上、JavaScriptでモグラたたきゲームを作る方法の第5回でした。