數字遊戲 - 隨機

Question

需要幫助瞭解如何做到以下幾點：

1. 每2秒的間隔，這兩個數字將生成一個包含整數值的隨機數從1到3
2. 在按下「匹配「按鈕，如果兩個數字相同，則綠色標籤上的數字加1。
3. 按下」匹配「按鈕後，如果兩個數字不同，紅色標籤上的數字增加1。
4. 如果兩個隨機生成的數字相同，並且用戶沒有按t他在2秒鐘內「匹配」按鈕，紫色標籤上的數字增加1.
5. 增強評分系統以確保綠色標籤和紅色標籤只會增加1，即使用戶在其中按下多次間隔2秒。

代碼：被製成

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號）將產生含有整數隨機數值從5到6.

2. 對於每個隨機數ge毫不費力，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

下面是一個工作片段，根據您在小提琴的代碼。

首先一些備註：

• 我修改了CSS一點，使用vw計量單位，所以所顯示的元素的大小適應於窗口大小。出於同樣的原因，其他一些更改涉及百分比而不是像素。

• 一個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 2

我tweeked您的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>

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