打字通小游戏制作教程：用HTML5和JavaScript提升打字速度

前端
字数统计: 1.9k   |   阅读时长≈ 9 分钟

打字通小游戏制作教程：用HTML5和JavaScript提升打字速度

在这篇文章中，我们将一起学习如何使用HTML5和JavaScript来制作一个简单的打字通小游戏。这个小游戏可以帮助用户练习打字速度和准确性。通过这个教程，你将了解如何创建游戏界面、处理用户输入、实现倒计时以及计算得分。即使你是编程新手，也能跟随步骤完成这个项目。

体验地址

洛可可白⚡️打字通
在这里插入图片描述

准备工作

首先，确保你的计算机上安装了文本编辑器，如Notepad++、Sublime Text或Visual Studio Code。这些工具将帮助你编写和编辑代码。

创建HTML结构

打开你的文本编辑器，创建一个新的HTML文件，并输入以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>洛可可白打字通</title>
    <style>
        /* 在这里添加CSS样式 */
    </style>
</head>
<body>
    <div class="bigBox">
        <div class="container">你准备好了吗？</div>
        <textarea placeholder="开始输入..." style="resize: none" cols="30" rows="10"></textarea>
        <div class="operate">
            <button>开始</button>
            <div id="timer">60</div>
        </div>
    </div>
    <script>
        // 在这里添加JavaScript代码
    </script>
</body>
</html>

这是我们游戏的基本结构。<head>部分包含了页面的元数据和样式定义，<body>部分则是游戏的主要内容。

添加CSS样式

在<style>标签内，我们将添加一些CSS样式来美化我们的打字通游戏。这包括游戏容器、文本区域、按钮和计时器的样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.bigBox {
    width: 50%;
    background-color: #ac8c3e;
    margin: 40px auto;
    box-sizing: border-box;
    padding: 20px;
    border-radius: 30px;
    box-shadow: 0px 0px 30px 9px #939393;
}

.container {
    margin: 0 auto;
    text-align: center;
    padding: 20px;
}

textarea {
    width: 100%;
    height: 200px;
    margin: 20px 0;
    font-size: 20px;
    border: none;
}

.operate {
    width: 20%;
    margin: 0 auto;
    text-align: center;
}

button {
    font-size: 24px;
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#timer {
    font-size: 48px;
    margin: 20px;
}

编写JavaScript逻辑

现在，我们将在<script>标签内添加JavaScript代码，这是游戏的核心部分。我们将创建游戏文本、初始化游戏、处理用户输入、实现倒计时以及计算得分。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
const text = "Believe in yourself and all that you are..."; // 游戏文本
const container = document.querySelector(".container");
const input = document.querySelector("textarea");
const button = document.querySelector("button");
const timer = document.getElementById("timer");
input.value = "";

let countdown;

function startGame() {
    // 游戏开始后，禁用按钮
    button.disabled = true;

    // 显示文本
    container.textContent = text;

    // 启动倒计时
    countdown = setInterval(() => {
        const remainingTime = parseInt(timer.textContent) - 1;
        if (remainingTime === 0) {
            // 时间用完，游戏结束
            endGame();
        }

        timer.textContent = remainingTime;
    }, 1000);
}

function endGame() {
    // 停止倒计时
    clearInterval(countdown);

    // 计算得分
    const score = calculateScore();
    const scoreMessage = `你的得分是 ${score} 分！`;
    container.textContent = scoreMessage;

    button.disabled = false;
}

function calculateScore() {
    const userText = input.value.trim();
    const correctText = text.trim();
    const userWords = userText.split(" ");
    const correctWords = correctText.split(" ");
    let score = 0;

    for (let i = 0; i < userWords.length; i++) {
        if (userWords[i] === correctWords[i]) {
            score++;
        }
    }

    return score;
}

// 添加按钮点击事件监听器
button.addEventListener("click", () => {
    // 设置倒计时时间
    timer.textContent = "60";

    // 清空输入框和输出文本区域
    input.value = "";
    container.textContent = "";

    // 启动游戏
    startGame();
});

在这个脚本中，我们首先定义了游戏的文本。然后，我们创建了开始游戏的函数startGame，它将显示游戏文本并启动倒计时。我们还定义了结束游戏的函数endGame，它将停止倒计时并计算得分。calculateScore函数用于计算用户的得分。最后，我们为开始按钮添加了一个点击事件监听器，当用户点击按钮时，游戏将开始。

测试游戏

