Javascript/Canvas Jquery 猜游戏时间循环

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/ 期望的行为：用户必须输入时间，代码必须检查用户的答案并记录正确和错误答案的分数。这必须全部发生在给定的游戏时间内。（理想情况下，我希望有一个下拉菜单和 select 游戏时间（额外），但现在只需要代码即可。卡点：每次用户提交答案时都会重新加载页面（从而重新开始剩余的分数和时间）

Answer 1

一些事情

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

脚本不会超时 - 这将是您的下一个问题

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>
>

Javascript/Canvas Jquery 猜游戏时间循环

Javascript/Canvas Jquery Guessing game time loop

javascript

timer