从cocos2d-html5中提取出来的,用做前端开发的框架——cc.js
从cocos2d-html5中提取出来的,用做前端开发的框架——cc.js
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
/**************************************************************************** Copyright (c) 2010-2012 cocos2d-x.org Copyright (c) 2008-2010 Ricardo Quesada Copyright (c) 2011 Zynga Inc. http://www.cocos2d-x.org Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ****************************************************************************/ /* Managed JavaScript Inheritance * Based on John Resig's Simple JavaScript Inheritance http://ejohn.org/blog/simple-javascript-inheritance/ * MIT Licensed. */ /** * @namespace */ var cc = cc || {}; // function ClassManager(){ //tells own name return arguments.callee.name || (arguments.callee.toString()).match(/^function ([^(]+)/)[1]; } ClassManager.id=(0|(Math.random()*998)); ClassManager.instanceId=(0|(Math.random()*998)); ClassManager.compileSuper=function(func, name, id){ //make the func to a string var str = func.toString(); //find parameters var pstart = str.indexOf('('); var pend = str.indexOf(')'); var params = str.substring(pstart+1, pend); params = params.trim(); //find function body var bstart = str.indexOf('{'); var bend = str.lastIndexOf('}'); var str = str.substring(bstart+1, bend); //now we have the content of the function, replace this._super //find this._super while(str.indexOf('this._super')!= -1) { var sp = str.indexOf('this._super'); //find the first '(' from this._super) var bp = str.indexOf('(', sp); //find if we are passing params to super var bbp = str.indexOf(')', bp); var superParams = str.substring(bp+1, bbp); superParams = superParams.trim(); var coma = superParams? ',':''; //find name of ClassManager var Cstr = arguments.callee.ClassManager(); //replace this._super str = str.substring(0, sp)+ Cstr+'['+id+'].'+name+'.call(this'+coma+str.substring(bp+1); } return Function(params, str); }; ClassManager.compileSuper.ClassManager = ClassManager; ClassManager.getNewID=function(){ return this.id++; }; ClassManager.getNewInstanceId=function(){ return this.instanceId++; }; (function () { var initializing = false, fnTest = /\b_super\b/; var releaseMode = (document['ccConfig'] && document['ccConfig']['CLASS_RELEASE_MODE']) ? document['ccConfig']['CLASS_RELEASE_MODE'] : null; if(releaseMode) { console.log("release Mode"); } /** * The base Class implementation (does nothing) * @class */ cc.Class = function () { }; /** * Create a new Class that inherits from this Class * @param {object} prop * @return {function} */ cc.Class.extend = function (prop) { var _super = this.prototype; // Instantiate a base Class (but only create the instance, // don't run the init constructor) var prototype = Object.create(_super); var classId = ClassManager.getNewID(); ClassManager[classId] = _super; // Copy the properties over onto the new prototype. We make function // properties non-eumerable as this makes typeof === 'function' check // unneccessary in the for...in loop used 1) for generating Class() // 2) for cc.clone and perhaps more. It is also required to make // these function properties cacheable in Carakan. var desc = { writable: true, enumerable: false, configurable: true }; for (var name in prop) { if(releaseMode && typeof prop[name] == "function" && typeof _super[name] == "function" && fnTest.test(prop[name])) { desc.value = ClassManager.compileSuper(prop[name], name, classId); Object.defineProperty(prototype, name, desc); } else if(typeof prop[name] == "function" && typeof _super[name] == "function" && fnTest.test(prop[name])){ desc.value = (function (name, fn) { return function () { var tmp = this._super; // Add a new ._super() method that is the same method // but on the super-Class this._super = _super[name]; // The method only need to be bound temporarily, so we // remove it when we're done executing var ret = fn.apply(this, arguments); this._super = tmp; return ret; }; })(name, prop[name]); Object.defineProperty(prototype, name, desc); } else if(typeof prop[name] == "function") { desc.value = prop[name]; Object.defineProperty(prototype, name, desc); } else{ prototype[name] = prop[name]; } } prototype.__instanceId = null; // The dummy Class constructor function Class() { this.__instanceId = ClassManager.getNewInstanceId(); // All construction is actually done in the init method if (this.ctor) this.ctor.apply(this, arguments); } Class.id = classId; // desc = { writable: true, enumerable: false, configurable: true, // value: XXX }; Again, we make this non-enumerable. desc.value = classId; Object.defineProperty(prototype, '__pid', desc); // Populate our constructed prototype object Class.prototype = prototype; // Enforce the constructor to be what we expect desc.value = Class; Object.defineProperty(Class.prototype, 'constructor', desc); // And make this Class extendable Class.extend = arguments.callee; //add implementation method Class.implement = function (prop) { for (var name in prop) { prototype[name] = prop[name]; } }; return Class; }; Function.prototype.bind = Function.prototype.bind || function (bind) { var self = this; return function () { var args = Array.prototype.slice.call(arguments); return self.apply(bind || null, args); }; }; })(); //my only cc.ArrayRemoveObject = function (arr, delObj) { for (var i = 0, l = arr.length; i < l; i++) { if (arr[i] == delObj) { arr.splice(i, 1); break; } } }; cc.log = function (message) { if (!cc.IS_SHOW_DEBUG_ON_PAGE) { console.log.apply(console, arguments); } else { cc._logToWebPage(message); } }; cc.NODE_TAG_INVALID = -1; cc.s_globalOrderOfArrival = 1; cc.Node = cc.Class.extend(/** @lends cc.Node# */{ _zOrder:0, // children (lazy allocs), _children:null, _parent:null, _tag:cc.NODE_TAG_INVALID, _orderOfArrival:0, _initializedNode:false, _initNode:function () { this._children = []; this._initializedNode = true; }, ctor:function () { if (this._initializedNode === false) this._initNode(); return true; }, init:function () { if (this._initializedNode === false) this._initNode(); return true; }, _child:function(func){ var arr=this._children if(arr.length){ for (i = 0; i < arr.length; i++) { if(false==arr[i]._child(func)){ return false } } } if(func.apply(this)==false){ return false } return true }, _arrayMakeObjectsPerformSelector:function (array, callbackType) { if (!array || array.length === 0) return; var i, len = array.length,node; var nodeCallbackType = cc.Node.StateCallbackType; switch (callbackType) { case nodeCallbackType.onEnter: for (i = 0; i < len; i++) { node = array[i]; if (node) node.onEnter(); } break; case nodeCallbackType.onExit: for (i = 0; i < len; i++) { node = array[i]; if (node) node.onExit(); } break; case nodeCallbackType.cleanup: for (i = 0; i < len; i++) { node = array[i]; if (node) node.cleanup(); } break; case nodeCallbackType.updateTransform: for (i = 0; i < len; i++) { node = array[i]; if (node) node.updateTransform(); } break; case nodeCallbackType.sortAllChildren: for (i = 0; i < len; i++) { node = array[i]; if (node) node.sortAllChildren(); } break; default : throw "Unknown callback function"; break; } }, getZOrder:function () { return this._zOrder; }, _setZOrder:function (z) { this._zOrder = z; }, setZOrder:function (z) { this._setZOrder(z); if (this._parent) this._parent.reorderChild(this, z); }, reorderChild:function (child, zOrder) { if(!child) throw "cc.Node.reorderChild(): child must be non-null"; child.setOrderOfArrival(cc.s_globalOrderOfArrival++); child._setZOrder(zOrder); this._reorderChildDirty = true; }, getChildrenCount:function () { return this._children.length; }, getChildren:function () { return this._children; }, isRunning:function () { return this._running; }, getParent:function () { return this._parent; }, setParent:function (Var) { this._parent = Var; }, getTag:function () { return this._tag; }, setTag:function (Var) { this._tag = Var; }, getChildByTag:function (aTag) { var __children = this._children; if (__children != null) { for (var i = 0; i < __children.length; i++) { var node = __children[i]; if (node && node._tag == aTag) return node; } } //throw "not found"; return null; }, addChild:function (child, zOrder, tag) { if(!child) throw "cc.Node.addChild(): child must be non-null"; if (child === this) { cc.log('cc.Node.addChild(): An Node can\'t be added as a child of itself.'); return; } if (child._parent !== null) { cc.log("cc.Node.addChild(): child already added. It can't be added again"); return; } var tmpzOrder = (zOrder != null) ? zOrder : child._zOrder; child._tag = (tag != null) ? tag : child._tag; this._insertChild(child, tmpzOrder); child._parent = this; if (this._running) { child.onEnter(); } }, removeFromParent:function (cleanup) { if (this._parent) { if (cleanup == null) cleanup = true; this._parent.removeChild(this, cleanup); } }, removeChild:function (child, cleanup) { // explicit nil handling if (this._children.length === 0) return; if (cleanup == null) cleanup = true; if (this._children.indexOf(child) > -1) this._detachChild(child, cleanup); }, removeChildByTag:function (tag, cleanup) { if(tag === cc.NODE_TAG_INVALID) cc.log("cc.Node.removeChildByTag(): argument tag is an invalid tag"); var child = this.getChildByTag(tag); if (child == null) cc.log("cocos2d: removeChildByTag(tag = " + tag + "): child not found!"); else this.removeChild(child, cleanup); }, removeAllChildren:function (cleanup) { // not using detachChild improves speed here var __children = this._children; if (__children != null) { if (cleanup == null) cleanup = true; for (var i = 0; i < __children.length; i++) { var node = __children[i]; if (node) { // IMPORTANT: // -1st do onExit // -2nd cleanup if (this._running) { node.onExit(); } if (cleanup) node.cleanup(); // set parent nil at the end node.setParent(null); } } this._children.length = 0; } }, _detachChild:function (child, doCleanup) { // IMPORTANT: // -1st do onExit // -2nd cleanup if (this._running) { child.onExit(); } // If you don't do cleanup, the child's actions will not get removed and the // its scheduledSelectors_ dict will not get released! if (doCleanup) child.cleanup(); // set parent nil at the end child.setParent(null); cc.ArrayRemoveObject(this._children, child); }, _insertChild:function (child, z) { this._children.push(child); child._setZOrder(z); this._reorderChildDirty = true; }, setOrderOfArrival:function (Var) { this._orderOfArrival = Var; }, sortAllChildren:function () { if (this._reorderChildDirty) { var _children = this._children; var i, j, length = _children.length,tempChild; // insertion sort for (i = 0; i < length; i++) { var tempItem = _children[i]; j = i - 1; tempChild = _children[j]; //continue moving element downwards while zOrder is smaller or when zOrder is the same but mutatedIndex is smaller while (j >= 0 && ( tempItem._zOrder < tempChild._zOrder || ( tempItem._zOrder == tempChild._zOrder && tempItem._orderOfArrival < tempChild._orderOfArrival ))) { _children[j + 1] = tempChild; j = j - 1; tempChild = _children[j]; } _children[j + 1] = tempItem; } //don't need to check children recursively, that's done in visit of each child this._reorderChildDirty = false; } }, onEnter:function () { this._running = true;//should be running before resumeSchedule this._arrayMakeObjectsPerformSelector(this._children, cc.Node.StateCallbackType.onEnter); }, onExit:function () { this._running = false; this._arrayMakeObjectsPerformSelector(this._children, cc.Node.StateCallbackType.onExit); }, cleanup:function () { // timers this._arrayMakeObjectsPerformSelector(this._children, cc.Node.StateCallbackType.cleanup); }, updateTransform:function () { // Recursively iterate over children this._arrayMakeObjectsPerformSelector(this._children, cc.Node.StateCallbackType.updateTransform); } }); cc.Node.create = function () { return new cc.Node(); }; cc.Node.StateCallbackType = {onEnter:1, onExit:2, cleanup:3, updateTransform:5, sortAllChildren:7}; cc.Sprite=cc.Node.extend({ }) cc.Sprite.create = function () { return new cc.Sprite(); }; cc.Layer=cc.Node.extend({ }) cc.Layer.create = function () { return new cc.Layer(); }; cc.Scene=cc.Node.extend({ }) cc.Scene.create = function () { return new cc.Scene(); }; cc.Middle=function(){ var next=function(func1,func2){ return function(){ var arg=Array.prototype.slice.call(arguments) var arr=[].concat(arg) arg.push(function(){ func2.apply(this,arr) }) return func1.apply(this,arg); } } var arg=Array.prototype.slice.call(arguments) var func=arg[arg.length-1] for(var i=arg.length-2;i>=0;i--){ func=next(arg[i],func) } return func } cc.Director={ _runningScene:null, replaceScene:function(scene){ if(this._runningScene){ this._runningScene.onExit() } scene.onEnter() scene._arrayMakeObjectsPerformSelector(scene._children, cc.Node.StateCallbackType.sortAllChildren); this._runningScene=scene } }
不好意思又一次用别人的东西………
cocos2d-html5框架无疑是一款优秀、出色的跨平台的开源游戏框架,历经众多产品的考验,核心类cc.Node采用多叉树的结构、cc.Class类可以方便自由的扩充新的对象,一切都是如此美好,使用了一年多时间的cocos2d框架,也做过一些jsb的移植开发,深刻的感受到了coco2d做游戏开发的便利和强大,赞一个!
同时我也在想,前端开发是不是也能方便的用到cocos2d呢?特别是现在的移动web开发,页面的交互逻辑特别多,跟游戏如此相似,所以小wo努力思考、客观实践,终于把coco2d中的核心cc.Class和cc.Node提取出来了(去掉与游戏相关的属性和方法),新添加了cc.Middle(http://www.cnblogs.com/caoke/p/middle.html),也重写了下cc.Director的replaceScene.
工具准备好了,剩下就等着下周1的项目开始了
var layer1=cc.Layer.extend({
context:$("#id"),
name:true,
init:function(){
},
initAnimate:function(){
var sprite=new cc.Sprite
sprite.name=22
this.addChild(sprite,2)
var sprite=new cc.Sprite
sprite.name=32
this.addChild(sprite,1)
var sprite=new cc.Sprite
sprite.name=42
this.addChild(sprite,1)
var sprite=new cc.Sprite
this.addChild(sprite,1)
},
//点击交互事件
initMenu:function(){
},
})
var Scene1=cc.Scene.extend({
init:function(){
this._super()
var layer=new layer1()
layer.init()
this.addChild(layer)
}
})
var scene=new Scene1()
scene.init()
//显示页面
scene.onEnter()
最终效果: http://weixin.koo.cn/test.html