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…...
Go使用Gin框架开发的Web程序部署在Linux时，无法绑定监听Ipv4端口
最近有写一部分go语言开发的程序，在部署程序时发现，程序在启动后并没有绑定ipv4的端口，而是直接监听绑定ipv6的端口。 当我用netstat -antup | grep 3601查找我的gin服务启动的端口占用情况的时候发现，我的服务直接绑定了tcp6 &a…...
【图解大数据技术】Hadoop、HDFS、MapReduce、Yarn
【图解大数据技术】Hadoop、HDFS、MapReduce、Yarn HadoopHDFSHDFS架构写文件流程读文件流程 MapReduceMapReduce简介MapReduce整体流程 Yarn Hadoop Hadoop是Apache开源的分布式大数据存储与计算框架，由HDFS、MapReduce、Yarn三部分组成。广义上的Hadoop其实是指H…...
AGPT•intelligence：带你领略全新量化交易的风采
随着金融科技的快速发展，量化交易已经成为了投资领域的热门话题。越来越多的投资者开始关注和使用量化交易软件来进行投资决策。在市场上有许多量化交易软件可供选择。 Delaek，是一位资深的金融科技专家，在 2020年成立一家专注于数字资产量化…...
HarmonyOS Next开发学习手册——创建轮播 (Swiper)
Swiper 组件提供滑动轮播显示的能力。Swiper本身是一个容器组件，当设置了多个子组件后，可以对这些子组件进行轮播显示。通常，在一些应用首页显示推荐的内容时，需要用到轮播显示的能力。 针对复杂页面场景，可以使用 Sw…...
【计算机视觉】mmcv库详细介绍
文章目录 MMVC库概览特点和优势主要组件应用案例示例一：数据加载和处理示例二：模型训练和验证MMVC库概览 MMCV 是一个用于计算机视觉研究的开源库，它为各种视觉任务提供了底层的、高度优化的 API。该库涵盖了从数据加载到模型训练的各个方面，广泛应用于开源项目，如 MMDet…...
【面试系列】Go 语言高频面试题
欢迎来到我的博客，很高兴能够在这里和您见面！欢迎订阅相关专栏： ⭐️ 全网最全IT互联网公司面试宝典：收集整理全网各大IT互联网公司技术、项目、HR面试真题. ⭐️ AIGC时代的创新与未来：详细讲解AIGC的概念、核心技术、…...
React 扩展
文章目录 PureComponent1. 使用 React.Component，不会进行浅比较2. 使用 shouldComponentUpdate 生命周期钩子，手动比较3. 使用 React.PureComponent，自动进行浅比较 Render Props1. 使用 Children props（通过组件标签体传入结构&…...
IT入门知识第八部分《云计算》（8/10）
目录 云计算：现代技术的新篇章 1. 云计算基础 1.1 云计算的起源和发展 云计算的早期概念 云计算的发展历程 1.2 云计算的核心特点 按需自助服务 广泛的网络访问 资源池化 快速弹性 按使用量付费 1.3 云计算的优势和挑战 成本效益 灵活性和可扩展性 维…...
Linux-笔记 全志T113移植正点4.3寸RGB屏幕笔记
目录 前言 线序整理 软件 显示调试 触摸调试 背光调试 前言 由于手头有一块4.3寸的RGB屏幕(触摸IC为GT1151)，正好开发板上也有40Pin的RGB接口，就想着给移植一下，前期准备工作主要是整理好线序，然后用转接板与杜邦线连接验证好…...
Linux shell编程学习笔记59： ps 获取系统进程信息，类似于Windows系统中的tasklist 命令
0 前言 系统进程信息是电脑网络信息安全检查中的一块重要内容，对于使用Linux和基于Linux作为操作系统的电脑来说，可以使用ps命令。 1 ps命令 的功能、格式和选项说明 1.1 ps命令 的功能 Linux 中的ps（意为：process status&…...