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来实现这个单词游戏, 运行界面:

使用面向过程方式实现,游戏源码如下:

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

相关推荐
Myli_ing1 小时前
考研倒计时-配色+1
前端·javascript·考研
余道各努力,千里自同风1 小时前
前端 vue 如何区分开发环境
前端·javascript·vue.js
PandaCave1 小时前
vue工程运行、构建、引用环境参数学习记录
javascript·vue.js·学习
软件小伟1 小时前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
醉の虾1 小时前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
懷淰メ1 小时前
PyQt飞机大战游戏(附下载地址)
开发语言·python·qt·游戏·pyqt·游戏开发·pyqt5
张小小大智慧1 小时前
TypeScript 的发展与基本语法
前端·javascript·typescript
疯狂的沙粒3 小时前
对 TypeScript 中高级类型的理解?应该在哪些方面可以更好的使用!
前端·javascript·typescript
旭日猎鹰3 小时前
Flutter踩坑记录(二)-- GestureDetector+Expanded点击无效果
前端·javascript·flutter
一条晒干的咸魚4 小时前
【Web前端】创建我的第一个 Web 表单
服务器·前端·javascript·json·对象·表单