添加游戏主场景控制脚本

前面简单的实现了主界面的UI设置，现在我们开始制作游戏的控制脚本。

在资源管理器的Script文件夹中，点击右键新建javascript文件，命名为GAME。

双击打开GAME脚本，在properties: 中添加属性代码。

保存好后，我们双击MainScene打开场景，点击Canvas，在右侧的属性检查器最底部，点击［添加组件］＝》［添加用户脚本组件］然后选择我们刚刚创建的脚本GAME.js。

添加好后就可以在属性检查器看到我们的属性组件来，然后我们把场景里的节点拖进对应的属性框即可实现节点绑定。不懂得可以多看看官方文档。

这样我门就可以在GAME脚本里来操作节点了。

二、创建HeroPlayer脚本用来操作玩家主角

角色有2种状态，一种是玩家点击屏幕会实现角色的跳跃，第二种就是角色会受到引力会自动下落。我们在update来实现自动下落。添加好方法后，我门在层级管理器中点击hero节点。然后在右侧属性检查器中绑定脚本。

我门可以在里面初始化值。跳跃高度值，跳跃持续时间，掉落速度等。

脚本里主要实现了跳跃动作，掉落动作等。

然后回到我们的游戏主脚本也就是GAME脚本。添加触摸事件监听，实现监听触摸来调用主角的跳跃动作。

首先在顶部添加脚本引用，然后创建事件监听的方法。

然后在onload方法实现初始化调用。

我们可以来运行下，看下效果。

制作游戏主场景背景滚动

刚刚我们实现了玩家的一些功能，测试了下发现我们的玩家跳跃几次后，就会超出屏幕，这样体验很差，那下面我们来实现场景背景的滚动作为参照物来实现玩家移动。也就是说玩家只需要小范围的移动就行了，剩下的交给背景的移动来给用户带来玩家在移动的错觉，游戏都是这样实现的。

新建脚本BgMove，并实现移动方法，参数为移动的距离。实现代码：

创建好脚本后，我们在场景中给节点bg1、bg2绑定此脚本。

绑定后，我们在打开GAME.js脚本，在顶部引用此脚本。

然后在事件监听方法，触摸结束的方法里添加背景移动的监听。

这里分析下代码部分，首先我们创建场景时候，场景Canvas的锚点为(0.5，0.5)，也就是屏幕的中心点坐标为0,0。其所有子节点的坐标都是相对于场景来布局，所以说我们的主角布局时候放在屏幕的中下方位置，一开始的Y坐标为负数。每次移动Y坐标会增加，当Y坐标增加超过中心点坐标我们需要进行背景移动，而背景移动的距离则是我们的主角Y坐标值减去中心点的Y坐标0，也就是主角Y坐标值本身。

所以每次触摸结束，我们对主角的Y坐标进行判断，如果大于0，说明背景需要移动，移动距离为主角Y坐标值，然后我门调用背景1和背景2的移动方法，参数为主角的Y坐标。

背景移动时候，我们同时需要修正主角的坐标，设置主角的坐标为超过中心点的一半，这样主角不论怎么移动都只能在屏幕内移动。

下面我门来运行预览，测试下。。

是不是可以实现背景滚动了，大家最后发现了一个问题，背景移动完毕了，没有背景会出现黑色的区域。。

下面我们要实现一个方法，来对背景进行计算。我们现在是两个背景进行拼接的。我们需要来判断哪个背景已经移除屏幕，移除屏幕后改变其位置，让它Y坐标变成正在移动的那个背景的上边，这样来实现无缝拼接。这样才是无限滚动的背景。

下面我们继续在GAME脚本添加新的方法来实现计算，下面贴代码。

我们在update里不停的检测背景移动事件来解决黑色问题。下面来再次测试下。

到此我们已经实现了 玩家角色的移动，背景的滚动了。。游戏完成了三分之一了。。感觉还可以吧。继续。。

制作游戏障碍物实现碰撞检测

前面我们实现了背景和主角的操作，下面我们开始添加游戏的障碍物以及碰撞检测的功能。

一、制作障碍物Prefab（预制）

Prefab（预制）是cocoscreator官方文档提出的，是为了解决需要重复使用的节点问题。

如何制作预制体prefab呢？具体可以参照官方文档，这里简单的说下，就是在场景中编辑好节点后，直接将节点从 层级管理器 拖到 资源管理器 中即可。

我们来看下极限跳跃的游戏截图分析下。。

游戏中障碍物我们分为2种，一个是向左移动的，一个是向右移动的，这里我就简单省事了，直接创建了2个预制体，每个预制体实现自己的脚本。可以集成在一起的。

