3日目です。前回のはクリックして10でない時にアラートダイアログが表示されたり、ちょっとうざったい状態でした。ということで、アラートダイアログ表示するのは、やめて画面内にメッセージを表示するように改良します。
画面内に文字を表示するためにdiv要素を1つ追加しておきます。処理しやすくするためにdiv要素にID名としてmsgをつけておきます。こうしておくと、後でプログラムから扱いやすくなるためです。
前回はメッセージは「alert("合計が10じゃないよ！");」としてアラートダイアログに表示していました。これを画面内（つまりdiv要素内）に表示するには「
document.getElementById("msg").innerHTML = "合計が10じゃないよ！";」のようにします。document.getElementById()を使えば指定したID名を持つ要素を示すことができます。せっかくなので、合計が10になった場合にも何かメッセージを表示することにします。とりあえず「document.getElementById("msg").innerHTML = "OK!";」としてOK!の文字を表示しておきます。まあ、何でもよいのですけど。
さて、これでうざったいアラートダイアログは表示されなくなりましたが、もう1つ改良することにします。オリジナルの
TEN -10-では一度タッチした数値はタッチされた事を示すために数字の色が若干暗くなります。そこで、今回はクリックされたボタンの背景色を変えて、クリックされた事を明確に示すようにします。
今回はボタンの背景色を変えることにします。これはスタイルシートを操作すればよく「
prevEle.style.backgroundColor = "red";」とすれば赤色の背景色になります。ついでにボタン形状も変化してしまいますが、分かりやすくなってよいでしょう（多分）。
忘れてはいけないのが、合計が10でなかった場合は元の色（形状）に戻さないといけないことです。ここで間違って"white"をスタイルシートに設定してしまうとボタンの形状が変わったままになってしまいます。元に戻すには「
prevEle.style.backgroundColor = "";」のように空文字を指定します。これで、バッチリです。
多少はゲームがやりやすくなった感じです。が、スコアもないしステージクリアのメッセージもありません。次回はスコアやステージクリアの処理を追加したいところです。
HTMLファイルの内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TEN</title>
</head>
<body>
<h1>TEN</h1>
<form>
<!-- 1段目 -->
<input type="button" value="6">
<input type="button" value="7">
<input type="button" value="1">
<input type="button" value="6">
<br>
<!-- 2段目 -->
<input type="button" value="9">
<input type="button" value="3">
<input type="button" value="8">
<input type="button" value="2">
<br>
<!-- 3段目 -->
<input type="button" value="5">
<input type="button" value="7">
<input type="button" value="2">
<input type="button" value="6">
<br>
<!-- 4段目 -->
<input type="button" value="4">
<input type="button" value="4">
<input type="button" value="6">
<input type="button" value="8">
<br>
<!-- 5段目 -->
<input type="button" value="3">
<input type="button" value="4">
<input type="button" value="7">
<input type="button" value="2">
<br>
<!-- 6段目 -->
<input type="button" value="4">
<input type="button" value="5">
<input type="button" value="3">
<input type="button" value="8">
</form>
<div id="msg"></div>
<script src="main.js"></script>
</body>
</html>
JavaScriptファイル (main.js) の内容
// TEN HTML5 version
// (c) 2014 Cybermuse
// Arranger 古籏一浩
var prevNumber = 0; // 直前にクリックした数字を入れる変数
var prevEle = null; // 直前にクリックした要素を入れる変数
// 初期化処理
function init(){
var ele = document.querySelectorAll("input"); // クリックしたら処理するようにイベントを設定
for(var i=0; i<ele.length; i++){ // 要素の数だけ繰り返す
ele[i].onclick = addNumber; // クリック時に呼び出す関数を指定する
}
}
// 2つの数字の合計が10かどうか調べる
function addNumber(){
// 1個目のクリックの場合
if (prevNumber === 0){
prevEle = this; // 要素の情報を変数に入れる
prevEle.style.backgroundColor = "red"; // 背景を赤色にする
prevNumber = parseInt(this.value); // クリックされた要素の番号を変数に入れる
return; // 関数から抜ける
}
// 2個目のクリックの場合
var total = prevNumber + parseInt(this.value); // 直前の数値とクリックされた要素の数値を加算する
if (total === 10){ // 合計が10の場合の処理
this.style.visibility = "hidden"; // 現在の要素を非表示にする
prevEle.style.visibility = "hidden"; // 前の要素を非表示にする
prevNumber = 0; // 数値を0にする
document.getElementById("msg").innerHTML = "OK!"; // メッセージを表示する
return; // 関数から抜ける
}
// 合計が10でなかった場合
prevNumber = 0; // 数値を0にする
prevEle.style.backgroundColor = ""; // 透明にする
document.getElementById("msg").innerHTML = "合計が10じゃないよ！"; // メッセージを表示する
}
init(); // 初期化処理を呼び出す