保存你的HTML文件，并在浏览器中打开它。你应该能看到一个打字通游戏的界面。点击“开始”按钮，游戏将开始，你可以尝试在限定时间内尽可能准确地输入显示的文本。时间结束后，你的得分将被计算出来。

全部代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>洛可可白⚡️打字通</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        -moz-user-select: none;
        /*火狐*/
        -webkit-user-select: none;
        /*webkit浏览器*/
        -ms-user-select: none;
        /*IE10*/
        -khtml-user-select: none;
        /*早期浏览器*/
        -o-user-select: none;
        user-select: none;
      }

      .bigBox {
        width: 50%;
        background-color: #ac8c3e;
        margin: 40px auto;
        box-sizing: border-box;
        padding: 20px;
        border-radius: 30px;
        box-shadow: 0px 0px 30px 9px #939393;
      }

      .container {
        margin: 0 auto;
        text-align: center;
        padding: 20px;
      }

      textarea {
        width: 100%;
        height: 200px;
        margin: 20px 0;
        font-size: 20px;
        border: none;
      }

      .operate {
        width: 20%;
        margin: 0 auto;
        text-align: center;
      }

      button {
        font-size: 24px;
        padding: 10px 20px;
        background-color: #007bff;
        color: #fff;
        border: none;
        border-radius: 5px;
        cursor: pointer;
      }

      #timer {
        font-size: 48px;
        margin: 20px;
      }
    </style>
  </head>

  <body>
    <div class="bigBox">
      <div class="container">你准备好了吗？</div>
      <textarea
        name=""
        placeholder="开始输入..."
        id=""
        style="resize: none"
        cols="30"
        rows="10"
      ></textarea>
      <div class="operate">
        <button>开始</button>
        <div id="timer">60</div>
      </div>
    </div>

    <script>
      const text =
        "Believe in yourself and all that you are. Know that there is something inside you that is greater than any obstacle. This quote by Christian D. Larson reminds us that we all have the power within us to overcome any obstacle we may face. When we have confidence in ourselves and our abilities, we can achieve great things. So, let's trust ourselves, believe in our dreams, and work hard to make them a reality.";

      const container = document.querySelector(".container");
      const input = document.querySelector("textarea");
      const button = document.querySelector("button");
      const timer = document.getElementById("timer");
      input.value = "";

      let countdown;

      function startGame() {
        // 游戏开始后，禁用按钮
        button.disabled = true;

        // 显示文本
        container.textContent = text;

        // 启动倒计时
        countdown = setInterval(() => {
          const remainingTime = parseInt(timer.textContent) - 1;
          if (remainingTime === 0) {
            // 时间用完，游戏结束
            endGame();
          }

          timer.textContent = remainingTime;
        }, 1000);
      }

      function endGame() {
        // 停止倒计时
        clearInterval(countdown);

        // 计算得分
        const score = calculateScore();
        const scoreMessage = `你的得分是 ${score} 分！`;
        container.textContent = scoreMessage;

        button.disabled = false;
      }

      function calculateScore() {
        const userText = input.value.trim();
        const correctText = text.trim();
        const userWords = userText.split(" ");
        const correctWords = correctText.split(" ");
        let score = 0;

        for (let i = 0; i < userWords.length; i++) {
          console.log(userWords[i], correctWords[i]);
          if (userWords[i] === correctWords[i]) {
            score++;
          }
        }

        return score;
      }

      // 添加按钮点击事件监听器
      button.addEventListener("click", () => {
        // 设置倒计时时间
        timer.textContent = "60";

        // 清空输入框和输出文本区域
        input.value = "";
        container.textContent = "";

        // 启动游戏
        startGame();
      });
    </script>
  </body>
</html>

🎉 结语

恭喜你，你已经成功创建了一个打字通小游戏！这个教程涵盖了从创建基本的HTML结构到添加CSS样式，再到编写JavaScript交互逻辑的全过程。通过这个项目，你不仅学会了如何制作一个小游戏，还对前端开发有了基本的了解。随着你技能的提升，你可以尝试添加更多的功能，比如记录用户的最佳得分、添加音效或者实现更复杂的游戏逻辑。祝你编程愉快！
如果对你有帮助，点赞、收藏、关注是我更新的动力！👋🌟🚀

打赏
  • 版权声明： 本博客所有文章除特别声明外，著作权归作者所有。转载请注明出处！
  • Copyrights © 2022-2024 何福海
  • 访问人数: | 浏览次数:

请我喝杯奶茶吧~

支付宝
微信