我们先制作左边的障碍物，首先把障碍物素材拖进层级管理器取名zhangaiwu1。然后我们来实现并制作左边的脚本，创建脚本guawuleft。实现代码。

脚本写好了，我们对节点进行绑定。

绑定好后，我们把层级管理器中的节点zhangaiwu1拖进我们资源管理器的Texture文件夹中，成功后我们的层级管理器中的节点就会变成蓝色，同时我们会在资源管理器中得到一个预制体文件zhangaiwu1，我们这里改成zhangaiwuleft，方便和辨认。

预制体文件zhangaiwu1，我们这里改成zhangaiwuleft。然后删除层级管理器的zhangaiwu1节点。使用同样的方法，我们创建脚本zhangaiwuright，并制作预制体zhangaiwuright。

这样我们就制作好了2个预制体，分别为zhangaiwuleft和 zhangaiwuright。可以在资源管理器中看到。

制作好了2个障碍物，我们开始在场景中添加我们的障碍物了。

分析下游戏我们可以发现障碍物是可以根据游戏背景移动的，所以我们要把障碍物添加到背景上。

我们开始制作背景bg1的障碍物，首先把zhangaiwuleft和zhangaiwuright两个预制体拖到层级管理器bg1节点，使其成为bg1的子节点。布局时候把zhangaiwuleft放到屏幕左边，zhangaiwuright放到右边，调整位置。同样的方法给bg2添加障碍物。。如图：

通过我们给不同高度的障碍物设置不同的移动时间，我们的游戏看起来更好玩，来运行测试下效果。

好了。我们的游戏看起来还不错吧，下面我们来做碰撞检测，也就是说如果玩家和障碍物碰到了，那么我们的角色就会死掉，游戏就会结束。结束场景等会我们在做，现在我们先做碰撞检测，如果碰到障碍物我们停止触摸来达到玩家不可操作的目的。

打开guaiwuleft脚本，来给左边的障碍物添加碰撞检测的事件。

同样的方法，我们在guaiwuright中添加碰撞事件。天下代码一大抄，直接抄过去就行了。

我们在此运行检测下。。

我们的角色被障碍物碰到，就死掉了，然后就会屏蔽游戏的触摸事件，玩家角色开始掉落。当角色掉落到屏幕底部时候游戏结束。会切换到结束场景。这里大家看到角色掉没了，不要在意这些细节。。我们接下来开始制作结束场景。

制作游戏结束场景并实现场景切换

前面我们实现了游戏的碰撞检测，碰到障碍物我们的角色就会死掉并开始掉落，角色掉落到屏幕底部时候游戏结束，并跳到结束场景。

我们在资源管理器新建GameOver场景。双击打开场景，调整大小为480x800，添加界面需要的节点。如图。

这样我们的结束场景就制作好了。可以预览下。

制作好了，结束场景我们就需要把我们游戏的三个场景关联起来了。

首先我们双击打开我们的第一个场景WelcomeScene。然后在资源管理器创建playGo.js脚本。代码如下：

这个脚本就实现一个功能，就是切换场景到MainScene场景，也就是第二个场景我们游戏的主场景。

下面我们为开始按钮绑定脚本事件。

这样我们的切换场景功能就实现了，同样的方法我们给GameOver场景中的重新开始按钮绑定脚本事件。

给退出游戏按钮添加事件脚本，创建脚本ExitScene。代码如下：

使用同样的方法，给退出游戏按钮绑定事件。

还剩下一个游戏结束的切换场景事件。打开GAME脚本。添加gameover方法，并在update添加判断和处理。

下面我们来测试下整个流程环节。双击WelcomeScene场景从第一个场景开始预览。

到此我们整个游戏流程以及完了，接下来完善积分系统，还有声音系统整个游戏就可以上线了。下面我们继续来做积分系统。。

添加游戏积分系统

前面我们实现了整个游戏的流程，下面我们来完善游戏的积分系统。。先来分析下游戏的积分，第一次展示积分的地方就是我们的游戏主场景MainScene，玩家通过一些机制来获取积分，实现积分的更新，当玩家游戏结束后展示玩家所获的的当前积分。

我们一开始制作游戏场景的时候就制作了一个积分节点score，其string属性值为0。打开GAME.js脚本可以发现，一开始的时候我们onLoad方法就初始化了积分。

接着我们在GAME.js脚本里新添加一个函数来实现积分的更新。代码如下：

这段代码的意思是实现积分＋1，增长一个积分。并把积分存储到本地，注意本地存储代码。。。那么什么时候才增长积分呢？？

