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 等。

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

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

相关文章

数据库对比脚本，java如何对比两个数据库的表字段的不同

数据库对比脚本，java如何对比两个数据库的表字段的不同

因为有时候开发环境和 测试环境&#xff0c;有时候会有不同的数据库表&#xff0c;比如有些加字段了&#xff0c;所以这个脚本就实现了对比两个数据库连接的数据库到底哪里不一样&#xff0c;输出到控制台 package com.junfun.pms;import lombok.extern.slf4j.Slf4j;import ja…
阅读更多...
25届最近5年北京工业大学自动化考研院校分析

25届最近5年北京工业大学自动化考研院校分析

北京工业大学 目录 一、学校学院专业简介 二、考试科目指定教材 三、近5年考研分数情况 四、近5年招生录取情况 五、最新一年分数段图表 六、初试大纲复试大纲 七、学费&奖学金&就业方向 一、学校学院专业简介 二、考试科目指定教材 1、考试科目介绍 2、指定教…
阅读更多...
C++进修——C++核心编程

C++进修——C++核心编程

内存分区模型 C程序在执行时&#xff0c;将内存大方向划分为4个区域 代码区&#xff1a;存放函数体的二进制编码&#xff0c;由操作系统进行管理全局区&#xff1a;存放全局变量和静态变量以及常量栈区&#xff1a;由编译器自动分配释放&#xff0c;存放函数的参数值&#xff…
阅读更多...
grpc学习golang版（ 三、proto文件数据类型 ）

grpc学习golang版（ 三、proto文件数据类型 ）

系列文章目录 第一章 grpc基本概念与安装 第二章 grpc入门示例 第三章 proto文件数据类型 第四章 多服务示例 第五章 多proto文件示例 第六章 服务器流式传输 第七章 客户端流式传输 第八章 双向流示例 文章目录 一、proto语法二、proto中的标量类型三、proto中的数组类型四、p…
阅读更多...
资料导览（持续更新）

资料导览（持续更新）

经典推荐 多模态大模型&#xff1a;基础架构 图解DSPy&#xff1a;Prompt的时代终结者&#xff1f;&#xff01; vLLM, LMDeploy, MLC-LLM, TensorRT-LLM, and TGI的性能小实验 优雅谈大模型13&#xff1a;一文读懂LoRA/DoRA/MoRA 新鲜速递&#xff1a;图解新颖LLM的CoPE位…
阅读更多...
C#测试调用DotnetSpider爬取网页内容

C#测试调用DotnetSpider爬取网页内容

微信公众号“DotNet”的文章《.NET快速实现网页数据抓取》介绍了调用开源网页爬取模块DotnetSpider爬取cnblog网站文章的基本方式。之前学习过使用HtmlAgilityPack抓取并分析网页内容&#xff0c;DotnetSpider也依赖HtmlAgilityPack模块&#xff0c;不过前者属于轻量、高效的爬…
阅读更多...
C++ 运算符的优先级和结合性表

C++ 运算符的优先级和结合性表

优先级和结合性表 优先级运算符描述结合性1::作用域解析运算符左到右2() [] . -> --后缀运算符左到右3 -- - ! ~ * & sizeof new delete typeid一元运算符右到左4* / %乘除取模左到右5 -加法和减法左到右6<< >>左移和右移左到右7< < > >关系…
阅读更多...
大数据开发如何管理项目

大数据开发如何管理项目

在面试的时候总是 会问起项目&#xff0c;那在大数据开发的实际工作中&#xff0c;如何做好一个项目呢&#xff1f; 目录 1. 需求分析与项目规划1.1 需求收集与梳理1.2 可行性分析1.3 项目章程与计划 2. 数据准备与处理2.1 数据源接入2.2 数据仓库建设2.3 数据质量管理 3. 系统…
阅读更多...
【微服务】Alibaba Cloud Linux环境下Docker以及MySQL安装

【微服务】Alibaba Cloud Linux环境下Docker以及MySQL安装

部署Docker 1.安装dnf dnf是新一代的rpm软件包管理器 yum -y install dnf2.安装社区版Docker&#xff08;docker-ce&#xff09; 添加docker-ce的dnf源 dnf config-manager --add-repohttps://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo安装Alibaba Cloud…
阅读更多...
MySQL 12种锁：真实业务与流程图解析

MySQL 12种锁：真实业务与流程图解析

文章目录 1. 表级锁&#xff08;Table Lock&#xff09;场景1&#xff1a;全表扫描统计 2. 行级锁&#xff08;Row Lock&#xff09;场景2&#xff1a;修改特定用户信息 3. 全局锁&#xff08;Global Lock&#xff09;场景3&#xff1a;数据备份 4. 意向锁&#xff08;Intent L…
阅读更多...
高性能并行计算华为云实验三：蒙特卡罗算法实验

高性能并行计算华为云实验三：蒙特卡罗算法实验

