2012年10月11日木曜日

ハイローゲーム3桁対応

ちょっと考えたらできてしまいました。

ハイローゲーム3桁

入力途中の状態を作るため、表示用のエリアを作り、履歴表示の部分を小さめにします。


  <p id="temp" style="font-size:25px;text-align:center;"></p>
  <p id="info" style="font-size:20px;text-align:center;"></p>


数字を3桁入力するために、決定ボタンを追加します。また、入力をキャンセルするためにクリアボタンも作ります。


    <button id="exekey" onClick="doExeButton()">決定</button>
    <button id="exekey" onClick="doClrButton()">クリア</button>


数字ボタンが押された時は、押された数字を3桁まで覚えておき、tempに表示します。


    function doNumButton(n) {
      if (cntNum < 3) {
        inpNum = inpNum*10 + n;
        cntNum++;
      }
      showNumber();
    }


tempへの表示は他でも使うので関数showNumber()としています。


    function showNumber() {
      $("temp").innerHTML = inpNum;
    }

クリアボタンが押された時は、それまでに入力された内容をクリアして表示を更新します。

    function doClrButton() {
        cntNum = 0;
        inpNum = 0;
        showNumber();
    }

決定ボタンが押された時の動作は、1桁の時の数字が押された処理と同様の処理になります。

    function doExeButton() {
      count++;
      for (i=max-1; i>0; i--) {
        tryNumber[i] = tryNumber[i-1];
      }
      tryNumber[0] = inpNum;
      showHistory();
      if (inpNum == ans) {
        alert("あたりです!");
        location.reload();
      }
      doClrButton();
    }

履歴表示は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 + "回";
    }

問題作成は、0~999の値になるので、*1000に変わっています。

    function getRandom1000() {
        var r = Math.floor(Math.random() * 1000);
        return (r);
    }

これで3桁のハイローゲームになりました。
まぁ、ハイローと言いつつ、大小と表示しているのですが(笑

0 件のコメント:

コメントを投稿