在触摸屏幕接触的时候，如果背景滚动我们就增加一个积分。添加代码位置如下图：

这样每次玩家移动带动背景滚动的时候，积分就会更新。积分更新到时候会存储到本地，这样我们游戏结束的时候就可以正确的显示出来。

新建GameOverScore.js脚本，代码如下：

这段代码的意识是加载的时候，onLoad函数调用积分更新的方法，实现从本地读取游戏场景中存储的积分。

双击打开GameOver场景，如图：

为GameOver场景Canvas绑定刚刚新建的GameOverScore.js脚本。并把score组件拖进scores进行绑定。

这样游戏结束的时候，就会更新score节点组件的显示内容。下面我们来测试下。双击打开主场景，从游戏场景开始测试积分的更新，以及游戏结束的积分显示。

是不是很好玩啊，哈哈。加个积分排行榜更好啊，以后 慢慢扩展来。。。

到此我们整个游戏已经算完成了，当然一个游戏不能没有声音和音效，下面我们来添加声音系统功能。。。

为游戏添加声音音效功能

游戏的声音很重要，我们在这个游戏中需要加2个音效，一个背景音乐。。。第一个音效在玩家与障碍物碰撞的地方加碰撞音效，第二个在玩家主角坠落到屏幕底部的时候加游戏结束的音效。然后游戏开始的时候加载背景音乐。

我们一开始在MainScene场景中的声音图标节点就是我们用来控制声音的开关。。

首先修改guawileft.js脚本，添加音效资源，在onload设置声音大小。代码：

同理在guaiwuright.js脚本也是这样添加。。

为障碍物的2个脚本添加好代码后，我们需要修改我们的两个障碍物预制体。绑定音效资源，这里以zhangaiwuleft预制体为例。双击zhangaiwuleft预制体，添加声音资源绑定。如图：

zhangaiwuright预制体同理也是这样添加声音。

碰撞音效加载好后，我们为游戏结束加个音效。打开GAME.js脚本。在 properties中添加属性。代码如下：

添加好代码后，我们双击打开MainScene场景开始为属性绑定资源和节点。。如图：

可以跑起来测试下我们的声音有没有了。。这就完了吗？当然不是，我们的声音图标还没有用到啊！！

下面为我们的声音图标节点加一个脚本，新建脚本AudioScript.js。代码如下：

代码里实现了一个音乐播放的状态，用来给我们判断是否播放了。播放了图标显示声音图标，没有播放显示静音图标。

此处用来判断声音图标的包围盒和点击坐标的比较，如果为true则表示声音图标被点击到了，如果声音图标被点击则判断当前声音播放状态，并改变状态。声音图标节点显示如图：

声音节点绑定好脚本后，我们继续修改GAME.js脚本中的代码，为AudioScript.js中的方法setCp:function(pos)传参数。

首先在顶部添加引用代码，然后在点击事件添加点击的检测方法，然后update实现更新状态。代码如图：

这里我就不贴代码了，大家手打下。。。到此我们的声音系统也添加完毕了。。。对了，还少一点，声音状态切换的时候声音图标也要改变啊。。。这里大家自己解决。。

［2016.9.6日更新说明：前一段时间大家一直要资源和代码，由于我这段时间都没开电脑，所以一直没放在网盘，今天整理了下，代码和资源一起打包了，下载地址 ： 链接: https://pan.baidu.com/s/1bNi8Tw 密码: gcdr］

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

通过我们大半天的学习，是不是一个完整的小游戏就做好了啊。。做好的小游戏我们最后一步就是分享出去，做游戏不就是装个逼给别人玩吗。。

下面我们来发布我们的游戏，这里我以mac为例。。点击［项目］菜单里的［构建发布］即可打开发布对话框。。

一、游戏名称

我们发布游戏的名称，也就是我们游戏的名字。

二、发布平台

目前可以选择的原生平台包括 Cocos Runtime, Android, iOS, Mac, Windows 五个，其中发布到 Mac 和 Windows 的选项只能在相应的操作系统中才会出现。

三、发布路径

发布路径默认就是我们项目目录下的build目录。

四、初始场景

初始场景这地方一定要注意，一定要先择我们游戏的第一个场景，选错了就坑了。

五、设备方向。

设备方向大家根据自己的项目就行设置，

设置好上面的主要点后，就可以点击［构建］然后［编译］和［运行］了。。

到此为止，我们的整个游戏都完成了。。零基础一天都可以做一个游戏感觉是不是越来越有信心了啊。。

 the end.. by:闭眼就天黑 

本文转载自注明：http://www.byjth.com/CocosCreator/75.html | 闭眼就天黑专栏_个人博客_技术源于分享