怎样在文章后做网站链接,专业的商城网站开发,网上如何建网站卖量具,网店推广的重要性HTML5 JavaScript单词游戏
数据字典格式#xff1a;每行一个 单词 #xff0c;单词和解释用空格分隔#xff0c;如
a art.一(个)#xff1b;每一(个)
ability n.能力#xff1b;能耐#xff0c;本领
able a.有能力的#xff1b;出色的
baby n.婴儿#xff1b;孩子…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 langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title单词游戏/titlestylebody {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
bodydiv idscore成功: 0 失败: 0/divcanvas idgameCanvas width400 height200/canvasdiv idbuttons/divscript// 字典数据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 langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title单词游戏/titlestylebody {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
bodydiv idscore成功: 0 失败: 0/divcanvas idgameCanvas width400 height200/canvasdiv idbuttons/divscript// 字典数据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 等。
