ハイローゲーム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桁のハイローゲームになりました。

まぁ、ハイローと言いつつ、大小と表示しているのですが（笑