22、猜单词游戏的实现与拓展

猜单词游戏的实现与拓展

关键需求

实现猜单词游戏，会用到许多之前章节展示过的 HTML5 和 JavaScript 结构，但这里是以不同的方式组合起来。编程就像写作，将各种结构组合在一起，如同用已知的单词组成句子，再形成段落等。在阅读相关内容时，要回顾之前学过的在画布上绘图、创建新的 HTML 标记、为屏幕上的标记设置鼠标点击事件以及使用 if 和 for 语句等知识。

要实现这个或其他猜单词游戏，需要访问一个单词列表。对于这个游戏，计算机或玩家会选择一个单词，不一定需要包含玩家可能猜测的所有单词的列表。创建和测试程序时不需要长列表，后续可以替换。这里要求单词列表与程序分离，单词列表存放在 words1.js 文件中。

玩家操作的用户界面可以有多种形式，比如表单中的输入字段。但更好的做法是让界面包含代表字母表字母的图形，要让每个图形成为可点击的按钮，并在字母被选中后使其消失，这样还能防止调皮的玩家多次点击正确猜出的字母。

秘密单词最初在屏幕上显示为全空白，之后填入正确识别的字母。这里选择用双下划线作为空白，因为希望识别出的字母有下划线，也可以用问号替代。

最后，程序必须监控游戏进度，正确判断玩家何时输何时赢。游戏状态玩家可见，但程序要设置和检查内部变量来做出判断。

HTML5、CSS 和 JavaScript 特性

以外部脚本文件中定义的数组形式存储单词列表

猜单词游戏需要访问一个可接受的单词列表，即单词库。一种方法是使用数组，初始示例的短数组定义如下：