4日目です。前回は全部数値を消してもクリアした際のメッセージがない空しい状態でした。また、スコアもないのでゲームとしてちょっと空しいというか、目標がないというか何ともな感じになってます。そこで、今回はスコアの追加とステージクリアの処理を追加してみます。
まず、スコアの処理から。スコアを入れる変数を用意します。これは、そのまま「
var score = 0;」としました。次に、このスコアを表示する部分を用意しないといけません。これはHTMLで「
<div>SCORE : <span id="score">0</span></div>」として用意しました。まあ、span要素にスコアの値を表示する、という具合です。これで準備はOKです。
スコアを増やす場合は2つの値の合計が10だった時です。スコアに1点加算するには「
score = score + 1;」とします。変数に加算しただけでは画面に表示されないので「
document.getElementById("score").innerHTML = score;」としてスコアを画面に表示します。これでスコアの部分はできあがりです。
次にステージクリアの処理を追加します。このゲームでは4×6個の数字を消せばステージクリアになります。オリジナルの
TEN -10-の場合は、ちょっと面倒で最後の方では加算した値が10になるように数字が沸いてでてきます。これは複数の数値を足して10になるというルールのためです。現在、HTML5+JavaScriptに移植しているものは2つの数値しか加算せず、必ず全部消すことができるようになっています。ですので、処理としては非常に簡単です。
まず、「var ele = document.querySelectorAll("input");」として得られたinput要素の数を変数に入れておきます。今回はcountという名前の変数を用意しました。このcountにeleの合計数つまり「
count = ele.length;」として合計数を入れます。そして、タッチされた（クリックされた）2つの値の合計が10の場合は「
count = count - 2;」として2を引きます。2つタッチ（クリック）しているので2を引かないと永久にクリアできないゲームになってしまいます。
全部の数値が消されたかどうかはcountの値が0かどうかで判別します。ちなみに何らかの不具合でcountの値がマイナスになってしまうとステージクリアの処理ができないことになってしまいます。そんな事ありえないと思うかもしれませんが、予想外の出来事まで考慮しておくなら「if (count === 0)」でなく「if (count < 1)」として判別するのが安全です。ただし、これをやってしまうと何らかの不具合が発生した時に、不具合が発生していることが分からず、不具合そのものが発見できなくなることもあります。
ステージをクリアしたらアラートダイアログを表示してクリアした事を示します。こういう時のアラートダイアログはちょっと便利かもしれません。
ということで改良したゲームをプレイ。面白くないけど、スコアは表示されるし一応ステージクリアはできるようになりました。この段階でイマイチということは多分、改良してもイマイチな可能性が高いかもしれません・・・。面白くないのは、いつも同じ数字が表示されているから、というのもあります。また、スコアはクリアすれば12点と決まってしまっているせいもあります。これは、同じ事を繰り返し、成果がでないか、分かりにくいものは飽きられる、つまり常習性が低い → ゲーム性に乏しいということになります。
見た目もよろしくないし、このままでは最低の移植になってしまいそうなので、次回はどうにか改良したいところです。
HTMLファイルの内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TEN</title>
</head>
<body>
<h1>TEN</h1>
<div>SCORE : <span id="score">0</span></div>
<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 score = 0; // スコア（得点）を入れる変数
var count = 0; // ボタンの合計を入れる変数
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; // クリック時に呼び出す関数を指定する
}
count = ele.length; // input要素の総数を入れる
}
// 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!"; // メッセージを表示する
score = score + 1; // スコア（得点）を追加する
document.getElementById("score").innerHTML = score; // スコア（得点）を表示する
count = count - 2; // 合計から2を引く
if (count === 0){ // 全部消したかどうか調べる
alert("ステージクリア!");
}
return; // 関数から抜ける
}
// 合計が10でなかった場合
prevNumber = 0; // 数値を0にする
prevEle.style.backgroundColor = ""; // 透明にする
document.getElementById("msg").innerHTML = "合計が10じゃないよ！"; // メッセージを表示する
}
init(); // 初期化処理を呼び出す