打字通小游戏制作教程:用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收藏

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/274189.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Mac M1:通过docker安装RocketMQ、RocketMQ-Dashboard

0. 引言 最近本地启动以前docker安装的rocketmq发现报错了&#xff0c;因为是从老mac迁移过来的&#xff0c;发现支持的芯片还是amd的&#xff0c;于是重新在docker下安装rocketmq&#xff0c;并记录下步骤&#xff0c;方便大家后续参考。 1. 步骤 1、先下载项目源码 git c…

记录一个vue编辑的移动端页面

<template><div class"wrap"><el-form :model"queryParams" ref"queryForm" size"small" :inline"true" label-width"120px"><el-form-item label"班级" prop"classId"…

运维自动化之ansible

pxe 一键安装操作系统 操作系统只是提供一个平台 lnmp 需要多软件协同完成的一个简单项目 服务器正常运行 日常运维 巡检 服务器上的软件正常运行 zabbix 普罗米修斯 系统调优&#xff0c;架构调优 云计算核心职能 搭建平台架构 日常运营保障 性能效率优化 相关工具 代…

【SQL】601. 体育馆的人流量(with as 临时表;id减去row_number()思路)

前述 知识点学习&#xff1a; with as 和临时表的使用12、关于临时表和with as子查询部分 题目描述 leetcode题目&#xff1a;601. 体育馆的人流量 思路 关键&#xff1a;如何确定id是连续的三行或更多行记录 方法一&#xff1a; 多次连表&#xff0c;筛选查询方法二&…

护眼灯什么价位的好用?推荐五款好价护眼台灯

如今&#xff0c;我们不难发现许多年轻人早早地就戴上了眼镜&#xff0c;近视问题日益严重。在改善近视问题的众多因素中&#xff0c;营造适宜的照明环境&#xff0c;特别是选择一款合适的护眼台灯&#xff0c;显得尤为重要。然而&#xff0c;对于初次选购护眼台灯的人来说&…

vue+Nodejs+Koa搭建前后端系统(九)-- 上传图片

web2.0的到来使网页世界正式进入了寒武纪&#xff0c;各式各样的多媒体资源屡见不鲜&#xff0c;上传资源变得刻不容缓&#xff01; 前言 本文是在该系列的基础上&#xff0c;针对前后端代码的修改。 准备 HTTP上传图片时Content-Type值常见的有2种&#xff1a;application…

解决:chrome无痕模式下找不到插件问题

如需在 Chrome 浏览器或 ChromeOS 设备上以无痕模式使用扩展程序&#xff0c;请执行以下操作&#xff1a; 在新的无痕式窗口中&#xff0c;打开 chrome://extensions。找到要在无痕模式下使用的扩展程序。点击详情。开启在无痕模式下启用。 此时打开无痕模式&#xff0c;就能看…

经营分析怎么做?详解企业月度经营分析的思路与方法

企业经营分析是企业成功的关键之一&#xff0c;无论企业规模大小&#xff0c;都需要通过系统性的数据分析来指导经营决策。这一过程不仅仅是对集团大局数据的简单处理&#xff0c;还包括对市场、客户、生产、财务、运营、项目进展、人效等多个方面数据的全面审视。通过深入分析…

【微信小程序】传参存储

目录 一、本地数据存储 wx.setStorage wx.setStorageSync 1.1、异步缓存 存取数据 1.2、同步缓存 存取数据 二、使用url跳转路径携带参数 2.1、 wx.redirectTo({}) 2.2、 wx.navigateTo({}) 2.3、 wx.switchTab({}) 2.4 、wx.reLaunch({}) 2.5、组件跳转 三、…

解压常见_gzip:stdin:not in gzio format:怀疑下文件是否损坏

此次的主角文件是&#xff1a;pin-2.14-71313-gcc.4.4.7-linux.tar.gz 结论&#xff1a;文件后缀没问题&#xff0c;就先怀疑下是不是文件损坏了 ls指令看不出任何端倪 文件名、后缀都正常 解压出现报错 瞅瞅文件大小 du -h <文件名> 呦呵 4kb&#xff0c;和应该的大…

