文档章节

JavaScript学习:逻辑猜数游戏

北风其凉
 北风其凉
发布于 2016/01/28 23:58
字数 793
阅读 290
收藏 2

一、游戏规则

逻辑猜数游戏也叫猜数字游戏,游戏的规则非常简单:由系统给出一个没有重复数字的四位数(第一位不为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

© 著作权归作者所有

共有 人打赏支持
北风其凉

北风其凉

粉丝 115
博文 498
码字总数 463468
作品 4
朝阳
程序员
jQuery学习(1)猜数字游戏

  jQuery是一个快捷、小型且特征丰富的JavaScript库。它使得HTML文档遍历及操作,事件处理,动画,Ajax等更简洁方便。它通过调用一个简单易用的API,就能在各种浏览器中使用。由于jQuery本...

jclian91
01/16
0
0
HTML5游戏开发高级教程 | Lynda教程 中文字幕

HTML5游戏开发高级教程 | Lynda教程 中文字幕 Advanced HTML5 Game Development 课程ID: 597988 时长: 2.3小时 所属类别:Html 全部游戏开发课程 了解如何使用HTML5创建交互式,动态和丰富多彩...

zwsub
08/04
0
0
安利一个好玩的JS编程游戏—warriorjs

今天在Chrome的掘金插件上出现了一个好玩的项目—warriorjs。它的简介是这么写的: 官网&文档:https://warrior.js.org/ 安装十分简单,通过 npm 就行(前端的同学们一定会~) 剩下的只要写逻...

05/18
0
0
编程入门先学什么 初学者编程入门指南

  编程入门先学什么?相信这是很多想要自学编程的小伙伴都会有的疑惑,本文将为大家带来初学者编程入门指南。 明确学习编程的目的   对于一个没有任何基础的小白来说,学习编程最重要的是...

W3Cschool小编
04/20
0
0
thinkphp模型层Model、Logic、Service讲解

thinkphp模型层Model、Logic、Service讲解 时间:2014-08-24 15:54:56 编辑:一切随缘 文章来源:php教程网 已阅读:771 次 js特效源码,就从这里开始 我有疑问【PHP186论坛提问】 jS游戏桌球...

thinkyoung
2015/09/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

idea 通过jpa自动生成实体类

引入jpa包 打开persistence窗口 右键选择连接数据库 如果数据库没配置,则可以在下图选项中配置 选择好数据库和实体类的生成地址

斩神魂
30分钟前
1
0
tcpdump 命令

TCPDUMP简介 tcpdump 是一个很常用的网络包分析工具,可以用来显示通过网络传输到本系统的 TCP/IP 以及其他网络的数据包。tcpdump 使用 libpcap 库来抓取网络报,这个库在几乎在所有的 Linu...

寰宇01
37分钟前
2
0
软件的Alpha、Beta、RC、GA版本的区别

Alpha:是内部测试版,一般不向外部发布,会有很多Bug.一般只有测试人员使用。 Beta:也是测试版,这个阶段的版本会一直加入新的功能。在Alpha版之后推出。 RC:(Release Candidate) 顾名思义...

乔老哥
38分钟前
2
0
慢雾安全海贼王:从DApp亡灵军团,细说区块链安全

本文转载自微信公号“万向区块链”,为慢雾安全负责人海贼王在万向区块链实验室举办的2018上海区块链国际周-技术开放日上的演讲速记整理。 这张图总结了智能合约攻防的各个方面,分为两大部分...

万向区块链
44分钟前
13
0
Matlab编程之——卷积神经网络CNN代码解析

卷积神经网络CNN代码解析 deepLearnToolbox-master是一个深度学习matlab包,里面含有很多机器学习算法,如卷积神经网络CNN,深度信念网络DBN,自动编码AutoE ncoder(堆栈SAE,卷积CAE)的作...

酒逢知己千杯少
45分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部