javascript - 数字游戏 - 随机

Question

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

1. 每隔 2 秒，这两个数字将生成包含从 1 到 3 的整数值的随机数。
2. 按下“匹配”按钮后，如果两个数字相同，则绿色标签上的数字增加 1。
3. 按下“匹配”按钮后，如果两个数字不同，则红色标签上的数字加 1。
4. 如果两个随机生成的数字相同，并且用户没有在 2 秒内按下“匹配”按钮，则紫色标签上的数字加 1。
5. 增强计分系统以确保绿色标签和红色标签只会增加 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()
 })

})

待改进

1. 每隔 2 秒，这两个数字(即数字 1 和数字 2)将生成包含从 5 到 6 的整数值的随机数。

2. 每产生一个随机数，2秒的间隔就会减少0.1秒。

3. 随机速度文本将显示当前生成的每个随机数的秒数间隔。

4. 一旦间隔达到 0.8 秒，javascript 警告框将显示消息“间隔已达到 0.8 秒”。

5. 当用户解除警报时，随机速度文本将重置为初始值，并重新开始为每个间隔随机生成的两个数字的速度。

当前代码

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

下面是一个工作片段，基于您的 fiddle 中的代码。

首先是一些评论:

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

• 一个输入标签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>

运行此代码段以查看其工作情况。还可以查看它在全屏模式下的表现。