JavaScriptでモグラたたきゲームを作る方法について説明します。
全５回に分けて説明します。
第１回：モグラを表示、非表示にする処理 ←今回はここ
第２回：モグラをたたく処理
第３回：点数を表示する処理
第４回：モグラを増やす処理
第５回：仕上げ
今日は第１回です。
モグラたたきゲームの仕様
モグラたたきゲームを作りにあたり、どんなルールにするか、仕様を決めます。
仕様は以下にします。
・モグラが表示されたり、非表示になったりする。（第１回）
・モグラをクリックすることで叩いたことになり、モグラの画像が叩かれた画像に変わる。（第２回）
・モグラはランダムに表示される。（第２回）
・モグラを叩くと、１点加算される。（第３回）
・現在の点数を表示する。（第３回）
・モグラの数は増える。（最初１匹、最大３匹）（第４回）
・ゲームの終了時にメッセージを出す。（第５回）
・制限時間は60秒。（第５回）
モグラを非表示にする
今回は、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でモグラたたきゲームを作る方法の第１回を説明しました。
第１回は「モグラを表示、非表示にする処理」でした。
以上、JavaScriptでモグラたたきゲームを作る方法の第１回でした。