cocos creator 碰撞游戏

一个简简单单的切换场景的小游戏,怎么能满足得了我呢,所以在看了cocos creator的用户手册和JavaScript的新手教程之后,盘算着做一个稍微复杂一点的小游戏,对,稍微~~

ps:看见蓝色的字就点一点啊,没准藏了个惊吓。

首先呢,依旧是创建一个空项目,这一步不会做的话请点击这里,建立好相应文件夹,需要提早准备一些图片资源,可以去网上下载,并放入你的项目中的存放图片的文件夹中。再创建一个场景,命名为first。先给first场景添加一个背景图,找一张比较大的背景图,直接拖到Canvas下,命名为firstBg,并在右侧的属性检查器中的Node栏中配置好相应的数据,使这张背景图能够在后期用代码实现横向滚动。如:

firstBg和它的Node属性

那条红线往左就是屏幕大小,蓝线框内就是这张背景图的大小。接下来,要做一个主角,随便取一张卡通人物图,把它拖到Canvas中,命名为hero,放在在firstBg的下面,与firstBg同级。层级的规则是:同级的情况下,在层级管理器,越下面的,就在运行后的屏幕上越前面。

hero和它的Node属性

接下来,给hero加点料吧。新建一个JavaScript,命名为hero,添加:

hero.js(1)
hero.js(2)
hero.js(3)

这部分的代码是给主角hero添加了,键盘上的WSAD的监听,分别代表上下左右,如果你不能理解的话,可以看看这个例子先。accLeft,accRight,accUp,accDown,是在该方向上是否能移动。moveSpeed指的是hero的移动速度。update是一个实时监听的函数,在里面写了如果在该方向上允许移动,则实时设置this.node的坐标,这个this.node就是主角hero。另外,为了更符合背景图的实际,我给hero在纵向上移动范围做了限制。然后回到first场景,点选hero,添加刚刚写的hero.js,(添加组件/添加用户脚本组件/hero):

给主角hero添加hero.js

设置移动速度为200,完成后,你可以保存一下,然后运行看看了。

那么问题来了,主角可以通过WSAD移动,但是背景图没有动。那么,新建一个javaScript脚本文件命名为bg:

bg.js

bg.js里的bg和hero是给外部预留的接口,如同上面的moveSpeed。我就在update这个函数下做了一些移动范围的判断,具体的数值你要根据你的背景图大小来设置。如果嫌麻烦,就把背景图大小改成和我一样就得了。然后在firstBg的属性检查器中,添加刚刚写的bg.js脚本文件,再把Canvas下的hero和firstBg拖进来:

给firstBg添加bg.js

之后可以运行看看,屏幕会随着主角移动而移动了。

不过,感觉空荡荡的,是不是应该添加点怪物?将怪物的小图片拖到Canvas中,因为怪物们不能随着主角的移动而移动,所以要把怪物放到firstBg下。下图请忽略置灰的UI。

创建怪物

然后给这些怪物加点动画,新建脚本命名为monster:

monster.js(1)
monster.js(2)

上面的代码就预留了monster1,monster2,monster3,boss,box,的外部接口,然后给一些怪物增加了移动动画。把这个脚本应用到firstBg上,再把相应的怪物拖进来:

给firstBg添加monster.js

运行,恩,怪物在动了。然而,主角与怪物碰撞时,什么都没发生,这可不行,总得让它们产生点激情的火花吧?恩,依次给monster1,monster2,monster3,boss,box,还有hero,都添加一个碰撞组件,碰撞组件有三种,矩形,圆形,多边形,试了下,还是多边形比较好一些:

添加碰撞组件

完成如下:

多边形碰撞组件

设置hero和box的碰撞组件的Tag为0,其他都为1。以便于区分胜负,碰到box为胜,碰到其他怪物为负。

既然都有胜负了,那么是不是应该有个胜负的弹窗呢?随便搭一个吧,就一个背景图,一个按钮,一个文本:

resultView

这个弹窗不能一开始就可以看到吧?所以resultView的属性检查器的那个可见的勾要去掉,在代码中可以用.active = true来显示:

去掉勾为不可见

然后新建脚本文件,命名为hit.js:

hit.js

预留了弹窗和文本的接口。cc.director.getCollisionManager().enabled = true;表示碰撞系统开启。

onCollisionEnter: function (other, self) {

    if (self.tag === 0) {

        this.view.active = true;

        this.label.string = "you win";

    } else {

        this.view.active = true;

        this.label.string = "you lose";

    }

}

是碰撞的处理函数,self是被碰到的对象,如果被碰到的东西的tag是0,那个表示碰到了箱子,就赢了;反之,就输了。

然后将这个脚本文件应用到monster1,monster2,monster3,boss,box中:

添加hit.js

到这里其实游戏已经差不多完成了。接下来把那个再玩一次的按钮添上脚本文件,不会的话请点击这里

再玩一次按钮添加脚本文件

接下来是实际运行的效果图:

进入时
碰到怪物为输
碰到箱子为赢(中间没有碰到怪物)

都说问题来自测试,我发现当游戏结束时(碰撞到胜利或者碰撞到怪物失败)hero还能接受WSAD的监听,还有怪物也依旧上下做着缓慢的动作,这个应该是不符合常理的。游戏结束了,hero和怪物们都要停止动作,保持在碰撞到的那一刻。

所以,我想了好久也问了好多人,终于得到了一个比较好的办法。首先在hero.js里cc.class的外面加上:

hero.js补充

这段代码意思是:从cocos creator里找到hero这个控件,使它上下左右都不允许移动,移除自身所有的监听,并对外提供了 removeAll这个函数。这样我在别的脚本文件里,想让hero停止移动并移除监听只需要导入hero.js,然后调用removeAll函数就可以了。

同理,给monster.js添加:

monster.js补充

最后在hit.js中调用,先导入上两个文件:

hit.js补充

然后:

hit.js补充

这样,当游戏结束时,hero和怪物们都会停止移动,而且你再按WSAD也对hero无效了。

至于

文本和关闭按钮

随便搭一下吧,至于关闭游戏的代码是  cc.director.end();


好了,新一代的菜鸟“神作”就这样完成了。什么?你要代码?好吧,我刚刚学会了用Github Desktop上传项目到Github,点击这里就能下载项目了。如果你真的需要看一些游戏项目的话,请点击这儿点击那儿。这里有许多大神写的一些游戏项目供参考,当然要看懂的话,你至少需要把cocos creator的用户手册全都看一遍,毕竟大神们是没那么多时间来写对他们来讲很low而对我们来讲很高大上的项目的教程的(摊手)。

如有错误,欢迎指正。如有补充,欢迎告知。

2017-07-24

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,937评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,503评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,712评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,668评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,677评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,601评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,975评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,637评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,881评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,621评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,710评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,387评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,971评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,947评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,189评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,805评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,449评论 2 342

推荐阅读更多精彩内容