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

2024-03-12 19:20
文章标签 java html5 教程 script 制作 提升 frontend 打字速度 小游戏 打字通

本文主要是介绍打字通小游戏制作教程：用HTML5和JavaScript提升打字速度，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

🌟 前言

欢迎来到我的技术小宇宙！🌌 这里不仅是我记录技术点滴的后花园，也是我分享学习心得和项目经验的乐园。📚 无论你是技术小白还是资深大牛，这里总有一些内容能触动你的好奇心。🔍

  • 🤖 洛可可白：个人主页

  • 🔥 个人专栏：✅前端技术 ✅后端技术

  • 🏠 个人博客：洛可可白博客

  • 🐱 代码获取：bestwishes0203

  • 📷 封面壁纸：洛可可白wallpaper

在这里插入图片描述

文章目录

  • 打字通小游戏制作教程：用HTML5和JavaScript提升打字速度
    • 体验地址
    • 准备工作
    • 创建HTML结构
    • 添加CSS样式
    • 编写JavaScript逻辑
    • 测试游戏
    • 全部代码
    • 🎉 结语
    • 🎉 往期精彩回顾

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

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

体验地址

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

准备工作

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

创建HTML结构

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

<!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样式来美化我们的打字通游戏。这包括游戏容器、文本区域、按钮和计时器的样式。

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代码，这是游戏的核心部分。我们将创建游戏文本、初始化游戏、处理用户输入、实现倒计时以及计算得分。

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

全部代码

<!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><textareaname=""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交互逻辑的全过程。通过这个项目，你不仅学会了如何制作一个小游戏，还对前端开发有了基本的了解。随着你技能的提升，你可以尝试添加更多的功能，比如记录用户的最佳得分、添加音效或者实现更复杂的游戏逻辑。祝你编程愉快！
如果对你有帮助，点赞、收藏、关注是我更新的动力！👋🌟🚀

🎉 往期精彩回顾

  1. 拼图小游戏制作教程：用HTML5和JavaScript打造经典游戏
  • 234阅读 · 6点赞 · 8收藏
  1. Mock.js 基本语法与应用笔记
  • 215阅读 · 3点赞 · 8收藏
  1. 排序算法全景：从基础到高级的Java实现
  • 474阅读 · 22点赞 · 7收藏
  1. CentOS系统上安装Redis操作教程
  • 124阅读 · 4点赞 · 3收藏
  1. 打造你的HTML5打地鼠游戏：零基础入门教程
  • 1032阅读 · 17点赞 · 27收藏
  1. 打造你的贪吃蛇游戏：HTML、CSS与JavaScript的完美结合
  • 869阅读 · 24点赞 · 9收藏
  1. 快速上手：使用Hexo搭建并自定义个人博客
  • 579阅读 · 16点赞 · 17收藏
  1. 在Vue中处理接口返回的二进制图片数据
  • 582阅读 · 19点赞 · 15收藏
  1. 打造经典游戏：HTML5与CSS3实现俄罗斯方块
  • 1105阅读 · 31点赞 · 23收藏
  1. Spring Boot中Excel数据导入导出的高效实现
  • 1028阅读 · 23点赞 · 22收藏
  1. Spring Boot中实现图片上传功能的两种策略
  • 1187阅读 · 23点赞 · 13收藏
  1. CentOS上安装MySQL 5.7和MySQL 8.0教程
  • 806阅读 · 21点赞 · 13收藏
  1. Spring Boot工程集成验证码生成与验证功能教程
  • 1397阅读 · 38点赞 · 17收藏
  1. Spring Boot 3项目集成Swagger3教程
  • 771阅读 · 15点赞 · 8收藏
  1. CentOS上安装JDK的详细教程
  • 599阅读 · 12点赞 · 13收藏
  1. 解决前端项目中Node.js版本不一致导致的依赖安装错误
  • 845阅读 · 17点赞 · 16收藏
  1. 入门指南：使用uni-app构建跨平台应用
  • 1265阅读 · 29点赞 · 9收藏
  1. Vue项目中使用Mock.js进行API模拟
  • 650阅读 · 17点赞 · 7收藏
  1. Vue组件间通信实践
  • 863阅读 · 24点赞 · 18收藏
  1. CentOS上安装与配置Nginx
  • 649阅读 · 9点赞 · 6收藏
  1. Vue跳转页面传递参数
  • 263阅读 · 5点赞 · 4收藏
  1. vue项目如何下载使用gsap动画库
  • 544阅读 · 1点赞 · 0收藏
  1. VS Code上搭建React开发环境
  • 2263阅读 · 2点赞 · 10收藏
  1. vue命令式组件封装以及使用
  • 816阅读 · 2点赞 · 3收藏
  1. springboot项目常用配置
  • 379阅读 · 1点赞 · 0收藏
  1. 如何在Vue中使用百度地图API来创建地图应用程序。
  • 344阅读 · 3点赞 · 1收藏
  1. Nodejs搭建服务器
  • 167阅读 · 2点赞 · 1收藏
  1. 走入ES6
  • 201阅读 · 2点赞 · 1收藏
  1. Ajax技术包含Fetch和Axios
  • 175阅读 · 2点赞 · 2收藏
  1. Promise技术学这篇就够了
  • 82阅读 · 2点赞 · 1收藏
  1. 手把手教你CentOS下载Nginx配置使用
  • 463阅读 · 2点赞 · 3收藏
  1. 基于ubuntu的c语言编程简单易懂
  • 290阅读 · 3点赞 · 2收藏
  1. vue3 setup语法糖的三种书写方法
  • 2798阅读 · 5点赞 · 14收藏
  1. vue3中vuex 的使用基本使用和二次封装
  • 446阅读 · 3点赞 · 1收藏
  1. 初学Vue第一篇
  • 210阅读 · 1点赞 · 1收藏
  1. MySQL基础全套全网最详细讲解
  • 767阅读 · 3点赞 · 6收藏
  1. 数据结构之操作顺序表实战——C语言
  • 146阅读 · 3点赞 · 2收藏
  1. 前端开发之响应式布局，响应式 HTML, CSS and JavaScript 框架介绍；
  • 701阅读 · 3点赞 · 2收藏
  1. VS code搭建C/C++运行环境简单易上手
  • 2777阅读 · 5点赞 · 8收藏
  1. Vue.2&Vue.3项目引入Element-UI教程&踩坑
  • 9255阅读 · 22点赞 · 82收藏
  1. Vue项目引入Echarts可视化图表库教程&踩坑
  • 2198阅读 · 3点赞 · 5收藏
  1. VirtualBox虚拟机搭建CentOS系统教程
  • 4487阅读 · 4点赞 · 32收藏
  1. VS Code上搭建Vue开发环境
  • 10637阅读 · 13点赞 · 64收藏
  1. Color-UI 简介及使用教程
  • 5902阅读 · 2点赞 · 13收藏

