Question

需要帮助以了解如何执行以下操作：

每2秒间隔，这两个数字将生成包含从1到3的整数值的随机数。
按下＆＃34;匹配＆＃34;按钮，如果两个数字相同，绿色标签上的数字增加1。
按下＆＃34;匹配＆＃34;按钮，如果两个数字不同，红色标签上的数字会增加1。
如果两个随机生成的数字相同，并且用户未在2秒内按“匹配”按钮，则紫色标签上的数字会增加1.
增强评分系统，确保绿色标签和红色标签仅增加1，即使用户在2秒钟内按下多次。

代码：

 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")
 }
 }


 $().ready(function(){

 randomize()
 print()

 $(":input").click(function(){
 if (no1 == no2){
    alert("Both numbers are the same")
 }
 if (no1 != no2){
    alert("Both numbers are the different")
 }
 randomize()
 print()
 })

})

改进

每2秒间隔，两个数字（即数字1和数字2）将生成包含5到6整数值的随机数。
对于生成的每个随机数，2秒间隔将减少0.1秒。
随机速度文本将显示生成的每个随机数的当前秒间隔。
一旦间隔达到0.8秒，javascript警告框将显示消息“间隔已达到0.8秒”。
当用户取消警报时，随机速度文本将重置为初始值，并重新开始为每个间隔随机生成的两个数字的速度。

当前代码

var no1, no2, correctScore, wrongScore, missedScore, generatedNum, delay

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('The interval has reached 0.8 seconds')) start();
    return; // exit
}
no1 = 5 + Math.floor(Math.random()*2);
no2 = 5 + Math.floor(Math.random()*2);
++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();
});

$(function(){
$(":input").click(check);
start();
});

Answer 1

我稍微调整了你的Jsfiddle，请检查并告诉我这是否有帮助。这是Wroking Fiddle

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

＆＃13;

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);

});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

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

首先是一些评论：

我使用vw度量单位对CSS进行了一些修改，因此显示的元素大小适应窗口大小。由于同样的原因，其他一些变化涉及百分比而不是像素。
input代码does not have an end-tag，因此我将其从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>

运行此代码段以查看其是否有效。看看它在全屏幕中的表现。

Answer 3

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

实时预览（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;
}

数字游戏 - 随机

3 个答案: