使用 JavaScript 设计打字速度测试游戏(1)

📌 相关文章

📜 使用 JavaScript 设计打字速度测试游戏(1)

📅 最后修改于: 2023-12-03 15:06:47.785000 🧑 作者: Mango

使用 JavaScript 设计打字速度测试游戏

介绍

在我们日常的工作和学习中，打字已经成为了必须掌握的技能。通过打字可以提高我们的工作效率和学习效果。但是，很多人并没有一个良好的打字习惯，所以提高打字速度和准确率就显得更加重要了。

因此，设计一个打字速度测试游戏就变得尤为重要和有意义。可以通过玩这个游戏提高自己的打字速度和准确率。

本篇文章将会介绍如何使用 JavaScript 设计打字速度测试游戏。我们将使用 HTML、CSS 和 JavaScript 来实现这个游戏。

游戏规则

玩家需要在游戏中尽快地打出给定的文字，同时要保证打字的准确率。

游戏开始时，玩家会看到一段文字。当倒计时结束后，游戏会自动停止，玩家所打出来的文字会被计算准确率和速度。

实现过程

HTML

首先，我们需要创建一个 HTML 文件来承载我们的游戏。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>打字速度测试游戏</title>
    <link rel="stylesheet" href="game.css">
  </head>
  <body>
    <div class="game">
      <h1>打字速度测试</h1>
      <div class="text"></div>
      <input type="text" class="input" autofocus />
      <button class="start">开始游戏</button>
      <div class="result"></div>
    </div>
    <script src="game.js"></script>
  </body>
</html>

在这个 HTML 文件中，我们定义了一个 div 元素，它有一个类名为 game。在这个元素中，我们定义了一个 h1 元素用于显示游戏标题。然后是一个 div 元素用于显示需要打出来的文字。紧接着是一个 input 元素用于玩家输入文字。最后，我们定义了一个 button 元素用于开始游戏。还有一个 div 元素用于显示最终结果。

CSS

接下来，我们需要添加一些样式来美化我们的游戏。

.game {
  width: 500px;
  margin: 0 auto;
  text-align: center;
}

h1 {
  font-size: 36px;
  margin-top: 20px;
}

.text {
  margin-top: 50px;
  font-size: 24px;
}

.input {
  margin-top: 30px;
  font-size: 24px;
  text-align: center;
  width: 400px;
  height: 50px;
  border: none;
  border-bottom: 2px solid black;
  outline: none;
}

.start {
  margin-top: 30px;
  font-size: 24px;
  background-color: #f44336;
  color: white;
  border: none;
  border-radius: 10px;
  padding: 10px 20px;
  cursor: pointer;
}

.result {
  margin-top: 50px;
  font-size: 24px;
}

在这个 CSS 文件中，我们为 game 元素设置了一个宽度和居中对齐。为了美化样式，我们为 h1 设置了字体大小和上边距。为了让需要打出来的文字具有一定的大小，我们为 text 类设置了一些样式。

为了让输入框更加美观，我们去掉了默认的外边框，并为其设置了一个底边框。我们还为开始按钮添加了一些样式，让其具有更好的视觉效果。最后，我们为结果元素，也就是显示最终结果的 div 元素，设置了一些样式。

JavaScript

最关键的一步，是实现打字速度测试的逻辑。我们将通过 JavaScript 来实现这个过程。

首先，我们需要定义游戏需要打出来的文字。我们可以将这些文字存储在一个数组中，每次从数组中随机地选择一段文字来进行打字测试。

const texts = [
  'The quick brown fox jumps over the lazy dog.',
  'A fish may love a bird, but where would they live?',
  'Good friends are like stars. You don\'t always see them',
  'Believe in yourself and all that you are. Know that there is something inside you that is greater than any obstacle.'
];

let text = '';

接下来，我们需要实现一个函数来随机选择用于测试的文字。

function getRandomText() {
  const index = Math.floor(Math.random() * texts.length);
  return texts[index];
}

现在，我们需要实现一个函数来开始游戏。在点击开始按钮后，调用这个函数开始游戏。这个函数将选择一段文字用于测试，并将它显示到屏幕上。同时，它还将启动倒计时器，当时间到达后，将结束游戏。

function startGame() {
  text = getRandomText();

  const textElement = document.querySelector('.text');
  textElement.innerText = text;

  const inputElement = document.querySelector('.input');
  inputElement.value = '';
  inputElement.disabled = false;
  inputElement.focus();

  const startButton = document.querySelector('.start');
  startButton.disabled = true;

  let remainingTime = 3;
  const countdownElement = document.createElement('div');
  countdownElement.innerText = remainingTime;
  countdownElement.style.fontSize = '36px';
  countdownElement.style.fontWeight = 'bold';
  document.body.appendChild(countdownElement);

  const countdownInterval = setInterval(() => {
    remainingTime -= 1;
    countdownElement.innerText = remainingTime;
    if (remainingTime <= 0) {
      clearInterval(countdownInterval);
      document.body.removeChild(countdownElement);
      const startButton = document.querySelector('.start');
      startButton.disabled = false;
      inputElement.disabled = true;
      showResult();
    }
  }, 1000);
}

在这个函数中，我们通过 getRandomText 函数随机选择一段文字，并将其显示在游戏中。同时，我们也将输入框重置，并将光标聚焦在输入框中。

我们还使用 setInterval 函数来实现倒计时器。在每秒钟的间隔中，我们将计时器减 1，直到计时器结束。在计时器结束后，我们调用 showResult 函数来计算打字速度和准确度。同时，我们也将开始按钮解除禁用，以便下次继续开始游戏。

我们还需要实现 showResult 函数来计算打字速度和准确度。这个函数将计算输入的文字是否和需要打出来的文字一致，并计算打字速度和准确度。最后，将计算结果显示到屏幕上。

function showResult() {
  const inputElement = document.querySelector('.input');
  const resultElement = document.querySelector('.result');
  const inputText = inputElement.value;
  const correctCount = text.length;
  let correct = 0;
  for (let i = 0; i < inputText.length && i < text.length; i++) {
    if (inputText[i] === text[i]) {
      correct += 1;
    }
  }
  const accuracy = Math.floor((correct / correctCount) * 100);
  const speed = Math.floor((correctCount / 5) / 1);

  resultElement.innerHTML = `速度：${speed} 个字每分钟<br>准确度：${accuracy}%`;
}

在这个函数中，我们获取输入框中的内容，并计算输入的文字是否和需要打出来的文字一致。通过计算得到打字准确性和速度。最后将得到的结果显示到屏幕上。

最后，我们还需要监听开始按钮的点击事件，并调用 startGame 函数来开始游戏。

const startButton = document.querySelector('.start');
startButton.addEventListener('click', () => {
  startGame();
});

完整代码

完整的 JavaScript 代码如下所示：

const texts = [
  'The quick brown fox jumps over the lazy dog.',
  'A fish may love a bird, but where would they live?',
  'Good friends are like stars. You don\'t always see them',
  'Believe in yourself and all that you are. Know that there is something inside you that is greater than any obstacle.'
];

let text = '';

function getRandomText() {
  const index = Math.floor(Math.random() * texts.length);
  return texts[index];
}

function startGame() {
  text = getRandomText();

  const textElement = document.querySelector('.text');
  textElement.innerText = text;

  const inputElement = document.querySelector('.input');
  inputElement.value = '';
  inputElement.disabled = false;
  inputElement.focus();

  const startButton = document.querySelector('.start');
  startButton.disabled = true;

  let remainingTime = 3;
  const countdownElement = document.createElement('div');
  countdownElement.innerText = remainingTime;
  countdownElement.style.fontSize = '36px';
  countdownElement.style.fontWeight = 'bold';
  document.body.appendChild(countdownElement);

  const countdownInterval = setInterval(() => {
    remainingTime -= 1;
    countdownElement.innerText = remainingTime;
    if (remainingTime <= 0) {
      clearInterval(countdownInterval);
      document.body.removeChild(countdownElement);
      const startButton = document.querySelector('.start');
      startButton.disabled = false;
      inputElement.disabled = true;
      showResult();
    }
  }, 1000);
}

function showResult() {
  const inputElement = document.querySelector('.input');
  const resultElement = document.querySelector('.result');
  const inputText = inputElement.value;
  const correctCount = text.length;
  let correct = 0;
  for (let i = 0; i < inputText.length && i < text.length; i++) {
    if (inputText[i] === text[i]) {
      correct += 1;
    }
  }
  const accuracy = Math.floor((correct / correctCount) * 100);
  const speed = Math.floor((correctCount / 5) / 1);

  resultElement.innerHTML = `速度：${speed} 个字每分钟<br>准确度：${accuracy}%`;
}

const startButton = document.querySelector('.start');
startButton.addEventListener('click', () => {
  startGame();
});

总结

通过本篇文章的介绍，相信大家已经掌握了使用 JavaScript 设计打字速度测试游戏的方法。通过这个游戏，我们可以提升我们的打字速度和准确率，并且还能在这个过程中玩耍和学习 JavaScript。

现在，尝试使用本篇文章中的代码，在学习 JavaScript 的同时，玩一玩这个打字速度测试游戏吧！