JavaScript学习：逻辑猜数游戏

一、游戏规则

逻辑猜数游戏也叫猜数字游戏，游戏的规则非常简单：由系统给出一个没有重复数字的四位数（第一位不为0），玩家每次猜一个数，系统根据这个数字判断：位置正确的数字个数（记为A）、数字正确但位置不正确的数字个数（记为B）。

在本程序中，玩家最多有8次机会猜测，如果第8次仍未猜出正确答案，则游戏失败。

二、页面代码

建立一个文件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>

三、效果演示

使用Firefox浏览器（版本号43.0.4）打开bulls_and_cows.html后，效果如下图所示：

END

来源：oschina

链接：https://my.oschina.net/u/1425762/blog/611128

标签

javascript

逻辑猜数

猜数字