cocos2d-js(二)cocos2d-js的基本语法与类的简介

时间:2023-03-08 16:44:16
cocos2d-js(二)cocos2d-js的基本语法与类的简介

基本语法:

1.类的定义

一般类都是集成Scene或者Layer:

var myLayer = cc.Layer.extend({类的内容});

2类内的成员变量与方法:

2.1成员变量的声明:

变量名:值,一般都习惯在成员变量名前加下划线表示是类内成员。

例如定义一个变量来表示生命值:

_hp : 100,

多条定义之间用逗号分隔。

2.2 方法的声明:

函数名:function(参数列表){函数体}

一般我们会重写类的ctor和init方法,来实现类的初始化,两个方法在类实例化时都会被调用。

重写这两个方法时,记得调用父类的相关方法,方法为this._super();

Cocos2d中使用this指示当前类。

3. 类的实例化

使用new来实例化一个类,是否要传入参数要看ctor的设定,实例化时的参数列表与ctor一致。

4.全局变量与数组

在使用cocos2d引擎编写游戏时,常常需要一些全局变量,一般的习惯是把它们定义到Global.js中。

一个空类的定义为 GLOABL = {}。

如果要向其中添加一些成员变量,直接使用点语法赋值即可。

例如GLOBAL.HP = 100。

也可以向类内添加函数,方法为GLOBAL.funcName = function(...){...}

定义数组的方法为 GLOBAL.ARRAY1 = [];

5.在cocos2d中可以正常使用js的语法,进行一些循环、条件分支等的编写。

6.如果要使用日志输出,可以使用js的console.log或者cocos2d自带的cc.log输出。

7.Cocos2d的常用函数与接收用户输入:

继承自CCLayer的类可以接收用户输入,又有CCNode的所有特性,一般游戏都是以此为运行的主类,下面介绍一下其中常用的一些函数:

ctor与init都已经在上面介绍,这里不再赘述。

一般游戏都需要以较高的帧率(例如60)运行,在每一帧到来时,如果类内在初始化时使用方法this.scheduleUpdate();,则在程序运行时每秒会调用帧率那么多次的update函数。

因此只要重写update函数,即可实现游戏的刷帧。

8.CCLayer想要接收用户输入,是通过在类内使用cc.eventManager的addListener方法实现的,addListener函数要求传入两个参数,第一个是监听的主体逻辑,要在其中定义监听的事件函数,使用{}来包围,第二个参数为目标,一般填写this,代表监听当前层的事件。

常用的事件包括按键按下、按键释放、鼠标按下、鼠标移动、鼠标滚动、触摸输入等,如果要做普通的网页游戏,则通过鼠标和键盘动作即可;如果是做手机应用,则需要检测触摸输入。

下面以按键输入为例,介绍按键输入的写法:

一般是在init函数中声明事件,首先要判断是否具有键盘,使用函数:

cc.sys.capabilities.hasOwnProperty(‘keyboard’),返回true则代表可用,可用才定义相关的事件函数:

if(cc.sys.capabilities.hasOwnProperty('keyboard')){
cc.eventManager.addListener({
event: cc.EventListener.KEYBOARD,
onKeyPressed:function(key,event){
if(key == 87){ // W
// 这里进行按下的事件处理
}
},
onKeyReleased:function(key,event){
if(key == 87){ // W
// 这里进行松开的事件处理
}
}
},this);
}

Key传入的是按键的ASCII码,可以通过打印日志的方式实验。

需要特别注意的是,这个方法虽然是在类内声明的,但是调用时并不是类内,因此不能使用this获取当前类内的成员。注意到function还传入了event参数,这个参数可以用来获取自己的target,这个target就是当时addListener的第二个参数。因此我们使event.getCurrentTarget()来得到当时的target,也就是this,所有对类内的操作都要在这个基础上进行。

鼠标事件:

if('mouse' in cc.sys.capabilities) {
cc.eventManager.addListener({
event: cc.EventListener.MOUSE,
onMouseMove: function (event) {
// event.getLocationX() 获取x
// event.getLocationY() 获取y
},
onMouseScroll: function(event){
// event.getScrollX() 代表横向滚动
// event.getScrollY() 代表纵向滚动
}
}, this);
}