当我完成第一轮后开始 Clickgame 时,秒数为 0,5,4,3,2,1,而不是 5,4,3,2,1。有谁知道代码中有什么错误以及需要更改什么?所以这就像 5 被算成双倍一样。
我想知道的另一件事是,如何添加一个功能(输入 HTML)来添加一个弹出窗口,用户可以在其中选择自己想要播放的秒数时间?
let klick = 0;
display = document.querySelector('#time');
$("#start").click(function() { //clickfunktion beim starten.
$("#start").fadeOut(); //Der Startbutton geht weg
$("#welcome").fadeOut(); // Das Willkommensschild geht weg
$("#time").fadeIn(900); //Timer kommt
$("#clicker").animate({
height: 'toggle'
}); //clicker wird gestartet
var dauer = 5;
startTimer(dauer); //übergibt die variable dauer, und dass die Funktion gestartet wird.
})
function startTimer(dauer) {
let timer = 5;
zeit = setInterval(function() {
display.textContent = parseInt(timer); // zeigt sekunden-variable
--timer; //setzt den timer immer einen herab
if (timer < 0.00) {
timer = 5;
console.log(timer);
$("#start").fadeIn();
$("#welcome").fadeIn();
$("#time").fadeOut();
$("#clicker").fadeOut();
$("#clicker").css("margin-top", "10%");
$("#clicker").css("margin-left", "50%");
alert("Sauber du hast " + klick + " klicks in 5 Sekunden geschafft!");
klick = 0
console.log(timer);
clearInterval(zeit)
} //wenn timer auf 0 ist, wird alles wieder angezeigt und die Interval-Function beendet
}, 1000); //zahl gibt an, wie oft die Function pro zeit wiederholt wird. Hier eine Sekunde (1000Millisekunden)
};
$("#clicker").click(function() {
let zufall = Math.floor(Math.random() * 40) - 20 //setzt eine zufällige höhe für den clicker
let zufal = Math.floor(Math.random() * 45) //Zufällige Variable für den Linkswert
klick = klick + 1 //setzt den zähler beim klicken eins hoch
if (klick % 2 == 0) {
$("#clicker").animate({
opacity: '0.3',
left: zufall + "%",
top: zufal + "%"
}, "fast"); //bewegt den Klick-Block auf eine zufällige Stelle
} else {
$("#clicker").animate({
opacity: '1.0',
left: zufall + "%",
top: zufal + "%"
}, "fast")
}
});
<div><span id="time"></span> </div>
<div id="welcome">Willkommen zu unserem Reaktionsspiel! Wenn du bereit bist, klicke auf "Start"</div>
<button id="start" type=button>Start</button>
<button id="clicker" type=button>KLICK</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript"></script>
<script language="javascript" type="text/javascript" src="index.js"></script>
最佳答案
正如用户 @Robin Zigmond 所建议的,因为您正在使用 setInterval,所以您每次运行间隔之前都会等待一秒钟。
对此的一个潜在解决方案是将您的代码放在一个函数中,首先调用它,然后设置您的时间间隔。
我在下面附上了一个可行的解决方案:
let klick = 0;
display = document.querySelector('#time');
$("#start").click(function() { //clickfunktion beim starten.
$("#start").fadeOut(); //Der Startbutton geht weg
$("#welcome").fadeOut(); // Das Willkommensschild geht weg
$("#time").fadeIn(900); //Timer kommt
$("#clicker").animate({
height: 'toggle'
}); //clicker wird gestartet
var dauer = 5;
startTimer(dauer); //übergibt die variable dauer, und dass die Funktion gestartet wird.
})
function startTimer(dauer) {
let timer = 5;
runTimer();
zeit = setInterval(runTimer, 1000); //zahl gibt an, wie oft die Function pro zeit wiederholt wird. Hier eine Sekunde (1000Millisekunden)
function runTimer(){
display.textContent = parseInt(timer); // zeigt sekunden-variable
--timer; //setzt den timer immer einen herab
if (timer < 0.00) {
timer = 5;
console.log(timer);
$("#start").fadeIn();
$("#welcome").fadeIn();
$("#time").fadeOut();
$("#clicker").fadeOut();
$("#clicker").css("margin-top", "10%");
$("#clicker").css("margin-left", "50%");
alert("Sauber du hast " + klick + " klicks in 5 Sekunden geschafft!");
klick = 0
console.log(timer);
clearInterval(zeit);
} //wenn timer auf 0 ist, wird alles wieder angezeigt und die Interval-Function beendet
}
};
$("#clicker").click(function() {
let zufall = Math.floor(Math.random() * 40) - 20 //setzt eine zufällige höhe für den clicker
let zufal = Math.floor(Math.random() * 45) //Zufällige Variable für den Linkswert
klick = klick + 1 //setzt den zähler beim klicken eins hoch
if (klick % 2 == 0) {
$("#clicker").animate({
opacity: '0.3',
left: zufall + "%",
top: zufal + "%"
}, "fast"); //bewegt den Klick-Block auf eine zufällige Stelle
} else {
$("#clicker").animate({
opacity: '1.0',
left: zufall + "%",
top: zufal + "%"
}, "fast")
}
});
<head>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div><span id="time"></span> </div>
<div id="welcome">Willkommen zu unserem Reaktionsspiel! Wenn du bereit bist, klicke auf "Start"</div>
<button id="start" type=button >Start</button>
<button id="clicker" type=button>KLICK</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript"></script>
<script language="javascript" type="text/javascript" src="index.js"></script>
</body>
抱歉,我的语言与文档不同,因此评论可能会被关闭。
关于javascript - 为什么游戏计时为 0、5、4、3、2、1,而不是 5、4、3、2、1 秒?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53304548/