遇到一个新的引擎，一定需要掌握以下内容：
创建基础对象；
获得基础对象；
设置基础对象；
点击坐标区域的判断；
事件传递和派发接收；
创建数据结构；
创建时间对象；
服务器请求和回调的数据解析；
打印调试语句；
动作序列调用；
存储数据到本地；
下面总结一下cocos+js的内容。
1.普通文本对象
在cocosctrator中先拖拽创建一个普通文本对象strText，在其父layer节点对应的js文件中，进行如下的声明：
properties: {
strText:{
default: null,
type:cc.Node,
},
}
这样，在这个js文件内，设置其内容的代码如下：
this.strText.getComponent(cc.Label).string = str;
2.普通静态图片对象
在cocosctrator中先拖拽创建一个普通图片对象fangZuoBi_bg，没有必要在properties进行声明（也可以声明，那么调用就用this.name），不声明的话，在js文件内的调用方式如下：
this.node.getChildByName("fangZuoBi_bg");
3.普通按钮对象
在cocosctrator中先拖拽创建一个普通按钮对象lahei_btn，在这个引擎中按钮设置方式有多种类型，有多个图片去表示按钮点击前后效果的，也有单张图表现的，具体方式请看cocoscreator的api文档。这里找个简单的例子，在sprite属性设置好单张图片之后，为button属性设置点击事件的效果onClickCancle，在js文件内填写该函数。
4.普通滑动列表
在cocosctrator中先拖拽创建一个普通滑动列表对象对象m_gameListScrollView，设置好方向属性。首先在代码中声明：
properties: {
m_gameListScrollView:{
default:null,
type:cc.ScrollView,
},
},
然后去设置滑动列表的内容和滑动列表的宽高：
addGameList:function()
{
var gameList = require('HallControl').getInstance().getGameList();
var nListSize = gameList.length;
var columnCount = 2;
var itemW = 280;
var nButtonX = -250;
var nButtonY = -130;
var offsetX = 300 * 2 / columnCount;
var offsetY = 260 * (columnCount - 1);
var totalWidth = 0;
var scrollViewSize = this.m_gameListScrollView.node.getContentSize();
for(var i=1;i<=nListSize;i++)
{
var buttonNode = new cc.Node('buttonNode');
var ccBtutton = buttonNode.addComponent(cc.CCButton);
var gameInfo = gameList[i-1];
ccBtutton.setCCButton('hallRes/gameicon/'+gameInfo.m_sEn,null,this.onClickButton.bind(this));
ccBtutton.setObjectData(gameInfo);
this.m_gameListScrollView.content.addChild(buttonNode);
if(columnCount == 1)
{
offsetY = scrollViewSize.height / 2 - itemW/ 2;
};
buttonNode.x=nButtonX+ (Math.floor((i - 1) / columnCount) * offsetX - 20);
buttonNode.y=nButtonY+(offsetY - (i + 1) % columnCount * offsetY);
totalWidth = buttonNode.getPositionX()*2 +itemW
}
this.m_gameListScrollView.content.width = totalWidth;
},
5.点击坐标区域
首先在onload中添加监听的事件，cocoscreator中集成了不少的Node.EventType，可以去查询api了解更多内容。
在事件的回调中，获得这个点击到的坐标，然后在目标区域上通过convertToNodeSpace函数转化坐标系，最后通过rectContainsPoint判断是否存在这个区域内。
这里范例代码使用了fangZuoBi_bg这块图片上的内容，实际上如果是活的整个的layer的坐标，直接使用this.node.convertToNodeSpace即可。
onLoad:function(){
this.node.on(cc.Node.EventType.TOUCH_START, this.onTouch, this);
},
onTouch:function(event){
var poistion = event.touch.getLocation();
var locationInNode = this.node.getChildByName("fangZuoBi_bg").convertToNodeSpace(poistion);
var s = this.node.getChildByName("fangZuoBi_bg").getContentSize();
var rect = cc.rect(0, 0, s.width, s.height);
if (cc.rectContainsPoint(rect, locationInNode)) {
}
else{
this.node.active = false;
}
},
6.事件派发
cocoscreator有两种事件派发的方法，一种是emit另外一种是dispatchEvent，后者可以做事件传递，尽量还是使用后者。
事件使用on来监听，off关闭监听。
onLoad: function () {
this.node.on('mousedown', function ( event ) {
console.log('Hello!');
});
_sayHello: function () {
console.log('Hello World');
},
onEnable: function () {
this.node.on('mousedown', this._sayHello, this);
},
start: function () {
this.node.emit('mousedown', {
msg: 'Hello, this is Cocos Creator',
});
},
this.node.dispatchEvent( new cc.Event.EventCustom('mousedown', true) );
7.表的结构
使用new Array()创建一个数组，然后调用push去插入一个数据
var stEat = new Array();
this.m_stSceneData = {}
this.m_stSceneData.cbCurrentCard = 0
stEat.push(this.m_stSceneData.cbCurrentCard)
pEatCase.push(stEat);
也可以创建一个{}然后用字母表示来给这个表添加元素。
8.时间调用
首先使用 cc.director.getScheduler() 来获取系统定时器，然后通过unscheduleCallbackForTarget和scheduleCallbackForTarget分别对计时器进行取消和定义
startTimer:function(overTimeFunc, nDowntime){
var scheduler = cc.director.getScheduler();
scheduler.unscheduleCallbackForTarget(this, this.m_timerUpdate)
var timeLabel = this.node.getChildByName("gameBg").getChildByName("diceNode").getChildByName("timeLabel");
timeLabel.setLocalZOrder(10);
timeLabel.getComponent(cc.Label).string = "";
timeLabel.active = true;
var strLeftTime = "";
var update = function(){
if(nDowntime < 0){
timeLabel.getComponent(cc.Label).string = "";
if (overTimeFunc){
overTimeFunc();
}
scheduler.unscheduleCallbackForTarget(this, update)
return;
}
strLeftTime = strLeftTime = nDowntime;
if(nDowntime < 10){
strLeftTime = "0" + strLeftTime;
}
timeLabel.getComponent(cc.Label).string = strLeftTime;
nDowntime = nDowntime - 1;
};
this.m_timerUpdate = update;
scheduler.scheduleCallbackForTarget(this, update, 1, cc.macro.REPEAT_FOREVER, 0, false);
},
9.服务器请求和回调数据的解析
一般短连接的使用方法：使用 new XMLHttpRequest() 来创建一个连接对象，也可以通过 cc.loader.getXMLHttpRequest() 来创建，两者效果一致。
有关下面代码中几个接口的描述请看https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest 这个MSDN的文档。
onreadystatechange当readyState属性改变时会调用它。
readyState请求的5种状态4是指DONE (请求完成) 整个请求过程已经完毕。
status该请求的响应状态码 (例如, 状态码200 表示一个成功的请求).只读.
open初始化一个请求。
setRequestHeader给指定的HTTP请求头赋值.在这之前,你必须确认已经调用 open() 方法打开了一个url.
timeout是一个无符号长整型数，代表着一个请求在被自动终止前所消耗的毫秒数
send发送请求.
我检查了代码，只有微信支付和获得签名这两处代码调用了GET请求，其他都使用封装过后的POST。post和get的区别可以参考这个文章https://www.cnblogs.com/logsharing/p/8448446.html。
var WebRequest = cc.Class({
_callBack: null,
getData: function (url, data, callback, post) {
this._callBack = callback;
var self = this;
var xhr = cc.loader.getXMLHttpRequest();
// Simple events
['loadstart', 'abort', 'error', 'load', 'loadend', 'timeout'].forEach(function (eventname) {
xhr["on" + eventname] = function () {
if (eventname == 'abort' || eventname == 'error' || eventname == 'timeout') {
if (self._callBack != null) {
self._callBack(false, "");
}
}
};
});
// Special event
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && (xhr.status >= 200 && xhr.status < 300)) {
if (self._callBack != null) {
// var XmlToJson = require('XmlToJson');
// var xmlToJson = new XmlToJson();
// var jsonData = JSON.stringify(xmlToJson.parse(xhr.responseText));
self._callBack(true, xhr.response);
}
}
};
xhr.timeout = 5000;//5 seconds for timeout
if (post == null || post == false) {
xhr.open("GET", url + data, true);
if (cc.sys.isNative) {
xhr.setRequestHeader("Accept-Encoding", "gzip,deflate");
}
xhr.send();
}
else {
xhr.open("POST", url);
//set Content-type "text/plain" to post ArrayBuffer or ArrayBufferView
// xhr.setRequestHeader("Content-Type","text/plain");
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
// Uint8Array is an ArrayBufferView
//xhr.send(new Uint8Array([1,2,3,4,5]));
xhr.send(data);
}
},
});
有关数据解析：下面是我们的xml转json的办法和具体代码解析方式。
var onResponse = function(success, data){
if(success){
var XmlToJson = require('XmlToJson');
var xmlToJson = new XmlToJson();
var jsonData = JSON.stringify(xmlToJson.parse(data));
var jsonObject = JSON.parse(jsonData);
var root = jsonObject;
var property = {};
property.RetCode = root.retcode
vBeReportList.push(property);
}
else{
console.log("HallWebRequest.requestCheatReport load xml data fail！");
return;
}
}
var XmlToJson=cc.Class({
// Changes XML to JSON
parseXmlToJson:function(xmlStr) {
// Create the return object
var obj = {};
if (xml.nodeType == 1) { // element
// do attributes
if (xml.attributes.length > 0) {
obj["@attributes"] = {};
for (var j = 0; j < xml.attributes.length; j++) {
var attribute = xml.attributes.item(j);
obj["@attributes"][attribute.nodeName] = attribute.nodeValue;
}
}
} else if (xml.nodeType == 3) { // text
obj = xml.nodeValue;
}
// do children
if (xml.hasChildNodes()) {
for(var i = 0; i < xml.childNodes.length; i++) {
var item = xml.childNodes.item(i);
var nodeName = item.nodeName;
if (typeof(obj[nodeName]) == "undefined") {
obj[nodeName] = xmlToJson(item);
} else {
if (typeof(obj[nodeName].length) == "undefined") {
var old = obj[nodeName];
obj[nodeName] = [];
obj[nodeName].push(old);
}
obj[nodeName].push(xmlToJson(item));
}
}
}
return obj;
},
});
XmlToJson.prototype.setXml = function(xml) {
if(xml && typeof xml == "string") {
this.xml = document.createElement("div");
this.xml.innerHTML = xml;
this.xml = this.xml.getElementsByTagName("*")[0];
}
else if(typeof xml == "object"){
this.xml = xml;
}
};
XmlToJson.prototype.getXml = function() {
return this.xml;
};
XmlToJson.prototype.parse = function(xml) {
this.setXml(xml);
return this.convert(this.xml);
};
XmlToJson.prototype.convert = function(xml) {
if (xml.nodeType != 1) {
return null;
}
var obj = {};
obj.xtype = xml.nodeName.toLowerCase();
var nodeValue = (xml.textContent || "").replace(/(\r|\n)/g, "").replace(/^\s+|\s+$/g, "");
if(nodeValue && xml.childNodes.length == 1) {
obj.text = nodeValue;
}
if (xml.attributes.length > 0) {
for (var j = 0; j < xml.attributes.length; j++) {
var attribute = xml.attributes.item(j);
obj[attribute.nodeName] = attribute.nodeValue;
}
}
if (xml.childNodes.length > 0) {
var items = [];
for(var i = 0; i < xml.childNodes.length; i++) {
var node = xml.childNodes.item(i);
var item = this.convert(node);
if(item) {
items.push(item);
}
}
if(items.length > 0) {
obj.items = items;
}
}
return obj;
};
10.打印语句
console.log
cc.log
都可以
11.动作序列
看下面代码感受下，其它方法去查看api吧
onSendChat:function(){
var node = new cc.Node();
var callFunc1 = cc.callFunc(()=>{
timerSprite.spriteFrame = this.TimerAssets[2];
}, this)
var delay1 = cc.delayTime(1);
var callFunc2 = cc.callFunc(()=>{
timerSprite.spriteFrame = this.TimerAssets[1];
}, this)
var delay2 = cc.delayTime(1);
var callFunc3 = cc.callFunc(()=>{
timerSprite.spriteFrame = this.TimerAssets[0];
}, this)
var delay3 = cc.delayTime(1);
var callFunc4 = cc.callFunc(()=>{
node.removeFromParent()
this.quickChatBtn.node.active = true;
}, this)
var sequence = cc.sequence(callFunc1, delay1, callFunc2, delay2, callFunc3, delay3, callFunc4);
node.runAction(sequence);
},
12.本地数据存储
localStorage可以保存相关数据
var imei = cc.sys.localStorage.getItem("imei");
cc.sys.localStorage.setItem("imei", imei);
网友评论