目录 一、实验目的 二、实验说明 三、实验过程 3.1 创建蒙特卡罗算法源码 3.2 Makefile的创建与编译 3.3 主机文件配置与运行监测​​​​​​​ 四、实验结果与分析 4.1 原教程对应的实验结果 4.2 改进后的实验结果 五、实验思考与总结 5.1 实验思考 5.2 实验总结…
阅读更多...
firewalld(2)安装、配置文件、规则查询

firewalld(2)安装、配置文件、规则查询

安装firewalld 我使用的操作系统是debian 12,并没有安装firewalld。 通过apt install firewalld安装firewalld firewalld 本身是一个服务（firewalld.service），可以通过 systemctl 进行启动、停止和重启，而iptables 本身并不是一个服务，而是一个用户空间工具，被用来配置底…
阅读更多...
论文浅尝 | 通过基于动态文档知识图谱增强的大语言模型故事理解

论文浅尝 | 通过基于动态文档知识图谱增强的大语言模型故事理解

笔记整理&#xff1a;许方舟&#xff0c;天津大学硕士&#xff0c;研究方向为知识图谱 链接&#xff1a;https://ojs.aaai.org/index.php/AAAI/article/view/21286 1. 动机 基于大型 Transformer 的语言模型在需要叙事理解的各种任务上取得了令人难以置信的成功&#xff0c;包括…
阅读更多...
python中容易错误的知识点，仅仅针对于自己

python中容易错误的知识点，仅仅针对于自己

dtype 参数在创建 NumPy ndarray 对象时用于指定数组元素的数据类型。 在 NumPy 中&#xff0c;直接使用 Python 列表即可创建 ndarray 对象&#xff0c;无需使用 list() 函数。 dtype 属性正确地表示了数组中元素的数据类型&#xff0c;所以描述没有错误。实际上&#xff0c…
阅读更多...
【Hadoop学习笔记】认识Hadoop

【Hadoop学习笔记】认识Hadoop

认识Hadoop 从网上找的课程做的笔记&#xff0c;有些图是自己理解画的&#xff0c;可能不正确&#xff0c;可以作为参考&#xff0c;有疑问的地方请直接指出&#xff0c;共同交流。 Hadoop是由Apache基金会开发的一个分布式系统基础架构&#xff0c;主要解决海量数据的存储和海…
阅读更多...
安装mmdetection

安装mmdetection

python版本&#xff1a;3.7 torch1.10.0,torchvision0.11.0 torchaudio0.10.0 cudatoolkit11.3.1 mmdetection版本:2.11.0 mmcv-full: 根据自己的cuda版本和torch版本修改下面的网址&#xff0c;找到对应的下载并安装 https://download.openmmlab.com/mmcv/dist/cu113/torch1.…
阅读更多...
Django ModelForm：循环展示所有字段

Django ModelForm：循环展示所有字段

在Django开发中，使用ModelForm可以大大简化表单的创建和处理过程。本文将介绍如何使用ModelForm，并展示一种简洁的方法来循环显示表单中的所有字段。 1. 模型定义 首先，让我们看一下我们的模型定义： # models.py from django.db import modelsclass Classxxxx(models.Mo…
阅读更多...
C++轻量级 线程间异步消息架构（向曾经工作的ROSA-RB以及共事的DOPRA的老兄弟们致敬）

C++轻量级 线程间异步消息架构（向曾经工作的ROSA-RB以及共事的DOPRA的老兄弟们致敬）

1 啰嗦一番背景 这么多年&#xff0c;换着槽位做牛做马&#xff0c;没有什么钱途 手艺仍然很潮&#xff0c;唯有对于第一线的码农工作&#xff0c;孜孜不倦&#xff0c;其实没有啥进步&#xff0c;就是在不断地重复&#xff0c;刷熟练度&#xff0c;和同期的老兄弟们&#xf…
阅读更多...
[OtterCTF 2018]Recovery

[OtterCTF 2018]Recovery

里克必须找回他的文件&#xff01;用于加密文件的随机密码是什么 恢复他的文件 &#xff0c;感染的文件 &#xff1f; vmware-tray.ex 前面导出的3720.dmp 查找一下 搜索主机 strings -e l 3720.dmp | grep “WIN-LO6FAF3DTFE” 主机名 后面跟着一串 代码 aDOBofVYUNVnmp7 是不…
阅读更多...
快速应用开发（RAD）：加速软件开发的关键方法

快速应用开发（RAD）：加速软件开发的关键方法

目录 前言1. 快速应用开发的概念1.1 什么是快速应用开发&#xff1f;1.2 RAD与传统开发方法的对比 2. 快速应用开发的实施步骤2.1 需求分析与规划2.2 快速原型开发2.3 用户评估与反馈2.4 迭代开发与改进2.5 最终交付与维护 3. 快速应用开发的优点与应用场景3.1 优点3.2 应用场景…
阅读更多...
最新文章

Copyright @ 2022~2023