HTML5+JavaScript单词游戏
HTML5 +JavaScript单词游戏
数据字典格式：每行一个 单词 ，单词和解释用空格分隔，如
a art.一(个)；每一(个)
ability n.能力；能耐，本领
able a.有能力的；出色的
baby n.婴儿；孩子气的人
back ad.在后；回原处；回
background n.背景，后景，经历
cable n.缆，索；电缆；电报
cafe n.咖啡馆；小餐厅
good a.好的；有本事的
需要注意的是，JavaScript 在浏览器环境中不能像python那样直接读取本地文本文件，这是出于安全考虑，可以将数据字典内容作为 JavaScript 数据直接嵌入到脚本中。
游戏规则：
每次随机从文本中选取一个英语单词，在界面上从左到右移动，随机选出三个单词的解释，和英语单词正确解释，随机放到四个按钮中，这四个按钮放到界面下方。
用户单击带有解释的按钮，界面上英语单词消失，再随机从文本中选取一个新英语单词，进入下一个猜单词过程；若英语单词移动出界面，用户未能单击有正确解释的按钮，表示失败，也将随机从文本中选取一个新英语单词，进入下一个猜单词过程。
有失败和成功计数。
使用HTML5来实现这个单词游戏， 运行界面：
使用面向过程方式实现，游戏源码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>单词游戏</title><style>body {font-family: Arial, sans-serif;display: flex;flex-direction: column;align-items: center;padding: 20px;}#gameCanvas {border: 1px solid black;}#score {align-self: flex-end;margin-bottom: 10px;}#buttons {display: grid;grid-template-columns: 1fr 1fr;gap: 10px;margin-top: 20px;}button {width: 180px;height: 40px;font-size: 14px;}</style>
</head>
<body><div id="score">成功: 0 失败: 0</div><canvas id="gameCanvas" width="400" height="200"></canvas><div id="buttons"></div><script>// 字典数据const dictionaryData = `
a art.一(个)；每一(个)
ability n.能力；能耐，本领
able a.有能力的；出色的
baby n.婴儿；孩子气的人
back ad.在后；回原处；回
background n.背景，后景，经历
cable n.缆，索；电缆；电报
cafe n.咖啡馆；小餐厅
good a.好的；有本事的`;const canvas = document.getElementById('gameCanvas');const ctx = canvas.getContext('2d');const scoreElement = document.getElementById('score');const buttonsContainer = document.getElementById('buttons');let dictionary = {};let currentWord = "";let currentDefinition = "";let options = [];let successCount = 0;let failCount = 0;let wordX = -100;let moveSpeed = 1; // 新增：移动速度控制let lastTime = 0; // 新增：用于控制动画帧率function loadDictionary() {const lines = dictionaryData.trim().split('\n');lines.forEach(line => {const [word, definition] = line.trim().split(' ', 2);dictionary[word] = definition;});}function chooseNewWord() {const words = Object.keys(dictionary);currentWord = words[Math.floor(Math.random() * words.length)];currentDefinition = dictionary[currentWord];options = [currentDefinition];while (options.length < 4) {const randomDef = dictionary[words[Math.floor(Math.random() * words.length)]];if (!options.includes(randomDef)) {options.push(randomDef);}}options.sort(() => Math.random() - 0.5);updateButtons();wordX = -100;}function updateButtons() {buttonsContainer.innerHTML = '';options.forEach((option, index) => {const button = document.createElement('button');button.textContent = option.substring(0, 20) + "...";button.onclick = () => checkAnswer(index);buttonsContainer.appendChild(button);});}function moveWord(currentTime) {// 控制帧率，每16ms（约60fps）更新一次if (currentTime - lastTime < 16) {requestAnimationFrame(moveWord);return;}lastTime = currentTime;ctx.clearRect(0, 0, canvas.width, canvas.height);ctx.font = '24px Arial';ctx.fillText(currentWord, wordX, 100);if (wordX > canvas.width) {failCount++;updateScore();chooseNewWord();} else {wordX += moveSpeed; // 使用moveSpeed控制移动速度}requestAnimationFrame(moveWord);}function checkAnswer(index) {if (options[index] === currentDefinition) {successCount++;} else {failCount++;}updateScore();chooseNewWord();}function updateScore() {scoreElement.textContent = `成功: ${successCount} 失败: ${failCount}`;}function init() {loadDictionary();chooseNewWord();requestAnimationFrame(moveWord);}init();</script>
</body>
</html>
你可以通过调整 moveSpeed 的值来改变单词移动的速度。例如：
moveSpeed = 0.5; 会使单词移动得更慢
moveSpeed = 2; 会使单词移动得更快
上面的JavaScript代码是面向过程的，下面使用面向对象方式实现。
使用面向对象方式实现，游戏源码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>单词游戏</title><style>body {font-family: Arial, sans-serif;display: flex;flex-direction: column;align-items: center;padding: 20px;}#gameCanvas {border: 1px solid black;}#score {align-self: flex-end;margin-bottom: 10px;}#buttons {display: grid;grid-template-columns: 1fr 1fr;gap: 10px;margin-top: 20px;}button {width: 180px;height: 40px;font-size: 14px;}</style>
</head>
<body><div id="score">成功: 0 失败: 0</div><canvas id="gameCanvas" width="400" height="200"></canvas><div id="buttons"></div><script>// 字典数据const dictionaryData = `
a art.一(个)；每一(个)
ability n.能力；能耐，本领
able a.有能力的；出色的
baby n.婴儿；孩子气的人
back ad.在后；回原处；回
background n.背景，后景，经历
cable n.缆，索；电缆；电报
cafe n.咖啡馆；小餐厅
good a.好的；有本事的`;class WordGame {constructor() {this.canvas = document.getElementById('gameCanvas');this.ctx = this.canvas.getContext('2d');this.scoreElement = document.getElementById('score');this.buttonsContainer = document.getElementById('buttons');this.dictionary = {};this.currentWord = "";this.currentDefinition = "";this.options = [];this.successCount = 0;this.failCount = 0;this.wordX = -100;this.moveSpeed = 1;this.lastTime = 0;this.loadDictionary();this.chooseNewWord();this.updateButtons();requestAnimationFrame(this.moveWord.bind(this));}loadDictionary() {const lines = dictionaryData.trim().split('\n');lines.forEach(line => {const [word, definition] = line.trim().split(' ', 2);this.dictionary[word] = definition;});}chooseNewWord() {const words = Object.keys(this.dictionary);this.currentWord = words[Math.floor(Math.random() * words.length)];this.currentDefinition = this.dictionary[this.currentWord];this.options = [this.currentDefinition];while (this.options.length < 4) {const randomDef = this.dictionary[words[Math.floor(Math.random() * words.length)]];if (!this.options.includes(randomDef)) {this.options.push(randomDef);}}this.options.sort(() => Math.random() - 0.5);this.wordX = -100;}updateButtons() {this.buttonsContainer.innerHTML = '';this.options.forEach((option, index) => {const button = document.createElement('button');button.textContent = option.substring(0, 20) + "...";button.onclick = () => this.checkAnswer(index);this.buttonsContainer.appendChild(button);});}moveWord(currentTime) {if (currentTime - this.lastTime < 16) {requestAnimationFrame(this.moveWord.bind(this));return;}this.lastTime = currentTime;this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);this.ctx.font = '24px Arial';this.ctx.fillText(this.currentWord, this.wordX, 100);if (this.wordX > this.canvas.width) {this.failCount++;this.updateScore();this.chooseNewWord();this.updateButtons();} else {this.wordX += this.moveSpeed;}requestAnimationFrame(this.moveWord.bind(this));}checkAnswer(index) {if (this.options[index] === this.currentDefinition) {this.successCount++;} else {this.failCount++;}this.updateScore();this.chooseNewWord();this.updateButtons();}updateScore() {this.scoreElement.textContent = `成功: ${this.successCount} 失败: ${this.failCount}`;}}// 初始化游戏new WordGame();</script>
</body>
</html>
这个面向对象的实现有以下几个主要特点：
所有游戏逻辑都封装在 WordGame 类中。
类的构造函数 constructor 初始化所有必要的属性和状态，并开始游戏循环。
每个功能都变成了类的方法，如 loadDictionary, chooseNewWord, updateButtons 等。
相关文章：
HTML5+JavaScript单词游戏
HTML5 JavaScript单词游戏 数据字典格式：每行一个 单词 ，单词和解释用空格分隔，如 a art.一(个)；每一(个) ability n.能力；能耐，本领 able a.有能力的；出色的 baby n.婴儿；孩子…...
Windows 中的 Hosts 文件是什么？如何找到并修改它？
什么是 Hosts 文件 Hosts 文件是一个纯文本文件，存在于几乎所有的操作系统中，用于将主机名映射到 IP 地址。在域名系统（DNS）尚未普及之前，Hosts 文件是计算机网络中唯一用于主机名解析的方式。随着网络规模的扩大和 D…...
详细分析Oracle中的tnsnames.ora基本知识 以及 PLSQL如何连接（附Demo）
目录 1. tnsnames.ora2. Demo3. 实战 1. tnsnames.ora Oracle 数据库网络配置文件，用于配置客户端与数据库服务器之间的连接 定义网络服务名称，客户端可以使用这些名称连接到数据库实例 基本的路径如下： Windows: ORACLE_HOME\network\ad…...
[深度学习] 图神经网络GNN
图神经网络（Graph Neural Network, GNN）是一类用于处理图结构数据的深度学习模型。图是一种重要的数据结构，广泛应用于社交网络、分子化学、推荐系统、交通网络等领域。GNN的出现使得能够有效地在图结构数据上进行学习和推理。以下是GNN的详细…...
MATLAB中添加 Git 子模块
目录 更新子模块 对子模块使用提取和合并 使用推送将更改发送到子模块存储库 要重用其他存储库中的代码，可以指定 Git™ 子模块。 要将外部 Git 存储库克隆为子模块，请执行以下操作： 在 MATLAB 当前文件夹浏览器中点击右键，然…...
24级中国科学技术大学843信号与系统考研分数线，中科大843初复试科目，参考书，大纲，真题，苏医工生医电子信息与通信工程。
(上岸难度：★★★★☆，考试大纲、真题、经验帖等考研资讯和资源加群960507167/博睿泽电子信息通信考研咨询：34342183) 一、专业目录及考情分析 说明: ①复试成绩:满分100分。上机满分50分，面试满分150分，复试成绩(上机…...
深入剖析C语言中volatile与register关键字的实战应用与底层原理
引言 C语言以其贴近硬件的特性，赋予了开发者强大的底层控制能力。在众多关键字中，"volatile" 和 "register" 是两个具有特殊意义的关键字，它们直接影响着编译器对程序语句的处理逻辑，从而影响程序的正确性和…...
vue开发网站--关于window.print()调取打印
1.vue点击按钮调取打印 点击按钮： 调取打印该页面： <div click"clickDown()">下载</div>methods: {//下载-调取打印clickDown() {window.print()}, }<style>/* 点击打印的样式 */media print {.clickDown {display: no…...
OJ-选座位
题目描述 要考试了，小明需要去图书馆挑选一个座位来复习。小明需要找到一个位置，这个位置应距离任何已经落座的人尽可能的远（即与最近的人的距离尽可能的大）。 图书馆的座位为一个N*M的矩阵，N表示总的排数࿰…...
【子串】3. 无重复的最长子串
3. 无重复的最长子串 难度：中等难度 力扣地址：https://leetcode.cn/problems/longest-substring-without-repeating-characters/description/ 题目看起来简单，刷起来有好几个坑，特此记录一下，解法比官网的更加简单&…...
Scrapy中爬虫优化技巧分享
scrapy是一个非常有用的python爬虫框架，它可以帮助我们轻松地从不同的网站上获取数据。同时，scrapy也有越来越多的用户在使用它来爬取数据，因此，在使用scrapy的过程中，我们需要考虑如何优化我们的爬虫，以便…...
自然语言处理-BERT处理框架-transformer
目录 1.介绍 2.Transformer 2.1 引言 2.2 传统RNN网络的问题 2.3 整体架构 2.4 Attention 2.5 Self-Attention如何计算 3.multi-headed机制 4. BERT训练方法 1.介绍 BERT：当前主流的解决框架，一站式搞定NLP任务。（解决一个NLP任务时的考虑…...
Kafka~消息系列问题解决：消费顺序问题解决、消息丢失问题优化（不能保证100%）
消息消费顺序问题 使用消息队列的过程中经常有业务场景需要严格保证消息的消费顺序，比如我们同时发了 2 个消息，这 2 个消息对应的操作分别对应的数据库操作是： 用户等级升级。根据用户等级下的订单价格 假如这两条消息的消费顺序不一样造…...
如何确保日常安全运维中的数据加密符合等保2.0标准？
等保2.0标准下的数据加密要求 等保2.0标准是中国信息安全等级保护制度的升级版，它对信息系统的安全保护提出了更为严格的要求。在日常安全运维中，确保数据加密符合等保2.0标准，主要涉及以下几个方面： 数据加密技术的选择ÿ…...
下一代的JDK - GraalVM
GraalVM是最近几年Java相关的新技术领域不多的亮点之一， 被称之为革命性的下一代JDK，那么它究竟有什么神奇之处，又为当前的Java开发带来了一些什么样的改变呢，让我们来详细了解下 下一代的JDK 官网对GraalVM的介绍是 “GraalVM 是…...
Java三方库-单元测试
文章目录 Junit注解常用类无参数单测带参数的单测 Junit 主要版本有4和5版本，注解不太一样， 4迁移5参考官方文档 主要记录下常用的一些操作 其他复杂操作见官网 https://junit.org/junit5/docs/current/user-guide/#overview-java-versions 引入5.9…...
p2p、分布式，区块链笔记: libp2p基础
通信密钥 noise::{Keypair, X25519Spec} X25519/Ed25519类似RSA 算法。Noise 用于设计和实现安全通信协议。它允许通信双方在没有预先共享密钥的情况下进行安全的密钥交换，并通过加密和身份验证保护通信内容。libp2p 提供了对 Noise 协议的原生支持，它允…...
企业本地大模型用Ollama+Open WebUI+Stable Diffusion可视化问答及画图
最近在尝试搭建公司内部用户的大模型，可视化回答，并让它能画图出来， 主要包括四块： Ollama 管理和下载各个模型的工具Open WebUI 友好的对话界面Stable Diffusion 绘图工具Docker 部署在容器里，提高效率以上运行环境Win10, Ollama,SD直接装在windows10下， 然后安装Docker…...
Unity学习笔记---调试
使用Log进行调试 使用Debug.Log方法可以将一些运行时信息打印到Console窗口中。 打印时间戳 //获取时间 Debug.Log(DateTime.Now.ToString());//打印毫秒级的时间 Debug.Log(((DateTime.Now.ToUniversalTime().Ticks - 621355968000000000) / 10000) * 0.001); 打印自定义文…...
Py之dashscope：dashscope的简介、安装和使用方法、案例应用之详细攻略
Py之dashscope：dashscope的简介、安装和使用方法、案例应用之详细攻略 目录 dashscope的简介 1、产品的主要特点和优势包括： dashscope的安装和使用方法 1、安装 2、使用方法 dashscope的案例应用 1、通义千问-Max：通义千问2.5系列 2…...
装饰模式（Decorator Pattern）重构java邮件发奖系统实战
前言 现在我们有个如下的需求，设计一个邮件发奖的小系统， 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式（Decorator Pattern）允许向一个现有的对象添加新的功能，同时又不改变其…...
使用rpicam-app通过网络流式传输视频)
树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频
使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源： http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...
【人工智能】神经网络的优化器optimizer（二）：Adagrad自适应学习率优化器
一.自适应梯度算法Adagrad概述 Adagrad（Adaptive Gradient Algorithm）是一种自适应学习率的优化算法，由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率，适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...
IGP（Interior Gateway Protocol，内部网关协议）
IGP（Interior Gateway Protocol，内部网关协议） 是一种用于在一个自治系统（AS）内部传递路由信息的路由协议，主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...
前端导出带有合并单元格的列表
// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...
测试markdown--肇兴
day1： 1、去程：7:04 --11:32高铁 高铁右转上售票大厅2楼，穿过候车厅下一楼，上大巴车 ￥10/人 **2、到达：**12点多到达寨子，买门票，美团/抖音：￥78人 3、中饭&a…...
图表类系列各种样式PPT模版分享
图标图表系列PPT模版，柱状图PPT模版，线状图PPT模版，折线图PPT模版，饼状图PPT模版，雷达图PPT模版，树状图PPT模版 图表类系列各种样式PPT模版分享：图表系列PPT模板https://pan.quark.cn/s/20d40aa…...
Android第十三次面试总结（四大 组件基础）
Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成，用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机： onCreate() 调用时机：Activity 首次创建时调用。…...
基于TurtleBot3在Gazebo地图实现机器人远程控制
1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...
Linux 内存管理实战精讲：核心原理与面试常考点全解析
Linux 内存管理实战精讲：核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用，还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...