从cocos2d-html5中提取出来的,用做前端开发的框架——cc.js

从cocos2d-html5中提取出来的,用做前端开发的框架——cc.js

/****************************************************************************
 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

    }
}

cc.js源码

不好意思又一次用别人的东西………

cocos2d-html5框架无疑是一款优秀、出色的跨平台的开源游戏框架,历经众多产品的考验,核心类cc.Node采用多叉树的结构、cc.Class类可以方便自由的扩充新的对象,一切都是如此美好,使用了一年多时间的cocos2d框架,也做过一些jsb的移植开发,深刻的感受到了coco2d做游戏开发的便利和强大,赞一个!

同时我也在想,前端开发是不是也能方便的用到cocos2d呢?特别是现在的移动web开发,页面的交互逻辑特别多,跟游戏如此相似,所以小狼努力思考、客观实践,终于把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:$("div"),
    init:function(){

    },
    //点击交互事件
    initMenu:function(){

    },
    //开始
    onEnter:function(){
        this._super()
        $("#id").replaceWith(this.context)
    },
    //结束
    onExit:function(){
        this._super()
        this.context.remove()
    }

})
//每个scene对应一个页面
var Scene1=cc.Scene.extend({
    onEnter:function(){
        this._super()
        var layer=new layer1()
        layer.init()
        this.addChild(layer)

    }
})

从cocos2d-html5中提取出来的,用做前端开发的框架——cc.js

时间: 2024-10-28 21:03:25

从cocos2d-html5中提取出来的,用做前端开发的框架——cc.js的相关文章

html5中视频播放问题总结

html5中视频播放问题总结 文章 1.问题一 框架? 加个标签就OK! <video id="video1" src="/video1.mp4" controls="controls"></video> 2.问题2 控制? 简单! <video id="video1" src="/video1.mp4" autoplay></video> 其他控制方式 :见

4.html5中超链接和路径

html中超链接都是通过<a>标签实现的,html5也不例外,这里就来探讨一下<a>标签. <a>元素属于文本元素,有一些私有属性或者叫局部属性.那么,相对应的还有通用属性或叫做全局属性,全局属性是的问题我们以后再来探讨. 对于其私有属性有哪些,下面用一个表格进行了整理: 属性名称 说明 href 指定<a>元素所指资源的 URL hreflang 指向的链接资源所使用的语言 media 说明所链接资源用于哪种设备 rel 说明文档与所链接资源的关系类型 t

HTML5中引入的关键特性

新特性 描述 accesskey 定义通过键盘访问元素的快捷键 contenteditable 该特性设置为true时,浏览器应该允许用户编辑元素的内容.不指定变化后的内容如何保存 contextmenu 定义menu元素的DOM id作为定义钙元素特性的上下文菜单 data-X 制定可以包含在标签中的用户定义的元数据,而不必担心这些元数据与当前的特性或者未来的特性冲突.使用这种类型的特性可以避免创建自定义特性或者过载class特性的常见方法 draggable 定义特性时,允许元素与其内容可以

HTML5中判断横屏竖屏

HTML5中判断横屏竖屏 在移动端中我们经常碰到横屏竖屏的问题,那么我们应该如何去判断或者针对横屏.竖屏来写不同的代码呢. 这里有两种方法: 一:CSS判断横屏竖屏 写在同一个CSS中 1 2 3 4 5 6 @media screen and (orientation: portrait) {   /*竖屏 css*/ } @media screen and (orientation: landscape) {   /*横屏 css*/ } 分开写在2个CSS中 竖屏 1 <link rel=

从Wireshark监听的数据中提取需要的数据

最近,需要将wireshark监听的数据进行提取,分两步:首先,应该得出wireshark的数据包吧,在图形化界面中可以非常直观的将监听数据进行存储,但是这样需要手动操作非常麻烦,而且容易出错(随着处理数据包的数量增加,图形化可能吃不消,以前就遇见过),在linux下,采用了tshark命令,tshark就是wireshark图形界面命令行化,命令如下: sudo tshark -f "udp port 1243" -i eth0 (-w)> /tmp/capture.cap 对

HTML5中的canvas基本概念及绘图

* Canvas(画布) * 基本内容 * 简单来说,HTML5提供的新元素<canvas> * Canvas在HTML页面提供画布的功能 * 在画布中绘制各种图形 * Canvas绘制的图形与HTML页面无关 * 无法通过DOM获取绘制的图形 * 无法为绘制的图形绑定DOM事件 * 只能使用Canvas提供的API * Canvas用途 * 在HTML页面中绘制图表(例如柱状图.饼状图等) * 网页游戏 - Flash技术 * 使用HTML5中的Canvas * 如何使用Canvas * 在

HTML5中的SVG

* SVG * 基本内容 * SVG并不属于HTML5专有内容 * HTML5提供有关SVG原生的内容 * 在HTML5出现之前,就有SVG内容 * SVG,简单来说就是矢量图 * SVG文件的扩展名为".svg" * SVG使用的是XML语法 * 概念 * SVG是一种使用XML技术描述二维图形的语言 * SVG的特点 * SVG绘制图形可以被搜索引擎抓取 * SVG在图片质量不下降的情况下,被放大 * SVG与Canvas的区别 * SVG * 不依赖分辨率 * 支持事件绑定 *

html5 中的 css样式单 的 两种调用方式的区别

在 html5 中 使用 css 样式单的方式 有4种: 1.链接外部样式文件:将样式文件 彻底与 html 文档分离,样式文件需要额外引入,这种情况下 一批样式 可以控制多份文档.对于好多文件都共有的样式单,推荐使用这种方式. 2.导入外部样式文件:此方式与第一种方式类似,但是需要用@import来引入外部样式单.由于某些浏览器(如 internet explorer)会在导入外部样式单时导致闪屏,所以不推荐用这种方式,而是尽量考虑使用第一种方式. 3.使用内部样式定义:这种方式是通过在htm

HTML5中的Range对象的研究

一:Range对象的概念 Range对象代表页面上的一段连续区域,通过Range对象,可以获取或修改页面上的任何区域,可以通过如下创建一个空的Range对象,如下: var  range = document.createRange(); 在html5中,每一个浏览器窗口及每一个窗口中都有一个selection对象,代表用户鼠标在页面中所选取的区域,(注意:经过测试IE9以下的浏览器不支持Selection对象), 可以通过如下语句创建selection对象: var  selection =