反应英雄滑块 - Javascript

反应英雄滑块是一款基于Javascript的简单而有趣的反应测试。

程序演示

可以通过以下链接查看程序演示：https://codesandbox.io/s/reaction-hero-slider-zt345

实现原理

反应英雄滑块的实现原理很简单，它是基于鼠标点击事件和定时器实现的。

具体来说，程序首先生成一个随机数，然后将这个随机数作为滑块的位置。当用户按下鼠标时，程序会记录下按下的时间，并与上一次松开鼠标的时间进行比较，计算出用户的反应时间。程序会将用户的反应时间显示出来，并且会生成一个新的滑块继续游戏。

代码示例：

function createSlider() {
  const slider = document.createElement("div");
  slider.className = "slider";
  slider.style.left = Math.random() * 80 + 10 + "%";
  slider.style.top = Math.random() * 80 + 10 + "%";
  slider.addEventListener("mousedown", start);
  return slider;
}

function start() {
  const start_time = new Date().getTime();
  this.removeEventListener("mousedown", start);
  this.addEventListener("mouseup", end);
  this.addEventListener("mousemove", move);

  function end() {
    const end_time = new Date().getTime();
    const reaction_time = (end_time - start_time) / 1000;
    alert("Your reaction time is: " + reaction_time.toFixed(3) + "s");
    this.remove();
    document.body.appendChild(createSlider());
  }

  function move(event) {
    this.style.left = event.clientX - this.offsetWidth / 2 + "px";
    this.style.top = event.clientY - this.offsetHeight / 2 + "px";
  }
}

document.body.appendChild(createSlider());

其他功能

为了使程序更加灵活，可以添加一些其他的功能。例如，可以增加一个倒计时器，限制用户的反应时间；还可以添加一个排行榜，记录用户的成绩。

代码示例：

function addCountdown(seconds) {
  const countdown = document.createElement("div");
  countdown.className = "countdown";
  document.body.appendChild(countdown);

  const timer = setInterval(() => {
    seconds--;
    if (seconds <= 0) {
      clearInterval(timer);
      countdown.remove();
      return;
    }
    countdown.innerHTML = seconds.toString();
  }, 1000);
}

function addScore(reaction_time) {
  const scores = JSON.parse(localStorage.getItem("scores") || "[]");
  scores.push(reaction_time);

  scores.sort((a, b) => a - b);

  localStorage.setItem("scores", JSON.stringify(scores));

  const score_board = document.createElement("div");
  score_board.className = "score-board";
  score_board.innerHTML = scores
    .map((score) => {
      return `<div>${score.toFixed(3)}s</div>`;
    })
    .join("");

  document.body.appendChild(score_board);
}

function end() {
  const end_time = new Date().getTime();
  const reaction_time = (end_time - start_time) / 1000;

  addScore(reaction_time);

  alert("Your reaction time is: " + reaction_time.toFixed(3) + "s");
  this.remove();
  document.body.appendChild(createSlider());
}

addCountdown(10);

总结

反应英雄滑块是一个简单而有趣的反应测试，它能够帮助用户测试自己的反应速度，并带有一些其他的功能。程序的实现原理是基于鼠标点击事件和定时器，非常容易理解和实现。