gpt4 book ai didi

javascript - 尝试为我的 HTML 游戏创造最快时间的高分

转载 作者:行者123 更新时间:2023-11-29 23:22:30 25 4
gpt4 key购买 nike

所以我正在制作这个 react 游戏,玩家必须尽可能快地点击一个框。我已经显示了单击框所花费的时间,但我试图显示玩家单击框的最快时间。非常感谢您的帮助。

这是我的代码:

<body>
<div>
<p>Your time: <span id="time"></span></p>
<p>Highscore: <span id="highscore"></span></p>
<div id="shape"></div>
</div>
<script>
var start = new Date().getTime();
function makeShapeAppear() {
document.getElementById("shape").style.display = "block"
start = new Date().getTime();
}
function appearAfterDelay() {
setTimeout(makeShapeAppear, 1000);
}
appearAfterDelay();
document.getElementById("shape").onclick = function() {
var end = new Date().getTime();
var timeTaken = (end - start)/1000;
document.getElementById("shape").style.display = "none";
document.getElementById("time").innerHTML = timeTaken + "s";
appearAfterDelay();
}
</script>
</body>

总而言之,我想在高分 ID 中显示最短的“timeTaken”变量。提前谢谢你。

最佳答案

如果没有高分,则存储上次用时,如果新用时小于你的高分,则将高分设置为用时。像这样。

#shape{
width: 200px;
height: 200px;
background-color:red;
}
<body>
<div>
<p>Your time:
<span id="time"></span>
</p>
<p>Highscore:
<span id="highscore"></span>
</p>
<div id="shape"></div>
</div>
<script>
var highscore;
var start = new Date().getTime();
function makeShapeAppear() {
document.getElementById("shape").style.display = "block"
start = new Date().getTime();
}
function appearAfterDelay() {
setTimeout(makeShapeAppear, 1000);
}
appearAfterDelay();
document.getElementById("shape").onclick = function () {
var end = new Date().getTime();
var timeTaken = (end - start) / 1000;
highscore = (timeTaken < highscore || !highscore ? timeTaken : highscore);
document.getElementById("shape").style.display = "none";
document.getElementById("time").innerHTML = timeTaken + "s";
document.getElementById("highscore").innerHTML = highscore + "s";
appearAfterDelay();
}
</script>
</body>

关于javascript - 尝试为我的 HTML 游戏创造最快时间的高分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50175273/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com