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

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

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

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

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

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

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

第5回:仕上げ

 

今日は第1回です。

モグラたたきゲームの仕様

モグラたたきゲームを作りにあたり、どんなルールにするか、仕様を決めます。

仕様は以下にします。

・モグラが表示されたり、非表示になったりする。(第1回)

・モグラをクリックすることで叩いたことになり、モグラの画像が叩かれた画像に変わる。(第2回)

・モグラはランダムに表示される。(第2回)

・モグラを叩くと、1点加算される。(第3回)

・現在の点数を表示する。(第3回)

・モグラの数は増える。(最初1匹、最大3匹)(第4回)

・ゲームの終了時にメッセージを出す。(第5回)

・制限時間は60秒。(第5回)

 

モグラを非表示にする

今回は、HTMLファイルとJavaScriptファイルを別のファイルに記述します。

JavaScriptの記述場所  参照

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 src = “img/ok.png” id = “image_file”></div>

</body>
</html>

JavaScriptファイルは、HTMLファイルと同じフォルダにある、「mogura.js」です。

JavaScriptファイルは以下のように記述します。

var mogura;

 

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

 

function start_game() {
    mogura = document.getElementById(“image_file”);
    mogura.style.visibility = “hidden”;
}

「window.onload」はウィンドウがロードされたとき、つまりすべてが表示された後に、「start_game()」という関数が実行されます。

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

「start_game()」はmoguraという変数に、document.getElementByIdを使って、”image_file”というidが付いたimgタグを設定しています。

次に、moguraという変数のstyle(スタイル)のvisibilityを変更しています。

これが、”hidden”になると、画像は隠れて表示されません。

function start_game() {
    mogura = document.getElementById(“image_file”);
    mogura.style.visibility = “hidden”;
}

Webブラウザで開くと、以下のように表示され、モグラが表示されません。

 

モグラを表示する

JavaScriptファイルの「start_game()」を変更します。

moguraという変数のstyle(スタイル)のvisibilityを”visible”に変更します。

“visible”になると、画像が表示されます。

function start_game() {
    mogura = document.getElementById(“image_file”);
    mogura.style.visibility = “visible”;
}

Webブラウザで開くと、以下のようにモグラが表示されます。

 

タイマーでモグラの表示、非表示を切り替える

モグラが表示されたり、非表示になったりを自動的に切り替えるようにするために、タイマーを使います。

JavaScriptには、「setTimeout()」という機能があり、一定時間経過すると、指定した処理を実行します。

「setTimeout()」の書き方です。

setTimeout(処理内容, 実行タイミング)

setTimeoutは、第二引数に与えられた実行タイミング(ミリ秒)で、第一引数に定義された処理内容を1度だけ実行します。

ミリ秒と秒の関係です。

ミリ秒
1ミリ秒 0.001秒
10ミリ秒 0.01秒
100ミリ秒 0.1秒
1000ミリ秒 1秒
10000ミリ秒 10秒
60000ミリ秒 60秒(1分)

 

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

var mogura;

 

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

 

function start_game() {
    mogura = document.getElementById(“image_file”);
    setTimeout(hidden,5000);
}

 

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

Webブラウザで開くと、以下のように最初モグラが表示されます。

5秒後にモグラが非表示になりました。

 

この状態だと、モグラが非表示になった後、何も起こりません。

モグラが非表示になった後、再び表示されるように、JavaScriptファイルを以下のように修正します。

var mogura;

 

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

 

function start_game() {
    mogura = document.getElementById(“image_file”);
    setTimeout(hidden,5000);
}

 

function hidden() {
    mogura.style.visibility = “hidden”;
    setTimeout(visible,5000);

}

 

function visible() {
    mogura.style.visibility = “visible”;
    setTimeout(hidden,5000);

}

非表示に設定後、5秒後に「visible()」を実行し、モグラを表示します。

モグラを表示後、5秒後に「hidden()」を実行し、モグラを非表示にします。

これを繰り返します。

Webブラウザで開くと、モグラ表示→モグラ非表示→モグラ表示→モグラ非表示・・・を画面を閉じるまで5秒間隔で繰り返します。

 

まとめ

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

第1回は「モグラを表示、非表示にする処理」でした。

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