需要帮助以了解如何执行以下操作：
代码：
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();
});
答案 0 :(得分：1)
我稍微调整了你的Jsfiddle，请检查并告诉我这是否有帮助。这是Wroking Fiddle
添加工作片段（只考虑我的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>
答案 1 :(得分：1)
下面是一个工作代码段，基于小提琴中的代码。
首先是一些评论：
我使用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>
运行此代码段以查看其是否有效。看看它在全屏幕中的表现。
答案 2 :(得分：0)
如果您选择更改随机数值范围，我的解决方案将允许您使游戏更具可扩展性。
实时预览（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;
}