文档章节

JavaScript学习:逻辑猜数游戏

北风其凉
 北风其凉
发布于 2016/01/28 23:58
字数 793
阅读 308
收藏 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

© 著作权归作者所有

共有 人打赏支持
北风其凉

北风其凉

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

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

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

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

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

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

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

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

W3Cschool小编
2018/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

没有更多内容

加载失败,请刷新页面

加载更多

lucene 评分要素解析

基本规则:

Java搬砖工程师
29分钟前
0
0
ubutnu 14.04 安装JIRA

系统版本:Ubuntu 14.04 下载jira安装文件 sudo wget https://downloads.atlassian.com/software/jira/downloads/atlassian-jira-software-7.1.9-x64.bin 修改文件权限 sudo chmod 777 atl......

Kampfer
39分钟前
0
0
软件开发模型优缺点及其适用范围

瀑布模型、快速原型模型、增量模型、螺旋模型 瀑布模型也称软件生存周期模型。 优点: (1)它在软件工程中占有重要地位,它提供了软件开发的基本框架,这比依靠“个人技艺”开发软件好得多。...

无极之岚
39分钟前
0
0
孩子们各显神通对付 iOS 12「屏幕使用时间」的限制

简评:2018 年秋季,苹果公司推出了 iOS 12,其中备受好评的一项改变是:增加了屏幕使用时间限制,以减轻沉迷手机的状况。三个月过去后,这项功能似乎并没有对孩子造成太多困扰,道高一尺魔高...

极光推送
44分钟前
2
1
springCloud Spring Boot mybatis分布式微服务云架构-docker-feign-hystrix-ribbon(七)

简介 在上一节中,我们讨论了feign+hystrix在项目开发中,除了考虑正常的调用之外,负载均衡和故障转移也是关注的重点,这也是feign + ribbon+hystrix的优势所在,本节我们就讨论一下在feign...

sccspuercode
44分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部