Android studio Gradle下载失败,如何手动配置解决该问题详解

前些天发现了一个蛮有意思的人工智能学习网站,8个字形容一下"通俗易懂&#xff0c;风趣幽默"&#xff0c;感觉非常有意思,忍不住分享一下给大家。 &#x1f449;点击跳转到教程 前言&#xff1a; 今天在打开公司一个项目时&#xff0c;突然要重新下载相关的gradle&am…

在表格中循环插入表单

<template><div class"key">{{ruleForm.casesRange}}<el-form label-position"top" :model"ruleForm" refruleForm><el-form-item label"这个表格怎么写"><el-table :data"tableData" border>…

【rk3229 android7.1.2 替换默认输入法】

问题平台描述 问题描述解决方法 郑重声明:本人原创博文&#xff0c;都是实战&#xff0c;均经过实际项目验证出货的 转载请标明出处:攻城狮2015 Platform: Rockchip CPU:rk3229 OS:Android 7.1.2 Kernel: 3.10 问题描述 国内客户&#xff0c;觉得安卓自带的输入法不好用&#x…

Ping工作原理

文章目录 目的ping网络协议 OSIICMP什么是ICMP作用功能报文类型查询报文类型差错报文类型ICMP 在 IPv4 和 IPv6 的封装ICMP 在 IPv4 协议中的封装ICMP 在 IPv6 协议中的封装ICMP 头部日常ping 排除步骤ping 查询报文使用code扩展目的 本文主要是梳理ping的工作原理- 揭开 ICMP…

项目实战-tpshop商城项目

项目实战-tpshop商城项目 环境部署准备软件工具准备远程连接测试远程连接测试-查看虚拟机IP地址远程连接测试-检测本机与虚拟机是否连通远程连接测试-通过远程工具连接linux服务器 常见问题处理 环境部署项目技术架构介绍部署tpshop项目-tpshop验证数据库验证用户信息表熟悉商品…

【C语言】内存函数

1. memcpy 使⽤和模拟实现 void * memcpy ( void * destination, const void * source, size_t num ); • 函数memcpy从source的位置开始向后复制num个字节的数据到destination指向的内存位置。 • 这个函数在遇到 \0 的时候并不会停下来。 • 如果source和destination有任…

Java面试——Netty

优质博文&#xff1a;IT-BLOG-CN 一、BIO、NIO 和 AIO 【1】阻塞 IO(Blocking I/O)&#xff1a; 同步阻塞I/O模式&#xff0c;当一条线程执行 read() 或者 write() 方法时&#xff0c;这条线程会一直阻塞直到读取一些数据或者写出去的数据已经全部写出&#xff0c;在这期间这条…

数据库-第十一章 并发控制【期末复习|考研复习】

前言 总结整理不易&#xff0c;希望大家点赞收藏。 给大家整理了一下数据库系统概论中的重点概念&#xff0c;以供大家期末复习和考研复习的时候使用。 参考资料是王珊老师和萨师煊老师的数据库系统概论(第五版)。 数据库系统概论系列文章传送门&#xff1a; 第一章 绪论 第二/…

使用npm版本管理工具解决npm 的EACCES permissions errors when installing packages globally错误

EACCES错误通常表示“权限被拒绝”&#xff0c;意味着您没有足够的权限来执行某个操作。在计算机领域&#xff0c;尤其是在文件系统和程序安装中&#xff0c;这个错误很常见。以下是可能导致EACCES错误的原因以及相应的解决方法&#xff1a; 文件系统权限&#xff1a;当您尝试…

C++的学习

代码练习 输入一个字符串&#xff0c;统计其中大写字母、小写字母、数字、空格以及其他字符的个数 #include <iostream>using namespace std;int main() {cout << "请输入一个字符串" << endl;string str;getline(cin,str);int capital 0;int l…