JavaScriptでモグラたたきゲームを作る方法について説明します。
全５回に分けて説明します。
第３回：点数を表示する処理 ←今回はここ
第４回：モグラを増やす処理
第５回：仕上げ
今日は第３回です。
点数の表示
モグラたたきゲームで、点数を表示するようにします。
点数は、HTMLファイルに記述します。
第１回で作成した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点加算されるようにするには、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でモグラたたきゲームを作る方法の第３回を説明しました。
第３回は「点数を表示する処理」でした。
以上、JavaScriptでモグラたたきゲームを作る方法の第３回でした。