HTML5 +JavaScript单词游戏
数据字典格式:每行一个 单词 ,单词和解释用空格分隔,如
a art.一(个);每一(个)
ability n.能力;能耐,本领
able a.有能力的;出色的
baby n.婴儿;孩子气的人
back ad.在后;回原处;回
background n.背景,后景,经历
cable n.缆,索;电缆;电报
cafe n.咖啡馆;小餐厅
good a.好的;有本事的
需要注意的是,JavaScript 在浏览器环境中不能像python那样直接读取本地文本文件,这是出于安全考虑,可以将数据字典内容作为 JavaScript 数据直接嵌入到脚本中。
游戏规则:
每次随机从文本中选取一个英语单词,在界面上从左到右移动,随机选出三个单词的解释,和英语单词正确解释,随机放到四个按钮中,这四个按钮放到界面下方。
用户单击带有解释的按钮,界面上英语单词消失,再随机从文本中选取一个新英语单词,进入下一个猜单词过程;若英语单词移动出界面,用户未能单击有正确解释的按钮,表示失败,也将随机从文本中选取一个新英语单词,进入下一个猜单词过程。
有失败和成功计数。
使用HTML5来实现这个单词游戏, 运行界面:
使用面向过程方式实现,游戏源码如下:
html
<!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代码是面向过程的,下面使用面向对象方式实现。
使用面向对象方式实现,游戏源码如下:
html
<!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 等。