西暦和暦変換が一段落したので、とりあえずゲームを作ってみました。
といっても、遊べるレベルのものではありませんが・・・。
ハイ・アンド・ロー・ゲームというものです。
相手が隠している数字を予想し、その予想した数字が答えよりも大きい場合はハイ(High)、小さい場合はロー(Low)と答えるので、何回で答えを当てられるかという遊びです。
最初は処理を簡単にするために、1桁の数字とします。
遊びとしては物足りないのですが、作りやすさとしては2桁以上の時と大違いになります。
入力にはボタンを10個用意しました。それぞれ0から9までの数字に対応します。
<button id="tenkey" onClick="doNumButton(0)">0</button>
<button id="tenkey" onClick="doNumButton(1)">1</button>
<button id="tenkey" onClick="doNumButton(2)">2</button>
<button id="tenkey" onClick="doNumButton(3)">3</button>
<button id="tenkey" onClick="doNumButton(4)">4</button>
<br>
<button id="tenkey" onClick="doNumButton(5)">5</button>
<button id="tenkey" onClick="doNumButton(6)">6</button>
<button id="tenkey" onClick="doNumButton(7)">7</button>
<button id="tenkey" onClick="doNumButton(8)">8</button>
<button id="tenkey" onClick="doNumButton(9)">9</button>
<br>
電話配列か電卓配列の3×3＋1の形式にしたかったのですが、画面サイズの関係で2列にしています。解像度の高い機種を使っている人は好きな配列にすると使いやすいかもしれません。
例えば、電話配列なら
<button id="tenkey" onClick="doNumButton(1)">1</button>
<button id="tenkey" onClick="doNumButton(2)">2</button>
<button id="tenkey" onClick="doNumButton(3)">3</button>
<br>
<button id="tenkey" onClick="doNumButton(4)">4</button>
<button id="tenkey" onClick="doNumButton(5)">5</button>
<button id="tenkey" onClick="doNumButton(6)">6</button>
<br>
<button id="tenkey" onClick="doNumButton(7)">7</button>
<button id="tenkey" onClick="doNumButton(8)">8</button>
<button id="tenkey" onClick="doNumButton(9)">9</button>
<br>
<button id="tenkey" onClick="doNumButton(0)">0</button>
となります。
ボタンサイズを個別に指定する方法がわからなかったので、CSSで指定しています。
<style type="text/css">
#tenkey{font-size: 25px;width: 50px; height:50px;}
</style>
ボタンが押されると、doNumButton(n)を実行して表示と判定を行います。
表示は、過去5回分までの履歴と、その数字の大小、そして今の回数を表示します。
判定は、入力された数字が正解かどうかを調べて正解ならば通知してリロードしています。
リロードすると初期化されて次の問題が表示されることになります。
function doNumButton(n) {
count++;
for (i=max-1; i>0; i--) {
tryNumber[i] = tryNumber[i-1];
}
tryNumber[0] = n;
showHistory();
if (n == ans) {
alert("あたりです！");
location.reload();
}
}
過去5回分の履歴は配列にとってあり、入力のたびに後ろへずらし、先頭を最新の値にしています。それを表示用の領域へ出力すると、スクロールしているように見えます。
未入力部分は-1としておき、それを判定して表示しないようにしています。
function showHistory() {
var str = "";
for (i=0; i<max; i++) {
if (tryNumber[i] < 0) {
str = str + "<br>";
} else {
str = str + tryNumber[i];
if (tryNumber[i] > ans) {
str = str + " 大<br>";
} else if (tryNumber[i] < ans) {
str = str + " 小<br>";
} else {
str = str + " 正解<br>";
}
}
}
$("info").innerHTML = str + count + "回";
}
1桁以上にすると入力部分が厄介になるのですが、気が向いたらやってみます。
それよりも、そろそろSDKが使いたくなって来ました。
