数字游戏 - 随机化

下面是一个工作片段，基于你的小提琴中的代码。

首先说几句：

• 我使用vw度量单位稍微修改了 CSS，因此显示元素的大小适应窗口大小。出于同样的原因，其他一些更改涉及百分比而不是像素。

• input标签没有结束标签，所以我从 HTML 中删除了它。

• 该脚本还会更新顶行中生成的对总数。为此，我将数字放在一个单独的span中，因为通过脚本每两秒复制一次文本"生成的随机数："并不是很优雅。

为了避免用户对

• 同一数字对单击两次，用户单击后将禁用 input 元素。一旦生成下一个数字对，它将再次启用。这样，用户就可以直观地指示该限制。

• 要获取 1、2、3 范围内的随机数，您不应使用：

  no1 = Math.ceil(Math.random()*3);
  

  但：

  no1 = 1 + Math.floor(Math.random()*3);
  

  因为，如果随机生成的会产生完美的 0，那么在第一种情况下你将有 no1 == 0。

评论后，添加了以下功能：

• 游戏由预设数量的生成对组成，之后用户必须确认是否再次玩。

• 两次数字生成之间的延迟每次缩短 5%。

这是代码：

var no1, no2, correctScore, wrongScore, missedScore, generatedNum, delay,
    generateTotal = 30;
function updateScreen(disabled) {
    $('#correctScore').text(correctScore);
    $('#wrongScore').text(wrongScore);
    $('#missedScore').text(missedScore);
    $('#generatedNum > span').text(generatedNum);
    $("#number1 > span").text(no1);
    $("#number2 > span").text(no2);
    $(":input").val(generatedNum >= generateTotal ? "START!" : "MATCH!");
    $(":input").prop('disabled', disabled);
}
function generate() {
    if (no1 == no2 && !$(":input").prop('disabled')) ++missedScore;
    if (generatedNum >= generateTotal) {
        updateScreen(false); // needed to show missedScore.
        if (confirm('Game over. Do you want to play again?')) start();
        return; // exit
    }
    no1 = 1 + Math.floor(Math.random()*3);
    no2 = 1 + Math.floor(Math.random()*3);
    ++generatedNum;
    updateScreen(false);
    setTimeout(generate, delay *= 0.95);
}
function start() {
    correctScore = wrongScore = missedScore = generatedNum = 0;
    delay = 2000;
    updateScreen(true);
    generate();
}
function check() {
    if (generatedNum >= generateTotal) return start(); // Start pressed
    if (no1 == no2) {
        ++correctScore;
    } else {
        ++wrongScore;
    }
    updateScreen(true); // disable button
}
$(function(){
    $(":input").click(check);
    start();
});

body                     { text-align: center; background: antiquewhite; }
table                    { background: white; width: 100%; }
td                       { width: 16.67%; font-size: 3vw;  }
#correctScore            { background: lime;               }
#wrongScore              { background: coral;              }
#missedScore             { background: violet;             }
.numberStyle             { padding: 0.25em; color: blue;   }
.numberStyle span, input { font-size: 5vw;                 } 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
    <tr>
        <td id="generatedNum" colspan="6">Random Numbers generated: <span>1</span></td>
    </tr>
    <tr>
        <td colspan="3">Number 1</td> <td colspan="3">Number 2</td>
    </tr>
    <tr>
        <td colspan="3" id="number1" class="numberStyle"><span>1</span></td>
        <td colspan="3" id="number2" class="numberStyle"><span>2</span></td>
    </tr>
    <tr>
        <td colspan="6"><input type="button" value="START!"></td>
    </tr>
    <tr>
        <td>Correct</td><td id="correctScore"><span>0<span></td>
        <td>Wrong</td>  <td id="wrongScore">  <span>0<span></td>
        <td>Missed</td> <td id="missedScore"> <span>0<span></td>
    </tr>
</table>

运行此代码段以查看其工作情况。查看它在全屏模式下的行为方式。

看了一下你的 Jsfiddle，请检查一下，让我知道这是否有帮助。这是小提琴

添加工作片段（只需考虑我的Jquery代码逻辑）

