とうとう連載最終回になりました。

前回までで、ゲームの内容がお分かりの方もいるかと思いますが、
「3桁の数字当てゲーム」を作ります。

ゲームの概要ですが、
・ランダムに生成された0～9までの数字を使用した3桁の数字を当てる
・3桁の数字は同じ数字を使用しない
・回答は5回まで

チェック履歴には下記を表示
・入力した数字
・Hit数（Hit:数字も桁も同じ場合）
・Blow数（Blow：数字はあるが桁が違う場合）

ちなみに上記のゲーム概要をツールチップで表示させています。

まず、HTMLは下記になります。

次に、JavaScriptです。

function checkAnswer(Number) {
?// 入力値を配列化
?ArrNumber = Number.split("");
?Hit = 0;
?Blow = 0;
?for(i=0; i<3; i++) {
??// 数字も桁も同一の場合
??if(ArrNumber[i] == ArrAnswer[i]) {
???Hit++;
??// 数字はあるが桁が異なる場合
??} else if($.inArray(ArrNumber[i], ArrAnswer) != -1) {
???Blow++;
??}
?}

?HistoryStr = "入力値:"+Number+"→";
?ImgStr = "num.png";
?switch(Hit){
??// 正解の場合
??case 3:
???ImgStr = "num3.png";
???HistoryStr += "正解です";
???break;
??// 以降正解ではない場合
??case 2:
??case 1:
???ImgStr = "num2.png";
??default:
???if(Blow == 3) ImgStr = "num2.png"
???HistoryStr += Hit+"Hit,"+Blow+"Blow";
?}

?// 画像変更
?$("#answer_img").attr("src","img/"+ImgStr);
?// 入力履歴に追加
?$("#history").append(HistoryStr+"
");
?// 入力値をリセット
?$("#number").val("");
}

function makeAnswer() {
?ArrAnswer = new Array();
?for(i=0; i<3; i++) {
??ArrAnswer[i] = Math.floor(Math.random()*10)+"";
??// 同じ数字を使用している場合、再設定
??if(ArrAnswer[i] == ArrAnswer[i-1] || ArrAnswer[i] == ArrAnswer[i-2]) {
???i--;
??}
?}
}

$(function(){
?// 正解作成
?makeAnswer();
?// 入力回数初期化
?var CheckCnt = 0;
?// 入力最大回数
?var MaxCheckCnt = 5;

?$("#number").keypress(function(e){
??CheckFlg = false;
??var key = String.fromCharCode(e.which);
??// 数字以外のキーは許可しない
??if(!key.match(/d/)){
???alert("数字を入力して下さい。");
???return false;
??}
??// 同じ数字を許可しない
??if($(this).val().match(key)){
???alert("同じ数字を使用することはできません。");
???return false;
??}
??// 回数制限以内かをチェック
??if(CheckCnt >= MaxCheckCnt) {
???alert(MaxCheckCnt+"回までしか回答できません。リロードしてやり直して下さい。");
???return false;
??}
??CheckFlg = true;
?}).keyup(function(e){
??// 入力値に問題がない場合
??if(CheckFlg){
???Number = $(this).val();
???// 3桁に達していなければ、正解判定は行わない
???if(Number.length != 3) return true;
???// 入力回数をカウントアップ
???CheckCnt++;
???// 正解判定処理へ
???checkAnswer(Number);
??}
?});

?// ツールチップ
?$("#toolTip").hover(function(){
??$("#toolTipWrapper").fadeIn("slow");
?},function(){
??$("#toolTipWrapper").fadeOut("slow");
?});
});

入力フォームの上に画像を表示して、
当たったもしくは当たりそうな場合、画像を切り替えています。

ゲームしたい方はこちらになります。

では、またの機会に。。。