Функциональность:таймер не сбрасывается, когда «игра» перезапускает
пользователю играть в игру, основанной на времени в странице игры. Будет таймер обратного отсчета, который будет отслеживать продолжительность игры, следовательно, когда счетчик = 0, он проверит чек и оценит, удовлетворяет ли пользователь условиям игры.
The Game условия таковы:
1.), если счетчик равен 0, а скорость больше, чем 20мс, он будет перейти к следующей странице
еще
2 .) он перейдет на страницу «Gameover», и пользователю будет необходимо передать страницу игрового поля, которая затем вернется обратно к стартовой странице игры
И когда пользователь терпит неудачу в игре и перезапускает игру, счетчик предположим, что сброс что это будет считаться совершенно новой игрой.
То, что я сделал:
я сделал, счетчик и также записывается скорость и отображается на странице игры. Во-вторых, я также установил условные операторы для проверки условий (счетчик == 0 & & speed> 20), который, предположим, перемещает пользователя на правильные страницы, соответственно.
Выпуск: Пользователь может перейти на правильные страницы после окончания игры, поэтому условные проверки, что было сделано правильно. Однако для пользователей, которые провалили игру и перезапустили игру, таймер не сбрасывается до начального значения; например, счетчик = 10. Значение, когда счетчик = 0 из предыдущей игры попытается, он все еще установлен на counter = 0, я понимаю, что это потому, что я установил его как clearInterval(rollingInterval), следовательно, он очищает счетчик, а скорость не сбрасывается до 0,00 мс, предыдущая скорость все еще отображается.
Однако я хотел бы спросить, как я могу сбросить счетчик обратно на счетчик = 10, а также сбросить скорость = 0.00мс, когда пользователь перезапустит игру?
Я приложил код для прочтения:
function Page2() {
$("#page1").hide();
$("#page2").show();
}
//script for div id =page2
function MainGame(){
var numOfSpin = 0,
distanceCovered = 0,
counter = 0,
timer = 10;
var rollingInterval;
$("#scrollerDiv").scroll(function() {
var height = $("#scrollerDiv").scrollTop();
for (var i = 0; i < 250; i ++) {
if (height > i * 10) {
if (i >= 0 && i < 10) {
$("#roller").attr("src", "Image/rolling_pin/Rolling Pin Spin00"+i+".png");
}
if (i >= 10 && i < 100) {
$("#roller").attr("src", "Image/rolling_pin/Rolling Pin Spin0"+i+".png");
}
if (i >= 100 && i < 1000) {
$("#roller").attr("src", "Image/rolling_pin/Rolling Pin Spin"+i+".png");
$("#scrollerDiv").scrollTop(0);
numOfSpin++;
distanceCovered += 0.59;
console.log(distanceCovered);
console.log(numOfSpin);
}
}
}
\t \t \t
})
rollingInterval = setInterval(function() {
counter = counter + 1;
timer = timer - 1;
speed = distanceCovered/counter;
speed2dec = speed.toFixed(2);
//document.getElementById("speedSpan").innerHTML = speed2dec + "<br/>"+"ms";
$('#speedSpan').html(speed2dec+'<br>ms');
//document.getElementById("timeSpan").innerHTML = timer + "s"
$('#timeSpan').html(timer+'s');
//Ernest_Lee 13/11/15: Set Conditional Checks; user satisfy game condition, advance to next page, else navigate to the "GameOver" Page.
if (counter == 10 && speed >20) {
console.log("Count");
clearInterval(rollingInterval);
$("#page2").hide();
$("#page3").show();
}else if(counter == 10 && speed <20) {
clearInterval(rollingInterval);
$("#page2").hide();
$("#GameOver").show();
}
}, 1000)
}
function RevertPage() {
$("#GameOver").hide();
$("#page1").show();
}::-webkit-scrollbar {
display: none;
}
/*CSS styling for fadein counter */
#content {
position: fixed;
top: 850px;
left: 250px;
font-family: SFNewRepublic;
font-size: 250px;
color: orange;
opacity: 2;
}
.img-wrapper {
overflow: hidden;
position: relative;
display: inline-block;
}
.img-wrapper roll {
width: 400px;
height: auto;
}
.img-wrapper scroller {
width: 200px;
height: 500px;
}
/*Creating & Centering the gauge*/
#canvas {
display: inline-block;
position: fixed;
top: 700px;
left: 200px;
width: 300px;
margin: 100px auto;
}
#Counter {
display: inline-block;
position: fixed;
top: 700px;
left: 650px;
width: 300px;
margin: 100px auto;
}
/*Custom font for numbers*/
@font-face {
font-family: SFNewRepublic;
src: url("font/sfnewrepublic/SF_New_Republic.ttf");
}
/*Image set in Scroller & rolling-pin*/
#scrollerDiv {
position: fixed;
top: 1150px;
left: 200px;
background-color: transparent;
height: 650px;
width: 750px;
overflow: auto;
/* z-index:1;*/
z-index: 2;
}
#invisibleElement {
height: 2490px;
width: 1000px;
}
/*Function: NEW for Speed and Counter Text*/
#speedSpan {
color: #55380b;
font-family: SFNewRepublic;
font-size: 50px;
position: fixed;
align-content: center;
top: 900px;
left: 298px;
}
#timeSpan {
color: #55380b;
font-family: SFNewRepublic;
font-size: 80px;
position: fixed;
top: 900px;
left: 760px;
}
.container {
width: 750px;
height: 300px;
align-content: center;
clear: both;
}
.container input {
width: 400px;
height: 90px;
clear: both;
}
/* Game Page CSS Styling */
/*Game Page1 CSS Styling*/
#page1 {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
/*Game Page2 CSS Styling*/
#page2 {
top: 0;
left: 0;
z-index: 2;
}<div id="page1" align="center" style="background-image: url(Image/Page1.png); width:100%; height:100%;">
<input style="outline:0;height:90px;width:400px; margin-top:1300px" type="image" id="Point" src="http://atextures.com/paper-scroll-background-five/" onclick="Page2()" />
</div>
<div id="page2" class="img-wrapper" align="center" style=" position: relative; background-image: url(Image/Page2.png); background-repeat: no-repeat; display: none; width: 100%;height: 100%;">
<span id="speedSpan">0.00 m/s</span>
<span id="timeSpan">10 s</span>
<img id="roller" style="position: relative; top:1100px; width: 100%" src="http://atextures.com/paper-scroll-background-five/" />
<img id="scroll" style="position:absolute; top: 1250px; left: 380px; overflow-y: auto;" src="http://atextures.com/paper-scroll-background-five/">
<div id="scrollerDiv">
<p id="invisibleElement"></p>
</div>
</div>
<div id="GameOver" align="center" style=" background-image: url(Image/GameOver.png);background-repeat: no-repeat;width: 100%;height: 100%;display: none;">
<input style="outline:0;height:90px;width:400px; margin-top:1300px" type="image" id="OK" src="http://depositphotos.com/1045357/stock-photo-ok-button.html" onclick="RevertPage()" />
</div>
<!-- begin snippet: js hide: false -->
'clearInterval (rollInterval)' вызывается в абстрактной функции, которая имеет свой собственный объем. Я думаю, проблема заключается в том, что абстрактная функция не имеет возвращаемого значения, поэтому вызов 'rollInterval = setInterval (function() {...})' не обновляет rollInterval во внешней области. Попробуйте добавить 'return rollInterval'. – noumenal
@noumenal извините, но что вы имеете в виду? Я попытался добавить return rollInterval, и он, похоже, не работает слишком – Luke
Я попытался запустить ваш код, но, похоже, он не работает. Я думаю, вам нужно разделить вызовы функций на разные функции. Функция с именем $ не очень значима и чаще всего зарезервирована для jQuery. Я бы предложил рефакторинг кода, переименовав функции, так что каждая функция имеет четкое имя - глагол. Это означает, что вместо того, чтобы вложенности функции они должны быть записаны друг после друга, например: 'function1() {} function2() { function1(); } ' Таким образом, вы получите лучшее представление о цепочке событий. – noumenal