Количество игр - рандомизированные

Question

Нужна помощь, чтобы понять, как сделать следующее:

1. Каждые 2 секунды интервал, эти два числа будут генерировать случайные числа, содержащие значения целых чисел от 1 до 3.
2. После нажатия кнопки " Матч ", если оба числа совпадают, номер на зеленой метке увеличивается на 1.
3. При нажатии кнопки« Матч », если эти два номера отличаются друг от друга, число на красной этикетке увеличивается на 1.
4. Если два случайно сгенерированных числа одинаковы, и пользователь не нажал t он «Матч» в течение 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. Для каждого случайного числа 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); 
  

  Потому что, если когда-либо случайно сгенерированный бы производить perfect 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

Мое решение позволит вам сделать вашу игру более расширяемой игрой, если вы хотите, например, изменить диапазоны значений случайных чисел.

Live Preview (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; 
}