基于HTML5的微信游戏森林游侠的设计和实现

摘  要： 在移动信息高速发展下，微信作为时下最热门的社交平台在一定程度上为移动网络用户创造了一种崭新的生活方式，而微信因其强大功能赢得很多人的青睐，而学生用户更是其不可缺少的一大部分。因此，作为新时代的新方式，微信游戏对于在微信平台上的推广有种十分重要的作用。一个好的微信HTML5游戏对于公众号的推广是十分有利的。森林游侠游戏就是在这个“微时代”的契机下，针对当前年轻人离不开手机，离不开微信的现状，借助年轻人大量的用户基础来进行推广。项目采用“像素风”的设计风格，通过“CSS3”实现页面动画，通过“JQuery”和“java script”实现游戏功能，主要实现人物跳跃，射箭，分数计算，游戏结束和分数提交等功能。界面结构清爽大方，兼容适配良好，符合交互体验。

关键词：HTML5游戏  像素风设计  人物动画    

目 录

1 引言 1

1.1 课题的研究背景及意义 1

1.2 课题现状与发展趋势 1

1.3 课题的可行性分析 2

2 项目目标和内容 3

2.1 目标和内容 3

2.2 相关任务 3

3 开发环境以及工具和技术的介绍 5

3.1 项目开发环境 5

3.2 主要开发工具介绍 5

3.2.1 Microsoft Visio 绘图 5

3.2.2 Adobe Photoshop CS6 6

3.2.3 Dreamweaver 6

3.2.4 Sublime Text 7

3.2.5 Chrome浏览器 7

3.3 主要技术介绍 7

3.3.1 JQuery 7

3.3.2 Div+CSS 8

3.4 关键技术的研究 9

3.4.1 WAP页面 9

3.4.2 WAP页面的设计 9

3.4.3 WAP页面的布局 10

4 项目分析 12

4.1 项目概述 12

4.2 项目性能需求 12

4.3 项目功能和流程 12

4.3.1 功能模块分解 12

4.3.2 操作流程 13

4.4 项目进度安排 14

5 页面的设计和实现 15

5.1 页面设计 15

5.1.1 收集整理相关资料 15

5.1.2 定义结构画流程图 15

5.1.3 制作效果图 17

5.2 页面布局 22

5.2.1 效果图切片 22

5.2.2 创建项目 22

5.2.3 页面布局 23

5.2.4 WAP页面布局效果的测试 26

5.2.5 协助程序员开发 27

6 项目测试 28

7 总结与展望 30

致谢 31

参考文献 32