猜游戏时间循环

Question

请帮帮我，我被卡住了。我已经写了将近1个月了，现在我比刚开始的时候更困惑了。下面是一个片段:

const $inputs = $("#number input")
const $form = $("#number");
$inputs.on("input", function() {
if (this.value.length == this.maxLength) {
const $next = $(this).next('#number input');
if ($next.length) $next.focus();
if ($inputs.filter(function() {
return this.value !== ""
}).length === $inputs.length) {
$form.submit();
checkInput();
}
}
});

这是JSfiddle: https://jsfiddle.net/viwe/18yhtuo6/2/期望行为:用户必须输入时间，代码必须检查用户的答案，并对正确和错误的答案进行评分。这些都必须在给定的游戏时间内完成。(理想情况下，我希望有一个下拉菜单，并选择游戏时间从那里(额外)，但现在我只需要代码的工作。卡住点:每次用户提交答案时页面都会重新加载(从而重新开始分数和剩余时间)

Answer 1

很多事情

1. 我创建了一些全局变量来保存时间
2. 我将createTime代码移动到它自己的函数中以重用
3. 清理了一些代码

脚本没有超时-这将是下一个问题

https://jsfiddle.net/mplungjan/3mbqw80h/

function createTime() {
// create new date object and randomize the time, storing hr,min and sec in own variables
const now = new Date();
let hours = now.getUTCHours() * Math.random();
let minutes = now.getUTCMinutes() * Math.random();
let seconds = now.getUTCSeconds() * Math.random();
// Format the time variables
hours = Math.round(hours.toLocaleString('en-US', {
hour: 'numeric', // numeric, 2-digit
}));
minutes = Math.round(minutes.toLocaleString('en-US', {
minute: 'numeric', // numeric, 2-digit
}));
seconds = Math.round(seconds.toLocaleString('en-US', {
second: 'numeric', // numeric, 2-digit
}));
return {
hours,
minutes,
seconds
}
}
let time = createTime();
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90
let correctAnswers = [];
let incorrectAnswers = [];
drawClock();
function drawClock() {
drawFace(ctx, radius);
drawNumbers(ctx, radius);
drawNumbersSecs(ctx, radius);
drawTime(ctx, radius);
}
function drawTime(ctx, radius) {
let {
hours,
minutes,
seconds
} = time;
// console.log(hour)
//hour
// Calculate the angle of the hour hand, and draw it a length 
// (50% of radius), and a width (7% of radius):
hours = hours % 12;
hours = (hours * Math.PI / 6) + (minutes * Math.PI / (6 * 60)) + (seconds * Math.PI / (360 * 60));
drawHand(ctx, hours, radius * 0.5, radius * 0.04);
//minute
minutes = (minutes * Math.PI / 30) + (seconds * Math.PI / (30 * 60));
drawHand(ctx, minutes, radius * 0.7, radius * 0.03);
// second
seconds = (seconds * Math.PI / 30);
drawHand(ctx, seconds, radius * 0.9, radius * 0.02);
}
function drawHand(ctx, pos, length, width) {
ctx.beginPath();
ctx.lineWidth = width;
ctx.lineCap = "round";
ctx.moveTo(0, 0);
ctx.rotate(pos);
ctx.lineTo(0, -length);
ctx.stroke();
ctx.rotate(-pos);
}
function drawFace(ctx, radius) {
var grad;
// face
ctx.beginPath();
ctx.arc(0, 0, radius, 0, 2 * Math.PI);
ctx.fillStyle = 'black';
ctx.strokeStyle = 'white';
ctx.fill();
// outer ring
grad = ctx.createRadialGradient(0, 0, radius * 0.95, 0, 0, radius * 1.02);
grad.addColorStop(0, '#333');
// grad.addColorStop(0.5, 'white');
grad.addColorStop(1, '#fff');
ctx.strokeStyle = "white";
ctx.lineWidth = radius * 0.02;
ctx.stroke();
// inner circle
ctx.beginPath();
ctx.arc(0, 0, radius * 0.04, 0, 2 * Math.PI);
ctx.fillStyle = 'white';
ctx.fill();
}
function drawNumbers(ctx, radius) {
var ang;
var num;
// Set the font size (of the drawing object) to 15% of the 
// radius:
ctx.font = radius * 0.15 + "px arial";
// Set the text alignment to the middle and the center of the
// print position:
ctx.textBaseline = "middle";
ctx.textAlign = "center";
// Calculate the print position (for 12 numbers) to 85% of the 
// radius, rotated (PI/6) for each number:
for (num = 1; num < 13; num++) {
ang = num * Math.PI / 6;
ctx.rotate(ang);
ctx.translate(0, -radius * 0.85);
ctx.rotate(-ang);
ctx.fillText(num.toString(), 0, 0);
ctx.rotate(ang);
ctx.translate(0, radius * 0.85);
ctx.rotate(-ang);
}
}
// Draw the  minute / second numbers
function drawNumbersSecs(ctx, radius) {
let ang;
let num;
ctx.font = radius * 0.06 + "px helvetica";
ctx.textBaseline = "middle";
ctx.textAlign = "center";
for (num = 1; num < 61; num++) {
ang = num * Math.PI / 30;
ctx.rotate(ang);
ctx.translate(0, -radius * 1.06);
ctx.rotate(-ang);
ctx.fillText(num.toString(), 0, 0);
ctx.rotate(ang);
ctx.translate(0, radius * 1.06);
ctx.rotate(-ang);
}
}
// Evaluate the user's input
function checkInput() {
let {
hours,
minutes,
seconds
} = time;
let uHr = uHrs.value;
let uMin = uMins.value;
let uSec = uSecs.value;
const m = document.querySelector("h2");
if (uHr == hours && uMin == minutes && uSec == seconds) {
correctAnswers.push({
"time": time,
"answer": {
uHr,
uMin,
uSec
}
})
console.log(correctAnswers);
m.style.background = "green";
m.innerHTML = "correct";
} else {
incorrectAnswers.push({
"time": time,
"answer": {
uHr,
uMin,
uSec
}
})
console.log(incorrectAnswers);
m.style.background = "red";
m.innerHTML = "incorrect"
}
$("#right").html("Correct: " + correctAnswers.length);
$("#wrong").html("Incorrect: " + incorrectAnswers.length);
console.log(correctAnswers.length)
document.getElementById("number").reset();
time = createTime();
setTimeout(drawClock, 1000);
}

// Jump to next input box and run checkInput
$(function() {
const $inputs = $("#number input"),
$form = $("#number");
$inputs.on("input", function() {
if (this.value.length == this.maxLength) {
const $next = $(this).next('#number input');
if ($next.length) $next.select().focus();
if ($inputs.filter(function() {
return this.value.trim() !== ""
}).length === $inputs.length) {
checkInput();
}
}
});
})

* {
margin: 0;
padding: 0;
}
body {
background-color: black;
font-family: 'Courier New', Courier, monospace;
overflow: hidden;
}

.hide {
display: none;
}
.container {
display: block;
position: relative;
max-width: 800px;
left: 30%;
overflow: none;
}
canvas {
margin: 1em;
}
form input {
display: inline-flex;
position: relative;
left: 12.5%;
font-size: 1.3em;
padding: 0.25em;
width: 4em;
margin-bottom: 0.3em;
border-radius: 1em;
text-align: center;
}

@keyframes hello {
0% {
opacity: 0;
}
25% {
opacity: 1;
}
75% {
opacity: 1;
}
100% {
opacity: 1;
}
}
h2 {
position: relative;
max-width: 460px;
text-align: center;
margin: 1em;
padding: 0.5em;
font-size: 1.3em;
border-radius: 1em;
color: #fff;
animation-name: hello;
animation-duration: 4s;
}
#score {
font-size: 1em;
color: white;
text-align: center;
position: relative;
left: 6.75em;
display: block;
width: 100%;
max-width: 250px;
height: auto;
margin: 0.5em;
padding: 0.3em 1em;
border: 2px solid white;
border-radius: 2em;
}
form button {
margin: 0 2em;
padding: 0 0.6em;
}
#right {
color: green;
}
#wrong {
color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<canvas id="canvas" width="520" height="520"></canvas>
<div>
<form id="number">
<input placeholder="hr" type="number" maxlength="2" value="" id="uHrs" pattern="[1-12]" autofocus />
<input placeholder="min" type="number" maxlength="2" value="" id="uMins" pattern="[0-59]" />
<input placeholder="sec" type="number" maxlength="2" value="" id="uSecs" pattern="[0-59]" />
</form>
</div>
<div id="score">
<h6 id="game_time">Minutes left: </h6>
<h4 id="right">Correct : </h4>
<h4 id="wrong">Incorrect : </h4>
</div>
<h2 id="mark"></h2>

</div>
>