2日目：とりあえず遊べるようにする

2日目です。さすがに画面だけ作ってゲームができないのは駄目なので、どうにか最低限のルールで遊べるようにします。オリジナルのTEN -10-では複数の数字をタッチして合計が10になるようになっていますが、少しルールを変更します。というか、最初の段階では複雑な事はしないのが吉。ということで、新たなルールは「2つの数字をタッチしたら合計が10になれば数値を消す」ということにします。

このように変更するとタッチした（パソコンだとクリックした）2つの数値の合計が10かどうかを調べるだけでよいのでプログラムが簡単になるはず。
ということで早速実装します。input要素は「var ele = document.querySelectorAll("input");」とすれば全部取得できます。配列eleにはinput要素への参照が入ります。タッチ処理ですが、ひとまずおいておいてクリック処理で代用することにします。クリック処理はinput要素のonclickプロパティに設定します。まあ、今ならaddEventListener()を使うのが通例ですが、どのみち複数人で開発するわけでなし、複雑なプログラムでもないので短くシンプルに動けばOKということで。
onclickプロパティにクリック時に呼び出す処理を指定します。まあ、呼び出す関数を指定するということです。ここでは合計が10になったかどうかを調べるaddNumberという関数を呼び出すことにします。addNumber関数ないでクリックしたinput要素の値の合計が10かどうか調べるわけです。

ところで、最初にボタンをクリックした時と次のボタンをクリックした時の判別はどうすればよいのでしょうか。今回は変数を使って判別することにします。その変数はprevNumberという名前にしました。このprevNumberの値を最初は0にしておきます。ここがポイントです。つまりprevNumberの値が0だったら、1つ目の数値がクリックされていない、0以外なら2つ目の数値がクリックされたということになります。それで、クリックされたらprevNumberに値を入れます。クリックしたinput要素に表示されている値はvalueプロパティに入っているのでprevNumber = this.valueとすれば一応OK。一応というのは、この状態では数値でなく文字型になってしまうので数値として計算できません。そこでparseInt()を使って数値に変換します。JavaScriptでは他にもいくつかの方法で数値に変換できます。速度を要求しないのであれば、何でも構わないでしょう。

さて、最初のクリック時はprevNumberに数値を入れるだけでなく、もう１つやっておくことがあります。というのもTEN-10-では合計が10になったら、その数値を消すという処理があるためです。今回はボタンを消すことになります。そこで、消すボタンの情報を変数に入れておくことにします。変数名はprevEleとしました。
1回目のクリックはprevNumberが0かどうかで調べ、クリックされたinput要素の値をprevNumberに入れて終わりです。ここでreturnを使って関数から抜けます。

次に2回目のクリックの処理です。まあ、2回目というか2つ目のinput要素をクリックした場合の処理です。これはprevNumberとクリックされたinput要素の値の合計を調べます。10だったらクリックされたinput要素を非表示にします。これは「this.style.visibility = "hidden";」とするだけです。そして、直前にクリックされたもう1つのinput要素も非表示にしなければいけません。直前にクリックされた要素は変数prevEleに入れてあったので「prevEle.style.visibility = "hidden";」とすれば非表示にできます。あとは、prevNumberの値を0にして関数から抜けます。prevNumberを0にしないと2回目のクリックと見なされてしまうので正常に動作しなくなります。

あとは合計が10でなかった場合の処理です。この場合はprevNumberの値を0にするだけです。ただ、これだと分かりにくいので失敗だったことを示すアラートダイアログを表示します。

これで一応ゲームっぽくなりました。が、アラートダイアログとか表示されると結構うざったいですし、全部消してもクリアの文字もなし。イマイチなゲームがよりイマイチになりました・・・。それじゃあ駄目なので、次回はもう少しマシなものにしたいところ。

[サンプルを実行する]

[サンプルをダウンロード]

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>
<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;	// 要素の情報を変数に入れる
		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にする
		return;	// 関数から抜ける
	}
	// 合計が10でなかった場合
	prevNumber = 0;	// 数値を0にする
	alert("合計が10じゃないよ！");	// アラートダイアログを表示する
}
init();	// 初期化処理を呼び出す