基于html5的英语打字游戏(纯手工,不贴图)

时间:2024-03-03 08:15:44

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.游戏结束画面: