h5游戏设计爱丽丝梦游仙境【字数：12376】
从2014年10月开始，Html5的规范被制定完成并且已被大部分浏览器支持。它的跨平台性、及时更新性和Canvas画布立即使Html5小游戏成为小游戏的主流开发技术，所以随之而来迎来了H5小游戏的发展高峰。HTML5的跨平台性、即时更新性和Canvas画布使H5小游戏成为小游戏的开发主流技术。课题顺应潮流，以H5技术和游戏设计为研究重点，通过游戏脚本、游戏界面、游戏关卡和游戏算法设计，最终实现一款跨平台的小游戏。在游戏严重商业化的时代，将游戏目的回归单纯，关注游戏剧情，让玩家体会到游戏设计者的思想输出是课题的意义所在。论文将会着重从开发环境及主要技术、游戏分析、游戏设计、游戏开发与实现四方面讲述以H5技术制作的爱丽丝梦游仙境主题剧情闯关小游戏。打破传统游戏利用键盘控制人物前进的方式，选择利用鼠标跟随来控制人物行走，操作更加灵活自由。游戏的剧情根据十九世纪英国作家兼牛津大学基督学院数学教师刘易斯·卡罗尔创作的著名儿童文学作品《爱丽丝梦游仙境》改编，游戏主角小女孩爱丽丝在梦境里迷了路，在万花筒的镜中，哪一边会是真实呢？爱丽丝在这个如万花筒般的奇幻世界不断游走，不断探险，不断成长，最终寻找到梦境的出口。
目 录
1.引言 1
1.1游戏背景 1
1.2课题研究目的及意义 1
1.2.1目的 2
1.2.2意义 2
2. 开发环境和主要技术 3
2.1开发环境 3
2.1.1设计工具 3
2.1.2编译工具 3
2.1.2运行环境 3
2.2主要技术 4
2.2.1 CSS3动画技术 4
2.2.2 Canvas 2d技术 4
2.2.3 Canvas 动画技术 4
2.2.4 HTML5技术 4
3.游戏分析 6
3.1 游戏定位 6
3.2 前期准备 6
3.3需求分析 6
3.4色彩与风格定位 6
4.游戏设计 7
4.1玩法设计 7
4.2游戏类UML图设计 8
4.3界面设计 10
4.3.1人物设计 10 *好棒文|www.hbsrm.com +Q: ^351916072^
4.3.2场景设计 11
4.3.3剧情视频设计 17
4.3.4音乐与音效设计 17
5.游戏开发与实现 19
5.1游戏目录结构 19
5.2 加载动画 21
5.3剧情视频 21
5.4 新手指引 22
5.5开始界面 23
5.6正式关卡 25
5.6.1游戏界面自适应 25
5.6.2爱丽丝的实现 26
5.6.3音乐控制 29
5.6.4碰撞检测 31
5.6.5游戏跳转 33
5.6.6游戏数据存储 36
6.总结与思考 39
参考文献 40
致谢 41
1.引言
从2014年10月开始，Html5的规范被制定完成并且已被大部分浏览器支持。它的跨平台性、及时更新性和Canvas画布立即使Html5小游戏成为小游戏的主流开发技术，所以随之而来迎来了H5小游戏的发展高峰。
H5canvas游戏是无数的静态图片的组合，但不同的是，每一帧生成的图片都是通过游戏内部逻辑进行生成的，如：玩家通过鼠标点击一个按钮，游戏内部逻辑会对此事件进行处理，后生成鼠标点击这个行为的图片。现如今对于游戏的频率，最佳的体验是在一秒60帧，这样的频率，可以让视觉和操作体验上达到最佳。也就是说，HTML5已经具备了进行游戏开发的条件,可以用于游戏的开发[1]。使用面向对象的开发模式，将游戏中的每个元素设计成类和对象的关系，可以更好的开发游戏。
课题以H5技术和游戏设计为研究重点，通过游戏脚本、游戏界面、游戏关卡和游戏算法设计，最终实现一款跨平台的小游戏。本论文将会着重从开发环境与主要技术、游戏分析、游戏设计、游戏开发与实现四方面讲述以H5技术制作的爱丽丝梦游仙境主题剧情闯关小游戏。
1.1游戏背景
游戏的背景是基于十九世纪英国作家刘易斯卡罗尔创作的著名儿童文学作品《爱丽丝梦游仙境》改编的。作品以一个名叫爱丽丝的女孩的奇妙经历为线索,向观众展现了一个趣味横生、离奇、梦幻的世界[2]。
根据原著剧情，游戏设计了6个不同章节关卡，来展现爱丽丝经历奇幻冒险、找寻到梦境出口的故事，每一章游戏都可以享受到不同世界的旅程。
游戏主角小女孩爱丽丝有着栗色卷发，蓝裙白衫，她活泼调皮，爱幻想，有着一颗向往自由和冒险的心。有一天，爱丽丝为了追逐一只揣着怀表、会说话的兔子而不慎掉入了兔子洞，从而进入了一个神奇的国度并经历了一系列奇幻冒险。在这个世界里，每样东西都不再是原来的样子：永远赶时间的兔子、吃了会变大变小的蘑菇、变成池塘的泪水、不存在的柴郡猫、用红鹤打高尔夫球的女王、给蔷薇上色的花匠爱丽丝在梦境里迷了路，在万花筒的镜中，哪一边会是真实呢？爱丽丝在这个如万花筒般的奇幻世界不断游走，不断探险，不断成长，最终寻找到梦境的出口。
1.2课题研究目的、意义及影响
1.2.1目的
HTML5的跨平台性、即时更新性和Canvas画布使H5小游戏成为小游戏的开发主流技术。课题旨在以H5技术和游戏设计为研究重点，通过游戏脚本、游戏界面、游戏关卡和游戏算法设计，最终实现一款跨平台的小游戏。
游戏的剧情根据十九世纪英国作家兼牛津大学基督学院数学教师刘易斯卡罗尔创作的著名儿童文学作品《爱丽丝梦游仙境》改编，是十九世纪最具影响力的荒诞小说之一。这本书的过程非常奇幻，正如设计的游戏关卡情节。本游戏是献给玩家的一场奇幻童话历险，每个爱童话、爱幻想、有少女心的人都是爱丽丝。
1.2.2意义
在游戏严重商业化的时代，将游戏目的回归单纯，关注游戏剧情，让玩家体会到游戏设计者的思想输出是游戏的意义所在。呼吁现实社会中的女性像主人公爱丽丝一样冲破枷锁,找寻真正的自我[3]。
1.2.3影响
本课题用canvas开发H5游戏，使用原生js来写，没有使用游戏引擎，充分发挥了HTML5 Canvas的潜能。《爱丽丝梦游仙境》是个大ip，以这本童话书为原型的游戏有很多，但是本课题是第一个使用鼠标跟随闯关的canvas剧情游戏。现在社会上对canvas游戏有一种刻板印象，就是canvas游戏不论从画面还是游戏逻辑上都比较简陋，流畅性甚至不如flash。通过本课题实现的游戏，证明了原生canvas游戏也可以很精美流畅。
目 录
1.引言 1
1.1游戏背景 1
1.2课题研究目的及意义 1
1.2.1目的 2
1.2.2意义 2
2. 开发环境和主要技术 3
2.1开发环境 3
2.1.1设计工具 3
2.1.2编译工具 3
2.1.2运行环境 3
2.2主要技术 4
2.2.1 CSS3动画技术 4
2.2.2 Canvas 2d技术 4
2.2.3 Canvas 动画技术 4
2.2.4 HTML5技术 4
3.游戏分析 6
3.1 游戏定位 6
3.2 前期准备 6
3.3需求分析 6
3.4色彩与风格定位 6
4.游戏设计 7
4.1玩法设计 7
4.2游戏类UML图设计 8
4.3界面设计 10
4.3.1人物设计 10 *好棒文|www.hbsrm.com +Q: ^351916072^
4.3.2场景设计 11
4.3.3剧情视频设计 17
4.3.4音乐与音效设计 17
5.游戏开发与实现 19
5.1游戏目录结构 19
5.2 加载动画 21
5.3剧情视频 21
5.4 新手指引 22
5.5开始界面 23
5.6正式关卡 25
5.6.1游戏界面自适应 25
5.6.2爱丽丝的实现 26
5.6.3音乐控制 29
5.6.4碰撞检测 31
5.6.5游戏跳转 33
5.6.6游戏数据存储 36
6.总结与思考 39
参考文献 40
致谢 41
1.引言
从2014年10月开始，Html5的规范被制定完成并且已被大部分浏览器支持。它的跨平台性、及时更新性和Canvas画布立即使Html5小游戏成为小游戏的主流开发技术，所以随之而来迎来了H5小游戏的发展高峰。
H5canvas游戏是无数的静态图片的组合，但不同的是，每一帧生成的图片都是通过游戏内部逻辑进行生成的，如：玩家通过鼠标点击一个按钮，游戏内部逻辑会对此事件进行处理，后生成鼠标点击这个行为的图片。现如今对于游戏的频率，最佳的体验是在一秒60帧，这样的频率，可以让视觉和操作体验上达到最佳。也就是说，HTML5已经具备了进行游戏开发的条件,可以用于游戏的开发[1]。使用面向对象的开发模式，将游戏中的每个元素设计成类和对象的关系，可以更好的开发游戏。
课题以H5技术和游戏设计为研究重点，通过游戏脚本、游戏界面、游戏关卡和游戏算法设计，最终实现一款跨平台的小游戏。本论文将会着重从开发环境与主要技术、游戏分析、游戏设计、游戏开发与实现四方面讲述以H5技术制作的爱丽丝梦游仙境主题剧情闯关小游戏。
1.1游戏背景
游戏的背景是基于十九世纪英国作家刘易斯卡罗尔创作的著名儿童文学作品《爱丽丝梦游仙境》改编的。作品以一个名叫爱丽丝的女孩的奇妙经历为线索,向观众展现了一个趣味横生、离奇、梦幻的世界[2]。
根据原著剧情，游戏设计了6个不同章节关卡，来展现爱丽丝经历奇幻冒险、找寻到梦境出口的故事，每一章游戏都可以享受到不同世界的旅程。
游戏主角小女孩爱丽丝有着栗色卷发，蓝裙白衫，她活泼调皮，爱幻想，有着一颗向往自由和冒险的心。有一天，爱丽丝为了追逐一只揣着怀表、会说话的兔子而不慎掉入了兔子洞，从而进入了一个神奇的国度并经历了一系列奇幻冒险。在这个世界里，每样东西都不再是原来的样子：永远赶时间的兔子、吃了会变大变小的蘑菇、变成池塘的泪水、不存在的柴郡猫、用红鹤打高尔夫球的女王、给蔷薇上色的花匠爱丽丝在梦境里迷了路，在万花筒的镜中，哪一边会是真实呢？爱丽丝在这个如万花筒般的奇幻世界不断游走，不断探险，不断成长，最终寻找到梦境的出口。
1.2课题研究目的、意义及影响
1.2.1目的
HTML5的跨平台性、即时更新性和Canvas画布使H5小游戏成为小游戏的开发主流技术。课题旨在以H5技术和游戏设计为研究重点，通过游戏脚本、游戏界面、游戏关卡和游戏算法设计，最终实现一款跨平台的小游戏。
游戏的剧情根据十九世纪英国作家兼牛津大学基督学院数学教师刘易斯卡罗尔创作的著名儿童文学作品《爱丽丝梦游仙境》改编，是十九世纪最具影响力的荒诞小说之一。这本书的过程非常奇幻，正如设计的游戏关卡情节。本游戏是献给玩家的一场奇幻童话历险，每个爱童话、爱幻想、有少女心的人都是爱丽丝。
1.2.2意义
在游戏严重商业化的时代，将游戏目的回归单纯，关注游戏剧情，让玩家体会到游戏设计者的思想输出是游戏的意义所在。呼吁现实社会中的女性像主人公爱丽丝一样冲破枷锁,找寻真正的自我[3]。
1.2.3影响
本课题用canvas开发H5游戏，使用原生js来写，没有使用游戏引擎，充分发挥了HTML5 Canvas的潜能。《爱丽丝梦游仙境》是个大ip，以这本童话书为原型的游戏有很多，但是本课题是第一个使用鼠标跟随闯关的canvas剧情游戏。现在社会上对canvas游戏有一种刻板印象，就是canvas游戏不论从画面还是游戏逻辑上都比较简陋，流畅性甚至不如flash。通过本课题实现的游戏，证明了原生canvas游戏也可以很精美流畅。
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/qrs/65.html