var no1, no2;
function randomize() {
  no1 = Math.ceil(Math.random() * 3);
  no2 = Math.ceil(Math.random() * 3);
}
function print() {
  $("#number1 > span").text(no1);
  $("#number2 > span").text(no2);
}
function check() {
  if (no1 == no2) {
    alert("Both numbers are the same")
  }
  if (no1 != no2) {
    alert("Both numbers are the different")
  }
}
$(function() {
  randomize();
  print();
  var clickedFlag = false;
  setInterval(function(){
    
    if(!clickedFlag)
    {
      var currNum = parseInt($('#missedScore span').text());
      $('#missedScore span').text(++currNum);  
    }
    
    clickedFlag = false;
    randomize();
    print();
    
    $(":input").off('click.RandomNum').on('click.RandomNum',function()  {
     clickedFlag = true;
     $(this).off('click.RandomNum');
      
     if(no1 == no2) {
      var currNum = parseInt($('#correctScore span').text());
      $('#correctScore span').text(++currNum);     
     }
     else if(no1 != no2) {
      var currNum = parseInt($('#wrongScore span').text());
      $('#wrongScore span').text(++currNum);     
     }  
      
  });
  }, 2000);
});

body {
  font-size: 40px;
  text-align: center;
  background-color: antiquewhite;
}
table {
  margin-top: 100px;
  background-color: white;
}
td {
  width: 150px;
}
span {
  font-size: 40px;
}
#correctScore {
  background-color: green;
}
#wrongScore {
  background-color: red;
}
#missedScore {
  background-color: blueviolet;
}
.numberStyle {
  padding: 10px 10px 10px 10px;
  color: blue;
}
.numberStyle span {
  font-size: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <table width="800" border="1" align="center">
    <tr>
      <td id="generatedNum" colspan="6" align="left"><span>Random Numbers generated : 1</span></td>
    </tr>
    <tr>
      <td colspan="3" align="center">Number 1</td>
      <td colspan="3" align="center">Number 2</td>
    </tr>
    <tr>
      <td colspan="3" id="number1" class="numberStyle"><span>1</span></td>
      <td colspan="3" id="number2" class="numberStyle"><span>2</span></td>
    </tr>
    <tr height="50px" ;>
      <td colspan="6">
        <input type="button" value="MATCH!" style="font-size:50px;" />
      </td>
    </tr>
    <tr>
      <td>Correct:</td>
      <td id="correctScore"><span>0</span></td>
      <td><span>Wrong</span></td>
    <td id="wrongScore"><span>0</span></td>
    <td><span>Missed</span></td>
    <td id="missedScore"><span>0</span></td>
        
</tr>
</table>
</body>

如果您选择更改随机数值范围，我的解决方案将允许您使游戏更具可扩展性。

实时预览（http://codepen.io/larryjoelane/pen/qZBMOB）

.HTML：

<div id="red"></div>
<div id="green"></div>
<div id="purple"></div>
<input id="match" type ="button" value="MATCH">

JQuery/JavaScript：

//interval time
var milliseconds = 2000;
//the random numbers to compare
var no1, no2;
//match button pressed counter
var matchPress = 0;
//scores for each box color
var red = 0,
green = 0,
purple = 0;
//create the interval
var interval = window.setInterval(function() {
  //store the random numbers between 1 and 3
  no1 = randomNumber(1, 3);
  no2 = randomNumber(1, 3);
  //boolean to check for match, true or false
  var match = no1 === no2;
  //debug
  console.log(match);
  //we have a match
  if (match && matchPress === 1) {
    //increment green
    green++;
    //increase the green score by 1
    $("#green").html(green);
  }
  //no match
  else if (!match && matchPress === 1) {
    //increment red
    red++;
    //increase the red score by 1
    $("#red").html(red);
  }
  //no button press but a match occured
  else if (matchPress !== 1 && match) {
    //increment purple
    purple++;
    //increase the purple score by 1
    $("#purple").html(purple);
  }
  //debug
  console.log("no1:" + no1 + " no2:" + no2);
  //enable the button
  $("#match").prop("disabled", false);
  //reset the matchPress counter
  matchPress = 0;
}, milliseconds);
function randomNumber(start, end) { //begin function
  //convert parameter to a number just in case its a string
  var thisStart = parseInt(start);
  //convert parameter to a number just in case its a string
  var thisEnd = parseInt(end);
  //return a random number between the start and end number
  return Math.floor(Math.random() * (thisEnd - thisStart + 1) + thisStart);
}; //end function
//events
$("#match").on("click", function() {
  //set the matchPress flag to 1
  matchPress = 1;
  //disable the button
  $(this).prop("disabled", true);
});

.CSS：

#red,
#green,
#purple {
  width: 50px;
  color: white;
  font-size: 18px;
  padding-top: 14px;
  padding-bottom: 14px;
  text-align: center;
}
#red {
  background-color: red;
}
#green {
  background-color: green;
}
#purple {
  background-color: purple;
}