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

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

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

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

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

第3回:点数を表示する処理 ←今回はここ

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

第5回:仕上げ

 

今日は第3回です。

点数の表示

モグラたたきゲームで、点数を表示するようにします。

点数は、HTMLファイルに記述します。

第1回で作成したHTMLファイルに以下のように1行追記します。

<!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_file”src=”img/ok.png”></div>
    <div align=”center”>0点</div>

</body>
</html>

WebブラウザでHTMLファイルを開くと、点数が“0点”と表示されます。

ただし、“0点”は固定文字なので、モグラをクリックしても点数は増えません。

モグラを叩くと、1点加算される

モグラをクリックすると、点数が1点加算されるようにするには、HTMLファイル、JavaScriptファイルの両方を修正する必要があります。

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

var mogura;

var tensu = 0;

 

window.onload = function() {
    start_game()
}

 

function start_game() {
    mogura = document.getElementById(“image_file”);
    mogura.onclick = function() {
        mogura.src = “img/ng.png”

        setTimeout(modosu,1000);

        tensu = tensu + 1;
    }

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

    setTimeout(hidden,ransu);

}

 

function modosu() {

    mogura.src = “img/ok.png”

}

 

function hidden() {
    mogura.style.visibility = “hidden”;

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

    setTimeout(visible,ransu);

}

 

function visible() {
    mogura.style.visibility = “visible”;

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

    setTimeout(hidden,ransu);

}

点数を格納する変数「tensu」を用意し、初期値に0を設定します。

  var tensu = 0;

モグラがクリックされると、モグラの画像が変わりますが、同じタイミングで「tensu」に1を加算します。

    mogura.onclick = function() {
        mogura.src = “img/ng.png”

        setTimeout(modosu,1000);

        tensu = tensu + 1;
    }

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

モグラをクリックします。

モグラの画像は変わりましたが、点数は変わりません。

これは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_file”src=”img/ok.png”></div>
    <div align=”center”><span id = “tensu_hyoji”>0</span>点</div>

</body>
</html>

先ほど追加した<div>タグの部分を<span>タグで囲みます。

<span>タグに意味はありませんが、id属性を持つことができ、Javascriptからid属性を指定して値を変更することができます。

    <div align=”center”><span id = “tensu_hyoji”>0</span>点</div>

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

var mogura;

var tensu = 0;

var gokei;

 

window.onload = function() {
    start_game()
}

 

function start_game() {
    mogura = document.getElementById(“image_file”);

    gokei = document.getElementById(“tensu_hyoji”);
    mogura.onclick = function() {
        mogura.src = “img/ng.png”

        setTimeout(modosu,1000);

        tensu = tensu + 1;

        gokei.innerHTML = tensu;
    }

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

    setTimeout(hidden,ransu);

}

 

function modosu() {

    mogura.src = “img/ok.png”

}

 

function hidden() {
    mogura.style.visibility = “hidden”;

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

    setTimeout(visible,ransu);

}

 

function visible() {
    mogura.style.visibility = “visible”;

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

    setTimeout(hidden,ransu);

}

まず、現在の点数を格納する変数「gokei」を用意します。

var gokei;

変数「gokei」に、document.getElementById(“tensu_hyoji”)で現在の点数を読み込んで、値を格納しておきます。

 gokei = document.getElementById(“tensu_hyoji”);

そして、HTML要素の中身を変更できるJavaScriptの機能「innerHTML」を使用して、加算された点数を表示するようにします。

gokei.innerHTML = tensu;

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

加算された点数が表示されました。

 

まとめ

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

第3回は「点数を表示する処理」でした。

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