JavaScript學習：邏輯猜數遊戲

時間 2019-11-12

原文原文鏈接

1、遊戲規則

邏輯猜數遊戲也叫猜數字遊戲，遊戲的規則很是簡單：由系統給出一個沒有重複數字的四位數（第一位不爲0），玩家每次猜一個數，系統根據這個數字判斷：位置正確的數字個數（記爲A）、數字正確但位置不正確的數字個數（記爲B）。css

在本程序中，玩家最多有8次機會猜想，若是第8次仍未猜出正確答案，則遊戲失敗。html

2、頁面代碼

創建一個文件bulls_and_cows.html，裏面輸入下面代碼：瀏覽器

<html>
  <head>
    <title>JS學習 - 邏輯猜數</title>
  </head>
  <style type="text/css">
      table
      {
          border-spacing: 0 0;
          border-collapse: collapse;
          font-size: 10pt;
      }
      table th
      {
          background: #3399FF;
          text-align: center;
          text-decoration: none;
          font-weight: normal;
          padding: 3px 6px 3px 6px;
          width:200px;
      }
      table td
      {
          vertical-align: top;
          text-align: center;
          padding: 3px 6px 3px 6px;
          margin: 0px;
          border: 1px solid #3399FF;
      }
  </style>
  <body>
    請輸入你猜想的答案
    <input type="text" id="myGuess" onkeydown="keydown();" />
    <input type="button" id="submit" value="提交結果" onclick="submit();" />
    <input type="button" id="reset" value="從新開始" onclick="restart();" />
    <input type="button" id="cheat" value="顯示答案" disabled="true" onclick="cheat();" />
    <hr>
    <table id="console">
      <tr>
        <th>序號</th>
        <th>個人猜想</th>
        <th>線索</th>
      </tr>
    </table>
    <br />
    <div id="result"></div>
    <script>

      var counter = 1;
      var answer = "";

      function submit() {
          //輸入合法性校驗
          var myGuess = document.getElementById("myGuess").value;
          if (myGuess.trim() == "") {
              alert("未輸入任何數據");
              return;
          } else if (!/^(?!.*?(\d).*?\1.*?$)\d+$/.test(myGuess) || myGuess.length != 4) { 
              alert("請輸入四個不重複的數字");
              return;
          }
          if (counter == 1) {
              answer = generateAnswer();
              document.getElementById("cheat").disabled = false;
          }
          //提交數據
          var table = document.getElementById("console");
          var root = table.insertRow(table.rows.length);
          var c1 = root.insertCell(0);
          c1.innerHTML = counter;
          var c2 = root.insertCell(1);
          c2.innerHTML = myGuess;
          var c3 = root.insertCell(2);
          var hint = getHint(answer, myGuess);
          c3.innerHTML = hint;
          if (hint == "4A0B") {
              victory();
          } else if (counter == 8) {
              defeat();
          }
          counter++;
          document.getElementById("myGuess").value = ""; //清空輸入框數據
      }

      //獲勝
      function victory() {
          document.getElementById("result").innerHTML = "恭喜你，猜對了";
          document.getElementById("myGuess").value = "";
          document.getElementById("myGuess").readOnly = true;
          document.getElementById("submit").disabled = true;
          document.getElementById("cheat").disabled = true;
      }

      //直接查看答案
      function cheat() {
          document.getElementById("result").innerHTML = "正確答案是【" + answer + "】";
          document.getElementById("myGuess").value = "";
          document.getElementById("myGuess").readOnly = true;
          document.getElementById("submit").disabled = true;
          document.getElementById("cheat").disabled = true;
      }

      //失敗
      function defeat() {
          document.getElementById("result").innerHTML = 
            "猜想次數超過限制，解題失敗，正確答案是【" + answer + "】";
          document.getElementById("myGuess").value = "";
          document.getElementById("myGuess").readOnly = true;
          document.getElementById("submit").disabled = true;
          document.getElementById("cheat").disabled = true;
      }

      //從新開始遊戲
      function restart() {
          //清空table
          var table = document.getElementById("console");
          while (table.rows.length > 1) {
            table.deleteRow(1);
          }
          //按鈕可用性設置
          document.getElementById("result").innerHTML = "";
          document.getElementById("myGuess").value = "";
          document.getElementById("myGuess").readOnly = false;
          document.getElementById("submit").disabled = false;
          document.getElementById("cheat").disabled = true;
          //重置參數
          counter = 1;
          answer = "";
      }

      //生成隨機數
      var getRand = function (begin, end) {
          return Math.floor(Math.random() * (end-begin)) + begin;
      }

      //生成一個由不一樣數字組成的四位數
      var generateAnswer = function() {
          var a, b, c, d;
          a = getRand(1, 10);
          do {
            b = getRand(0, 10);
          } while (b == a);
          do {
            c = getRand(0, 10);
          } while (c == b || c == a);
          do {
            d = getRand(0, 10);
          } while (d == c || d == b || d == a);
          //console.log(a.toString() + b + c + d);
          return a.toString() + b + c + d;
      }

      //獲取線索
      var getHint = function(secret, guess) {
          if (secret === null || guess === null || secret.length != guess.length) {
              return "";
          }
          var countA = 0;
          var countB = 0;
          var count = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
          for (var i = 0; i < secret.length; i++) {
              if (secret[i] == guess[i]) {
                  countA++;
              } else {
                  count[secret[i]]++;
                  if (count[secret[i]] <= 0) {
                      countB++;
                  }
                  count[guess[i]]--;
                  if (count[guess[i]] >= 0) {
                      countB++;
                  }
              }
          }
          return countA + "A" + countB + "B";
      }

      //在文本框輸入完畢後按下回車視同提交
      function keydown() {
          if (event.keyCode == 13) {
              var button = document.getElementById("submit");
              button.click();
          } 
      }

    </script>
  </body>
</html>