JavaScriptでモグラたたきゲームを作る方法について説明します。
全５回に分けて説明します。
第４回：モグラを増やす処理 ←今回はここ
第５回：仕上げ
今日は第４回です。
目次
モグラを増やす
モグラを増やすと、モグラたたきゲームの難易度が上がります。
今回はモグラを3匹に増やします。
見た目上、モグラを表示しているのは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_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でモグラたたきゲームを作る方法の第４回を説明しました。
第４回は「モグラを増やす処理」でした。
プログラムは、同じ処理でも異なる書き方ができることがあります。いろいろ試してみてください。
以上、JavaScriptでモグラたたきゲームを作る方法の第４回でした。