21、实现 Hangman 游戏的技术指南

实现 Hangman 游戏的技术指南

1. 游戏概述与关键需求

Hangman 游戏是一款具有回合制特点的游戏，与石头剪刀布不同，它需要程序在内部管理游戏状态并在屏幕上显示。实现该游戏会用到 HTML5、CSS 和 JavaScript 的多种特性，以下是关键需求：
- 单词列表 ：游戏需要访问一个合法单词列表，可将其存储在数组中，并且最好将单词列表与程序分离。
- 用户界面 ：采用图形化的字母按钮作为玩家操作界面，每个按钮可点击，点击后字母消失。
- 绘图展示 ：在游戏过程中，逐步绘制绞刑架和人形，绘图由简单的线条和椭圆组成。
- 秘密单词显示 ：屏幕上最初显示秘密单词的空白占位符，正确猜出字母后填充。
- 游戏状态管理 ：程序需监测游戏进度，准确判断玩家输赢。

2. HTML5、CSS、JavaScript 特性应用

2.1 存储单词列表

可以将单词列表存储在外部脚本文件的数组中。例如：

var words = [
    "muon", "blight","kerfuffle","qat"
];

为了使用不同的单词列表，可以将上述代码保存为 words1.js 文件，并在 HTML 文档中使用以下代码引用：