JavaScriptでモグラたたきゲームを作る方法について説明します。
全５回に分けて説明します。
第２回：モグラをたたく処理 ←今回はここ
第３回：点数を表示する処理
第４回：モグラを増やす処理
第５回：仕上げ
今日は第２回です。
クリックで画像を変える
モグラたたきゲームの仕様では、「モグラをクリックすることで叩いたことになり、モグラの画像が叩かれた画像に変わる」とあります。
第１回で作成したJavaScriptファイルに、クリックで画像を変える処理を追加します。
var mogura;
window.onload = function() {
start_game()
}
function start_game() {
mogura = document.getElementById(“image_file”);
mogura.onclick = function() {
mogura.src = “img/ng.png”
}
setTimeout(hidden,5000);
}
function hidden() {
mogura.style.visibility = “hidden”;
setTimeout(visible,5000);
}
function visible() {
mogura.style.visibility = “visible”;
setTimeout(hidden,5000);
}
「 start_game() 」の中で、変数moguraにモグラの画像オブジェクトを取り出して入れた後に以下を追加しています。
“img/ng.png”は叩かれたときに表示する画像です。
mogura.onclick = function() {
mogura.src = “img/ng.png”
}
Webブラウザで開くと、以下のようにモグラが表示されます。
モグラをクリックします。
モグラが叩かれた画像に変更されます。
しばらくすると、モグラは非表示になり、その後表示されますが、この時モグラの画像は叩かれた画像のままです。
叩かれたモグラの画像を元に戻す
叩かれた画像を、しばらくしたら元の画像に戻るような処理を入れます。
今回は、叩かれた画像が表示された後、1秒後に元の画像に戻るように、setTimeout()を使用し、以下のように修正します。
var mogura;
window.onload = function() {
start_game()
}
function start_game() {
mogura = document.getElementById(“image_file”);
mogura.onclick = function() {
mogura.src = “img/ng.png”
setTimeout(modosu,1000);
}
setTimeout(hidden,5000);
}
function modosu() {
mogura.src = “img/ok.png”
}
function hidden() {
mogura.style.visibility = “hidden”;
setTimeout(visible,5000);
}
function visible() {
mogura.style.visibility = “visible”;
setTimeout(hidden,5000);
}
「 start_game() 」の「mogura.onclick = function() {・・・}」の中で、叩かれた画像に変更した後、タイマーをセットしています。
mogura.onclick = function() {
mogura.src = “img/ng.png”
setTimeout(modosu,1000);
}
1秒（1000ミリ秒）後、「modosu()」を呼び出します。
「modosu()」は今回新たに追加した関数です。
「modosu()」では、画像を元の画像に設定しています。
function modosu() {
mogura.src = “img/ok.png”
}
Webブラウザで開きます。
モグラを叩きます。
1秒後に画像が変わります。
モグラの表示タイミングをランダムに変更する
モグラが表示されたり、非表示になったりを5秒ごとに切り替えていますが、これだと、いつモグラが表示されるかが分かり、とても簡単なモグラたたきゲームになってしまいます。
そのため、モグラが表示される時間をランダム（規則性がない）にすることで、モグラたたきゲームの難易度を上げることができます。
JavaScriptには、「Math.random()」というメソッドがあり、乱数を生成することができます。
「Math.random()」の書き方です。
Math.random()
引数はなく、0～1の間の小数を返します。
JavaScriptファイルを以下のように修正します。
var mogura;
window.onload = function() {
start_game()
}
function start_game() {
mogura = document.getElementById(“image_file”);
mogura.onclick = function() {
mogura.src = “img/ng.png”
setTimeout(modosu,1000);
}
var ransu = Math.random()
setTimeout(hidden,ransu);
}
function modosu() {
mogura.src = “img/ok.png”
}
function hidden() {
mogura.style.visibility = “hidden”;
var ransu = Math.random()
setTimeout(visible,ransu);
}
function visible() {
mogura.style.visibility = “visible”;
var ransu = Math.random()
setTimeout(hidden,ransu);
}
Webブラウザで開くと、モグラが表示されたり、非表示になったり、スピードが速すぎて何もできません。
「setTimeout()」の引数はミリ秒で、「Math.randam()」の戻り値が小数のため、速すぎるのです。
変数「ransu」を設定している式を以下のように修正します。
var ransu = Math.random() * 3 * 1000
そうすると、0～3秒の間で表示、非表示が繰り返されます。
まとめ
JavaScriptでモグラたたきゲームを作る方法の第２回を説明しました。
第２回は「モグラを叩く処理」でした。
以上、JavaScriptでモグラたたきゲームを作る方法の第２回でした。