2012-07-06 10:55 189人阅读 评论(11) 收藏 举报
基于html5的打字游戏
引言
一、打字游戏是一款耳熟能响的桌面应用程序，通过该程序可以将英语单词学习和娱乐有效的结合起来。但是在这个大量应用从c/s架构往b/s架构过渡的年代，我们将通过html5等技术再现这款游戏的辉煌和风采。
功能描述
一、当用户进入游戏，进入欢迎界面。在欢迎界面用户可以选择"音乐"，"游戏难度"，"历史战绩"，"开始游戏"。当用户点击"开始游戏"，进入游戏主界面。在游戏主界面，玩家可以进行游戏。
二、游 戏规则：系统在开始游戏时，根据用户选择的难易程度，随机产生一个一定长度的英文单词，英文单词会空出部分字母，旁边会给出该英文单词的中文解释。用户根 据中文解释从键盘输入该单词缺失的字母。如果输入正确，则在空缺处以高亮显示补充的字母，当所有字母补充完成后，该单词完成拼写，游戏分数会增加，游戏时 间补全，从而可以继续游戏，当游戏分数到达一定程度，会恭喜用户进入下一关卡。如果玩家输入错误，那么该单词的拼写将重新开始，当在规定的时间内仍未完成 拼写，游戏结束。当游戏结束，跳转到结束界面。
在游戏结束界面可以选择"重新开始"，"返回主界面","查询成绩"。
功能分析
1．游戏难易设置（完成）
2．游戏音乐选择（开关，或选取）（完成）
3．历史成绩排名查询 （待完成）
4．本地字典库设计（有难易区别）（完成）
5．空缺字母英文单词产生 （完成）
6．键盘监听 （完成）
7．输入正确性判定，和对应展现 （完成）
8．计时器 （完成）
9．分数和等级设置 （完成）
10．游戏结束和升级画面实现 （完成）
11．暂停功能 （完成）
软件开发模式
本项目采用迭代递增的开发模式；在基本功能界面的基础上，通过cavens画出基本样式，然后不断添加交互功能。
团队协作主要采用讨论，交流的传统方式，因为项目不是很大，所以没有涉及源码版本管理等。
技术总结
1.html5画布（canvas ）的学习和使用。
2.html5键盘/鼠标事件监听和处理。
3.html5 音乐播放（audio ）的学习和使用。
4.图形学基础知识。
5.js相关编程技术。
项目不足
1.项目交互性不是很强。
2.游戏中单词库不够完善。
3.游戏分数没有做持久化操作。
4.js游戏代码，没有做到oop抽象，也没有做到mvc的分离。
项目收获和总结
通过一周的课程设计，基本完成了一个基于html5的英语单词练习小游戏。通过立题、组队、需求分析、功能设计、编码、测试、迭代、发布这一系列过程，使我们组每个成员无论是在思想、经验以及学习能力上都有一个很好的提高。
功能演示
1.游戏主界面：
2.游戏操作画面：
拼写错误提示；游戏暂停功能；音乐开关操作等。
3.过关画面：
4.游戏结束画面：
