丁聪毕业答辩围住逃课男游戏设计与开发祥解.ppt

1 LOGO 指导教师：赵莹 围住逃课男游戏设计与开发 班级：网络11-3 学生：丁聪 学号 1 1、采用HTML5新添加的Canvas绘图功能创建游戏舞台。 2、使用img和audio标签完成了游戏背景和音效的设置。 3、使用JavaScript编码设计游戏的人物模块、地图模块、算法模块和流程控制模块，提高了程序的兼容性和实用性。 4、游戏布局则采用CSS样式实现，用法简单且功能强大。 游戏制作简介 2 游戏主要功能 1 舞台控制功能 2 背景音乐及鼠标点击音效控制功能 3 游戏模式设置功能 4 人物模块的相关功能 5 算法模块的相关功能 6 流程控制模块的相关功能 3 游戏系统的总体结构 4 1、借助preloadjs预加载游戏资源 2、游戏以教室为背景，玩家扮演老师的角色，去阻止想要逃课的学 生。 3、有两种游戏模式供玩家选择：经典模式和基友模式 游戏开始界面 5 经典模式运行界面 1、只加载一名“逃课男” 2、采用最短路径算法 3、记录并显示玩家操作步骤数 6 经典模式的移动算法 1、先确定移动方向 2、再控制人物向该方向移动 7 基友模式运行界面 1、需加载两名“逃课男” 2、采用随机移动算法 3、点击重玩按钮可更改地图布局 8 基友模式的移动算法 1、先将可移动 方向放入数组 2、再从数组中随机选一个方向，并控制人物向该方向移动 9 游戏结束界面 1、游戏结束界面分为两种：成功和失败 2、成功围住，则显示所用步骤数 3、利用本地存储记录玩家最佳成绩 10 游戏结束界面 1、围捕失败，则告知逃课生的去向 2、点击再玩按钮可重设游戏参数，重玩游戏 3、显示玩家的最佳成绩 11 人物模块设计 人物模块：主要负责加载人物图片，生成人物动画。 采用了Sprite Sheet （纹理集动画） 1、 单张图片拼接在一张大图上 2、 一次性导入和管理，方便快捷 3、通常配有描述文件，说明如何播放动画（json） 4、用easeljs指定动画配置，代替描述文件的内容 12 舞台模块设计 舞台模块：主要负责游戏界面的绘制、地图布局的修改。地图布局由两种类型的圆点形成的数组矩阵构成。 1、采用HTML5 的canvas画布功能 2、利用createjs.Stage创建舞台 3、借助addCircle添加圆点，使用createMap绘制地图布局，借助createCat生成人物动画。 13 HTML5兼容问题 默认情况下，IE6、7、8无法识别HTML5的新元素，如article和section。因此无法对这些标签进行样式化处理。为了让IE识别这些元素，可以通过JavaScript以编程的方式在DOM中创建它们，然后再添加相应的样式，如下所示： script document.createElement (‘article’); document.createElement (‘section’); /script 14 CSS兼容问题 虽然大多数现代浏览器都知道如何在默认情况下处理无样式元素，但是IE不行，为了让IE也兼容，需要将新元素设置为display : block, 代码如下 article, aside, details, audio, figure, footer, header, video，canvas，section { display : block; } 15 兼容前后效果对比图 16 设计总结 优点： 1. 界面友好 2. 操作简单 3. 运行流畅 4. 可扩展性 不足：1.未实现逃课男被困后的动画切换 2.个别图片的制作效果不是很理想 17 大学本科的学习生活即将结束。在此，我要感谢所有曾经教导过我的老师和关心过我的同学，他们在我成长过程中给予了我很大的帮助。本文能够顺利完成，要特别感谢我的导师赵莹老师，感谢各位系的老师的关心和帮助。 最后向所有关心和帮助过我的人表示真心的感谢。 致谢 18 1 LOGO