html5手机游戏至尊狗粮的开发
一、引言 2
一、引言
(一)开发背景
伴随着手机行业日新月异的发展，手机游戏娱乐越来越受到大家的喜爱，在这个无论什么流行都可以变成手机游戏的时代，学生也应该去尝试一下，毕竟，比起刚刚涉足游戏制作的人员，学生对于游戏的了解和喜爱远远要大于他们，这是学生的优势，更是他们认真努力去完成游戏的动力。本课题将追寻梦想的脚步，踏足这个学生熟悉又陌生的领域。
（二）游戏发展趋势
自电子产品诞生开始，游戏就注定了要进行长久的革命。从家用游戏机，到便携的掌机，大集成的pc，再到普及的手机，游戏的多元化和越来越好的游戏体验已经是不可阻挡的。这一过程，并不是可以用几个简单的词句来概括的。应为，每一次微小的硬件、软件升级，都会有新的游戏方式出现.而如今html5的出现，也催生了新一代web端手机游戏的发展，本课题，将使用在校学习的HTML5技术开发新的手机游戏。
（三）相关游戏研究和分析
贪吃蛇作为鼻祖级别的游戏，知名度很高，但是随着，游戏更新迭代，它早已跌落神坛，原因很简单，过于单调的游戏性，并不能满足现在的玩家。然而，2014年却有一款比几十年前的贪吃蛇还有简单的游戏获得了巨大的成功，那就是像素鸟。它的成功给力我一些启发。下面先介绍一下这些游戏。
1.贪吃蛇
这是一款通过控制一条蛇，在避免头部触碰墙壁和自身的身体的情况下，尽可能的多吃地图上随机刷出来的食物，提高自身的分数的游戏。游戏如图1-1。
图1-1贪吃蛇
2.像素鸟
这是一款极度简单，极度自虐的小游戏。游戏中你唯一要做的事情就是不停的点击屏幕，保持小鸟不触碰水管，没通过一个水管，增加一分，碰到水管就结束游戏。如图1-2。
图1-2像素鸟
*好棒文|www.hbsrm.com +Q: 3 5 1 9 1 6 0 7 2
可以说作为一个游戏像素鸟的流程简直少的可怜，但是，凭借没有关卡限制和极度糟糕的控制体验，它却创造了另一种炫耀分数的玩法。所以，我决定，尝试把贪吃蛇改造成这种模式的游戏。
（四）开发关键技术和开发工具
1.开发技术html5
作为老牌的网页语言，html在被广泛引用的同时，却又逐渐被更简便更强力的语言取代，2012年 Flash技术被抛弃，HTML5正式确立开始定制。在各大互联网巨头的推动下，html5的能力达到了一个空前的强大。其丰富的的能力几乎能满足所有需求，甚至是画面绚丽的游戏。
单凭一个简单的canvas画布系统，就能满足绝大部分网页游戏的需求，配上特定的代码参数，基本就能完成一个可以跨多个平台的网页游戏。本课题，基于这样的思路，讲使用引擎开发这样的网页游戏。
2.开发工具Construct 2
construct2是一款主攻2D类的游戏引擎，前身是开源项目Construct?Classic，通过重新使用html5语言，搭建框架，现在的construct2，已经变成一款集成度极高且拓展性能良好的跨平台游戏编辑引擎。由于HTML5的新新能，construct2可以适应主流绝大部分的平台系统。现在的它通过类似js数据库的文件，可以拓展多项游戏基本功能，配合使用自建代码，完美的满足了网页游戏的需求。
特点：适应性强，拓展插件多，集成度高。
缺点：
工具自身无法直接打包应用，必须借助第三方工具。
中文资料几乎没有。
二、游戏内容设计与分析
（一）游戏分析
游戏的基本操作还是传统的贪吃蛇模式，为了提高游戏难度，所以在编写时，需要设计特殊的操控方式，即操作体验随特定情况变坏，来达到像素鸟的效果。为了提升可玩性，抛弃贪吃蛇在吃到食物以后改变体型的设定。这样就需要赋予吃到食物新的变化。贪吃蛇中，食物种类只有一种，且无特效。所以，可以适当加入新食物，提升游戏性。
（二）游戏设计
1.在操作方面需要一个不停点击屏幕的效果，故使用，两点坐标比较大小决定方向，每次操作，只会有4个结果，试玩家，在高速移动时来不及判断，从而增加难度。
2.犹豫抛弃了体型的变化，所以在蛇本身上加入了，每次吃到食物时，提升移动速度配合移动方式，在吃到越来越多的食物时，实现游戏难度越来越大。
3.添加新的道具，实现在得到道具时快速提高蛇的速度，快速增加游戏难度，相应得到更多的分数。为提升游戏的游戏时间，在设置一个减速道具，通过减速来降低游戏难度，从而增加游戏性。考虑到道具效果对立，设置道具同一时间只出现一个。
4.游戏抛弃过关方式，通过随时间增加游戏难度，所以，食物刷新，设置时间，并有消失时间。
5.游戏主要界面
游戏包括：开始界面、游戏界面、结束计分界面。如图2-1
图2-1游戏界面设计图
（三）游戏元素
用当前最流行的网路图片中doge作为游戏主角，所以，食物变成狗粮。加速道具使用鞋子，配合，当心流行歌曲，滑板鞋歌词，在吃到道具时，添加歌词作为话语。用药丸作减少道具图片，配合当心流行语，你们别想我吃药等等。。。。。
三、游戏详细设计
游戏分为三个页面，开始页面、游戏页面和结束页面。每个页面分前后台。如图3-1。
图3-1游戏前台后台设计
文件结构如图3-1.1
图3-1-1文件布局结构
（一）地图背景
地图背景是由界面底色和精灵图层组成。底色可以在设计界面属性中设置，精灵则是通过设计者ps完后的png图片导入，可以一覆盖在底色上，通过，调整精灵的位置，可以完成地图和界面的搭建。
（二）主角
主角是有精灵，先绑定图层，设置精灵的参数。并绑定点击事件，并绑定子弹属性，设置初速度。绑定碰撞属性。判断碰撞。碰撞流程图如图3-2。
图3-2主角事件流程的三种情况
（三）常用数据结构的表达
表1
Touch.X
点击坐标的x值
Touch.Y
点击坐标的y值
Player.X
主角坐标的x值
Player.Y
主角坐标的y值
Dist.X
点击与主角x的差值
Dist.Y
点击与主角y的差值
null,
4767819622048825,
[
[
3,
cr.plugins_.Touch.prototype.cnds.OnTouchEnd,//调用onTouchEnd 事件
false
]
在touch事件后添加Edit action事件，获取判断值dist.X和dist.Y。如图4-2
图4-2添加Edit action事件获取判断值
"distY"
]
一、引言
(一)开发背景
伴随着手机行业日新月异的发展，手机游戏娱乐越来越受到大家的喜爱，在这个无论什么流行都可以变成手机游戏的时代，学生也应该去尝试一下，毕竟，比起刚刚涉足游戏制作的人员，学生对于游戏的了解和喜爱远远要大于他们，这是学生的优势，更是他们认真努力去完成游戏的动力。本课题将追寻梦想的脚步，踏足这个学生熟悉又陌生的领域。
（二）游戏发展趋势
自电子产品诞生开始，游戏就注定了要进行长久的革命。从家用游戏机，到便携的掌机，大集成的pc，再到普及的手机，游戏的多元化和越来越好的游戏体验已经是不可阻挡的。这一过程，并不是可以用几个简单的词句来概括的。应为，每一次微小的硬件、软件升级，都会有新的游戏方式出现.而如今html5的出现，也催生了新一代web端手机游戏的发展，本课题，将使用在校学习的HTML5技术开发新的手机游戏。
（三）相关游戏研究和分析
贪吃蛇作为鼻祖级别的游戏，知名度很高，但是随着，游戏更新迭代，它早已跌落神坛，原因很简单，过于单调的游戏性，并不能满足现在的玩家。然而，2014年却有一款比几十年前的贪吃蛇还有简单的游戏获得了巨大的成功，那就是像素鸟。它的成功给力我一些启发。下面先介绍一下这些游戏。
1.贪吃蛇
这是一款通过控制一条蛇，在避免头部触碰墙壁和自身的身体的情况下，尽可能的多吃地图上随机刷出来的食物，提高自身的分数的游戏。游戏如图1-1。
图1-1贪吃蛇
2.像素鸟
这是一款极度简单，极度自虐的小游戏。游戏中你唯一要做的事情就是不停的点击屏幕，保持小鸟不触碰水管，没通过一个水管，增加一分，碰到水管就结束游戏。如图1-2。
图1-2像素鸟
*好棒文|www.hbsrm.com +Q: 3 5 1 9 1 6 0 7 2
可以说作为一个游戏像素鸟的流程简直少的可怜，但是，凭借没有关卡限制和极度糟糕的控制体验，它却创造了另一种炫耀分数的玩法。所以，我决定，尝试把贪吃蛇改造成这种模式的游戏。
（四）开发关键技术和开发工具
1.开发技术html5
作为老牌的网页语言，html在被广泛引用的同时，却又逐渐被更简便更强力的语言取代，2012年 Flash技术被抛弃，HTML5正式确立开始定制。在各大互联网巨头的推动下，html5的能力达到了一个空前的强大。其丰富的的能力几乎能满足所有需求，甚至是画面绚丽的游戏。
单凭一个简单的canvas画布系统，就能满足绝大部分网页游戏的需求，配上特定的代码参数，基本就能完成一个可以跨多个平台的网页游戏。本课题，基于这样的思路，讲使用引擎开发这样的网页游戏。
2.开发工具Construct 2
construct2是一款主攻2D类的游戏引擎，前身是开源项目Construct?Classic，通过重新使用html5语言，搭建框架，现在的construct2，已经变成一款集成度极高且拓展性能良好的跨平台游戏编辑引擎。由于HTML5的新新能，construct2可以适应主流绝大部分的平台系统。现在的它通过类似js数据库的文件，可以拓展多项游戏基本功能，配合使用自建代码，完美的满足了网页游戏的需求。
特点：适应性强，拓展插件多，集成度高。
缺点：
工具自身无法直接打包应用，必须借助第三方工具。
中文资料几乎没有。
二、游戏内容设计与分析
（一）游戏分析
游戏的基本操作还是传统的贪吃蛇模式，为了提高游戏难度，所以在编写时，需要设计特殊的操控方式，即操作体验随特定情况变坏，来达到像素鸟的效果。为了提升可玩性，抛弃贪吃蛇在吃到食物以后改变体型的设定。这样就需要赋予吃到食物新的变化。贪吃蛇中，食物种类只有一种，且无特效。所以，可以适当加入新食物，提升游戏性。
（二）游戏设计
1.在操作方面需要一个不停点击屏幕的效果，故使用，两点坐标比较大小决定方向，每次操作，只会有4个结果，试玩家，在高速移动时来不及判断，从而增加难度。
2.犹豫抛弃了体型的变化，所以在蛇本身上加入了，每次吃到食物时，提升移动速度配合移动方式，在吃到越来越多的食物时，实现游戏难度越来越大。
3.添加新的道具，实现在得到道具时快速提高蛇的速度，快速增加游戏难度，相应得到更多的分数。为提升游戏的游戏时间，在设置一个减速道具，通过减速来降低游戏难度，从而增加游戏性。考虑到道具效果对立，设置道具同一时间只出现一个。
4.游戏抛弃过关方式，通过随时间增加游戏难度，所以，食物刷新，设置时间，并有消失时间。
5.游戏主要界面
游戏包括：开始界面、游戏界面、结束计分界面。如图2-1
图2-1游戏界面设计图
（三）游戏元素
用当前最流行的网路图片中doge作为游戏主角，所以，食物变成狗粮。加速道具使用鞋子，配合，当心流行歌曲，滑板鞋歌词，在吃到道具时，添加歌词作为话语。用药丸作减少道具图片，配合当心流行语，你们别想我吃药等等。。。。。
三、游戏详细设计
游戏分为三个页面，开始页面、游戏页面和结束页面。每个页面分前后台。如图3-1。
图3-1游戏前台后台设计
文件结构如图3-1.1
图3-1-1文件布局结构
（一）地图背景
地图背景是由界面底色和精灵图层组成。底色可以在设计界面属性中设置，精灵则是通过设计者ps完后的png图片导入，可以一覆盖在底色上，通过，调整精灵的位置，可以完成地图和界面的搭建。
（二）主角
主角是有精灵，先绑定图层，设置精灵的参数。并绑定点击事件，并绑定子弹属性，设置初速度。绑定碰撞属性。判断碰撞。碰撞流程图如图3-2。
图3-2主角事件流程的三种情况
（三）常用数据结构的表达
表1
Touch.X
点击坐标的x值
Touch.Y
点击坐标的y值
Player.X
主角坐标的x值
Player.Y
主角坐标的y值
Dist.X
点击与主角x的差值
Dist.Y
点击与主角y的差值
null,
4767819622048825,
[
[
3,
cr.plugins_.Touch.prototype.cnds.OnTouchEnd,//调用onTouchEnd 事件
false
]
在touch事件后添加Edit action事件，获取判断值dist.X和dist.Y。如图4-2
图4-2添加Edit action事件获取判断值
"distY"
]
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/rjgc/1802.html