这篇关于打字通小游戏制作教程：用HTML5和JavaScript提升打字速度的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/802320。

相关文章

Java实现检查多个时间段是否有重合

Java实现检查多个时间段是否有重合

《Java实现检查多个时间段是否有重合》这篇文章主要为大家详细介绍了如何使用Java实现检查多个时间段是否有重合,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录流程概述步骤详解China编程步骤1：定义时间段类步骤2：添加时间段步骤3：检查时间段是否有重合步骤4：输出结果示例代码结语作
阅读更多...
Java中String字符串使用避坑指南

Java中String字符串使用避坑指南

《Java中String字符串使用避坑指南》Java中的String字符串是我们日常编程中用得最多的类之一,看似简单的String使用,却隐藏着不少“坑”,如果不注意,可能会导致性能问题、意外的错误容... 目录8个避坑点如下：1. 字符串的不可变性：每次修改都创建新对象2. 使用 == 比较字符串，陷阱满
阅读更多...
Java判断多个时间段是否重合的方法小结

Java判断多个时间段是否重合的方法小结

《Java判断多个时间段是否重合的方法小结》这篇文章主要为大家详细介绍了Java中判断多个时间段是否重合的方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录判断多个时间段是否有间隔判断时间段集合是否与某时间段重合判断多个时间段是否有间隔实体类内容public class D
阅读更多...
IDEA编译报错“java: 常量字符串过长”的原因及解决方法

IDEA编译报错“java: 常量字符串过长”的原因及解决方法

《IDEA编译报错“java:常量字符串过长”的原因及解决方法》今天在开发过程中,由于尝试将一个文件的Base64字符串设置为常量,结果导致IDEA编译的时候出现了如下报错java:常量字符串过长,... 目录一、问题描述二、问题原因2.1 理论角度2.2 源码角度三、解决方案解决方案①：StringBui
阅读更多...
Java覆盖第三方jar包中的某一个类的实现方法

Java覆盖第三方jar包中的某一个类的实现方法

《Java覆盖第三方jar包中的某一个类的实现方法》在我们日常的开发中,经常需要使用第三方的jar包,有时候我们会发现第三方的jar包中的某一个类有问题,或者我们需要定制化修改其中的逻辑,那么应该如何... 目录一、需求描述二、示例描述三、操作步骤四、验证结果五、实现原理一、需求描述需求描述如下：需要在
阅读更多...
Java中ArrayList和LinkedList有什么区别举例详解

Java中ArrayList和LinkedList有什么区别举例详解

《Java中ArrayList和LinkedList有什么区别举例详解》：本文主要介绍Java中ArrayList和LinkedList区别的相关资料,包括数据结构特性、核心操作性能、内存与GC影... 目录一、底层数据结构二、核心操作性能对比三、内存与 GC 影响四、扩容机制五、线程安全与并发方案六、工程
阅读更多...
部署Vue项目到服务器后404错误的原因及解决方案

部署Vue项目到服务器后404错误的原因及解决方案

《部署Vue项目到服务器后404错误的原因及解决方案》文章介绍了Vue项目部署步骤以及404错误的解决方案,部署步骤包括构建项目、上传文件、配置Web服务器、重启Nginx和访问域名,404错误通常是... 目录一、vue项目部署步骤二、404错误原因及解决方案错误场景原因分析解决方案一、Vue项目部署步骤
阅读更多...
JavaScript中的reduce方法执行过程、使用场景及进阶用法

JavaScript中的reduce方法执行过程、使用场景及进阶用法

《JavaScript中的reduce方法执行过程、使用场景及进阶用法》：本文主要介绍JavaScript中的reduce方法执行过程、使用场景及进阶用法的相关资料,reduce是JavaScri... 目录1. 什么是reduce2. reduce语法2.1 语法2.2 参数说明3. reduce执行过程
阅读更多...
如何使用Java实现请求deepseek

如何使用Java实现请求deepseek

《如何使用Java实现请求deepseek》这篇文章主要为大家详细介绍了如何使用Java实现请求deepseek功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1.deepseek的api创建2.Java实现请求deepseek2.1 pom文件2.2 json转化文件2.2
阅读更多...
Java调用DeepSeek API的最佳实践及详细代码示例

Java调用DeepSeek API的最佳实践及详细代码示例

《Java调用DeepSeekAPI的最佳实践及详细代码示例》：本文主要介绍如何使用Java调用DeepSeekAPI,包括获取API密钥、添加HTTP客户端依赖、创建HTTP请求、处理响应、... 目录1. 获取API密钥2. 添加HTTP客户端依赖3. 创建HTTP请求4. 处理响应5. 错误处理6.
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2