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

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

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

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

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

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

第4回:モグラを増やす処理 ←今回はここ

第5回:仕上げ

 

今日は第4回です。

モグラを増やす

モグラを増やすと、モグラたたきゲームの難易度が上がります。

今回はモグラを3匹に増やします。

見た目上、モグラを表示しているのはHTMLファイルなので、第3回で修正した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>

</body>
</html>

画像表示の部分を増やし、id属性の値を、”image_file1″、”image_file2″、”image_file3″にしました。

WebブラウザでHTMLファイルを開くと、モグラが3匹表示されます。

ただし、モグラをクリックしても、画像は変わらず、点数も加算されません。

JavaScriptファイルを修正していないからです。

モグラ3匹分のプログラムを書く

モグラが3匹に増えたので、プログラムも3匹に対応するよう、追加する必要があります。

JavaScriptファイルを以下のように修正します。

var mogura1;  //左のモグラ

var mogura2;  //中央のモグラ

var mogura3;  //右のモグラ

 

var tensu = 0;

var gokei;

 

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() {  //左のモグラがクリックされたとき
        mogura1.src = “img/ng.png”

        setTimeout(modosu1,1000);

        tensu = tensu + 1;

        gokei.innerHTML = tensu;
    }

 

    mogura2.onclick = function() {  //中央のモグラがクリックされたとき
        mogura2.src = “img/ng.png”

        setTimeout(modosu2,1000);

        tensu = tensu + 1;

        gokei.innerHTML = tensu;
    }

 

    mogura3.onclick = function() {  //右のモグラがクリックされたとき
        mogura3.src = “img/ng.png”

        setTimeout(modosu3,1000);

        tensu = tensu + 1;

        gokei.innerHTML = tensu;
    }

    var ransu1 = Math.random() * 3* 1000

    setTimeout(hidden1,ransu);

 

    var ransu2 = Math.random() * 3* 1000

    setTimeout(hidden2,ransu);

 

    var ransu3 = Math.random() * 3* 1000

    setTimeout(hidden3,ransu);

}

 

function modosu1() {  //左のモグラの画像を戻す

    mogura1.src = “img/ok.png”

}

 

function modosu2() {  //中央のモグラの画像を戻す

    mogura2.src = “img/ok.png”

}

 

function modosu3() {  //右のモグラの画像を戻す

    mogura3.src = “img/ok.png”

}

 

function hidden1() {
    mogura1.style.visibility = “hidden”;  //左のモグラを非表示にする

    var ransu = Math.random() * 3* 1000

    setTimeout(visible1,ransu);  //左のモグラを表示するタイマーをセット

}

 

function hidden2() {
    mogura2.style.visibility = “hidden”;  //中央のモグラを非表示にする

    var ransu = Math.random() * 3* 1000

    setTimeout(visible2,ransu);  //中央のモグラを表示するタイマーをセット

}

 

function hidden3() {
    mogura3.style.visibility = “hidden”;  //右のモグラを非表示にする

    var ransu = Math.random() * 3* 1000

    setTimeout(visible3,ransu);  //左のモグラを表示するタイマーをセット

}

 

function visible1() {
    mogura1.style.visibility = “visible”;  //左のモグラを表示する

    var ransu = Math.random() * 3* 1000

    setTimeout(hidden1,ransu );  //左のモグラを非表示にするタイマーをセット

}

 

function visible2() {
    mogura2.style.visibility = “visible”;  //中央のモグラを表示する

    var ransu = Math.random() * 3* 1000

    setTimeout(hidde2,ransu );  //中央のモグラを非表示にするタイマーをセット

}

 

function visible3() {
    mogura3.style.visibility = “visible”;  //右のモグラを表示する

    var ransu = Math.random() * 3* 1000

    setTimeout(hidde3,ransu );  //右のモグラを非表示にするタイマーをセット

}

WebブラウザでHTMLファイルを開きます。

モグラが表示されたり、非表示になったりします。

また、モグラを叩くと、画像が変わります。

 

プログラムを短くする

モグラが3匹に増えたので、プログラムも3匹に対応するよう、必要な部分を単純に3倍にしました。

これでも問題なく動作しますが、モグラがさらに増えると、さらに長くなります。

プログラムにはいろんな書き方がありますが、もう少しまとめて短くします。

以下は一例です。

var mogura1;  //左のモグラ

var mogura2;  //中央のモグラ

var mogura3;  //右のモグラ

 

var tensu = 0;

var gokei;

 

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);

}

 

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”;  //引数で渡されたモグラを非表示にする

    var ransu = Math.random() * 3* 1000

    setTimeout(function() {

        visible(img_mogura);

    },ransu);  //引数で渡されたモグラを表示するタイマーをセット

}

 

function visible(img_mogura) {
    img_mogura.style.visibility = “visible”;  //引数で渡されたモグラを表示する

    var ransu = Math.random() * 3* 1000

    setTimeout(function() {

        hidden(img_mogura);

    },ransu );  //引数で渡されたモグラを非表示にするタイマーをセット

}

先ほどに比べて、プログラムが短くなりました。

まとめ

JavaScriptでモグラたたきゲームを作る方法の第4回を説明しました。

第4回は「モグラを増やす処理」でした。

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

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