本次引擎2.0.5
编辑工具VSCode
如遇不会某个步骤可以先过一遍之前教程,或者下方评论,感谢支持!
目标:单次点击角色移动与吃东西
还记得我们小时候拿着诺基亚之类的老手机玩着魔塔类游戏吗,我们按下方向键,角色就移动一格,然后碰到东西就吃了!今天我就来带大家实现这个小目标。
提前准备个图片(自己画的,没错,我是灵魂画手)
打开我们的项目文件夹:
别的我们先不管;看看这个熟悉的单词,我们好像在哪见过?
没错,相通的!我们把图片扔进去:
然后关闭文件夹,我们回到编辑器,看:是不是图片出现了?
好,接下来让我们布局一下:
第一步:白色背景(重命名bk)
第二步:红色小块(当主角,我重命名叫zhu_jiao)
第三步:把图片拖到场景中:
然后得到:
接下来,我们改变那个图片的大小(变得小一些,具体多少看你手多大),然后我们同样再拖过来3个:
然后我把他们改一下名字(上下左右),然后更改属性面板的:
旋转角度,最后是这样的:
怎么样,有没有红白机游戏的感觉了呢。
保存一下吧,我习惯性起名为game
接下来,我们开始写脚本,来监听那四个上下左右图片,然后对主角的位置进行更改。
诶?不是只有按钮可以监听点击事件吗?关于这个问题:按钮其实只是一个组件,它也可以绑定在别的节点上。
比如Sprite单色,Sprite图片(其实我们拖进来图片就会自动生成Sprite图片类型节点,可以再附加Buttom组件)
我们看图:
同理,我们给上下左右都加上Button组件。
然后:
我们写个脚本就叫zhujiaojs吧(博主懒到不愿意起名字,console.log(滑稽));
删掉注释让脚本可爱起来!
然后我们声明一个step来表示主角移动一格的距离:
然后写出上下左右对应的四个函数:
this.node这个东东就是指绑定该脚本的节点;可以通过它对绑定该脚本的节点进行操作。
this.node.x就是x轴上的位置,同理y为y轴上位置;
(Cocos有两个坐标系:对于游戏内,坐标原点在最中间:而对于手指触摸则中心点在最左下角。)
好,我们把这个脚本绑定在zhu_jiao上;
然后在上下左右四个按钮上把事件数从0改为1,把主角节点拖过去,选脚本,选函数;
注意函数要选对应了!
然后我们运行一下看一看。
怎么样,是不是动起来了呢。
O(∩_∩)O~~
进阶:吃东西;
我们首先添加一个要被吃的对象(我改成了蓝色,改名字为food)。
然后在脚本里加入这个节点(因为我们需要检测它的位置,所以标注类型为Node);
好,然后我们把碰撞算法写进去:
(注:使用到了碰撞算法的知识,isGet函数是封装过的,传入两个节点和距离,可以判断它们是不是碰撞上了。就是利用了勾股定理的知识)
(注:这里我贴出代码,略微复杂,注意在脚本里写完函数,如果不在一个作用域(也就是一个{})内的话,调用时记得加this)
cc.Class({
extends: cc.Component,
properties: {
step:30,
food:cc.Node,
},
start () {
},
Click_shang(){
this.node.y += this.step;
//每点击一次判断是否碰撞上了
this.isGet(this.node,this.food, 100);
//因为是正方形,100是正碰撞距离,100 X 1.414 是对角线碰撞距离,
//这里我用100
},
Click_xia(){
this.node.y -= this.step;
this.isGet(this.node,this.food, 100);
},
Click_zuo(){
this.node.x -= this.step;
this.isGet(this.node,this.food, 100);
},
Click_you(){
this.node.x += this.step;
this.isGet(this.node,this.food, 100);
},
isGet(node_1 , node_2 , r){
//简单的勾股定理
var dy = node_2.y - node_1.y ;
var dx = node_2.x - node_1.x ;
if( r*r >= (dy*dy + dx*dx))
{
node_2.destroy();
//销毁这个节点
}
},
});
然后不要忘记把food节点拖过去。
OK!让我们来运行一下试一试:
在这里,只要我再点击一下上,food就会消失。
怎么样,学会了吗?
不过,这么写代码,目标是实现了,但是斜着过去就判断不准确。想想为什么!
而且后续会报错,因为节点销毁后,再次运行函数就会得不到节点的x,y
怎么办呢,我们不销毁不就可以了吗!随机一个其他位置(好比贪吃蛇游戏)
因为画布是960*640的, food是100*100的正方形
因为最中间是坐标原点:所以最左边是 -480,最右边是 +480
而我们的food是正方形,也就是边长100,但是中心点在中间,所以刚好边缘时,坐标为-480+100/2 = -430
也就是说food只能在-430到430之间才不算出界;
所以我们让node_2.x = -430 + 860*Math.random()
同理写出y吧!
去试试吧!
留个思考题:
如果随机的位置跟主角重合了呢???(答案在最下面)
O(∩_∩)O~~
。。
。。
答案:
isGet(node_1 , node_2 , r){
//简单的勾股定理
var dy = node_2.y - node_1.y ;
var dx = node_2.x - node_1.x ;
if( r*r >= (dy*dy + dx*dx))
{
node_2.x = -430 + 860 * Math.random();
node_2.y = -270 + 540 * Math.random();
//如果随机到的位置还是处于碰撞位置,会再随机一次。
this.isGet(node_1,node_2,r);
}
},
因为isGet函数内有if判断了,所以只要随机到重合位置,还会再运行一次函数,直到不重合为止。