HTML5遊戲框架cnGameJS開發實錄-核心函式模組篇的程式碼實例

返回目錄

1.cnGameJs框架的程式碼組織

　　核心函數模組，主要的作用是為之後的框架開發和用戶對遊戲的開發提供方便，整個框架在一個閉包之中，避免對全局作用域的污染。之後每個不同的模組分別在自己的閉包內，使不同模組的分割更清晰。因此我們框架的模組劃分會是這樣：

(function(win,undefined){//最大的闭包

var fun1=function(){//各模块公用的方法
}

//这里放各个小模块，它们有各自的闭包

}(window,undefined)

　　那麼我們要如何再劃分其他小模組呢？為了方便各個小模組有各自的命名空間，並且在各自的閉包中，我們新增一個register方法，該方法可以在不同命名空間下擴展自己的模組 ，我們需要傳入的首先是命名空間的名稱，該方法為我們生成該命名空間對象，之後我們執行自己的方法，為命名空間對象執行相應的擴展操作：

/**
         *生成命名空间,并执行相应操作
        **/
        register:function(nameSpace,func){
            var nsArr=nameSpace.split(".");
            var parent=win;
            for(var i=0,len=nsArr.length;i<len;i++){
                (typeof parent[nsArr[i]]==&#39;undefined&#39;)&&(parent[nsArr[i]]={});
                parent=parent[nsArr[i]];
            }
            if(func){
                func.call(parent,this);    
            }
            return parent;
        }

如上，首先可以把傳入的命名空間字串分割，然後產生對象，之後執行使用者傳入的函數進行擴充操作，如下：

cnGame.register("cnGame.core",function(){this.func=function(){}});

　　這樣就可以產生core模組，並且為該模組添加func方法，那麼我們框架的程式碼組織看起來將是這樣：

(function(win,undefined){

var cnGame={
    register:function(nameSpace,handler){

    }
}

/*core模块*/
cnGame.register("core",function(){
  //添加该模块内容
})

/*input模块*/
cnGame.register("input",function(){
  //添加该模块内容
})

win["cnGame"]=cnGame;


})(window,undefined);

　　
2.框架的初始化

##　　框架初始化的時候，需要保存的對象分別有：

canvas對象，context對象，canvas的位置，尺寸等，我們可以先看看初始化的函數：

/**
         *初始化
        **/
        init:function(id,options){
            options=options||{};
            this.canvas = this.core.$(id||"canvas");    
            this.context = this.canvas.getContext('2d');
            this.width = options.width||800;
            this.height = options.height||600;
            this.title = this.core.$$('title')[0];
            canvasPos=getCanvasPos(this.canvas);
            this.x=canvasPos[0]||0;
            this.y=canvasPos[1]||0;
            this.canvas.width=this.width;
            this.canvas.height=this.height;
            this.canvas.style.left=this.x +"px";
            this.canvas.style.top=this.y +"px";
            
        },

　　非常簡單，就是保存一些初始化值，方便後續使用。另外可以注意到我們呼叫了getCanvasPos方法來取得canvas的位置參數，該參數會循環取得物件的off

setParent，並疊加offsetLeft和offsetTop，從而得到canvas在頁面的位置。這個函數原始碼如下：

/**
    *获取canvas在页面的位置
    **/      
    var getCanvasPos=function(canvas){
        var left = 0;
        var top = 0;
        while (canvas.offsetParent) {
            left += canvas.offsetLeft;
            top += canvas.offsetTop;
            canvas = canvas.offsetParent;

        }
        return [left, top];

    }

3.工具函數模組

#　　之後我們就可以用上面的register方法加入第一個模組：core模組。這個模組也很簡單，主要功能就是新增工具函數，方便後續的框架開發和使用者的遊戲開發。這裡包含了一些常用的工具函數，例如透過id取得元素，原型

繼承，物件複製，事件綁定等等。注意如果涉及不同瀏覽器的兼容問題，我們可以一開始就根據瀏覽器設定function，而不是每次都判斷瀏覽器類型再進行相應操作，效率會更加高。拿事件綁定進行範例：

/**
        事件绑定
        **/
        this.bindHandler=(function(){
                            
                        if(window.addEventListener){
                            return function(elem,type,handler){
                                elem.addEventListener(type,handler,false);
                                
                            }
                        }
                        else if(window.attachEvent){
                            return function(elem,type,handler){
                                elem.attachEvent("on"+type,handler);
                            }
                        }
        })();

　　預先根據瀏覽器特性傳回不同function，這樣後續使用就不用再判斷瀏覽器特性，提高效率。

　　附上所有工具函數的原始碼，由於都很簡單，所以對該模組就不在詳述了。

/**
 *
 *基本工具函数模块
 *
**/
cnGame.register("cnGame.core",function(cg){
        /**
        按id获取元素
        **/
        this.$=function(id){
            return document.getElementById(id);        
        };
        /**
        按标签名获取元素
        **/
        this.$$=function(tagName,parent){
            parent=parent||document;
            return parent.getElementsByTagName(tagName);    
        };
        /**
        按类名获取元素
        **/
        this.$Class=function(className,parent){
            var arr=[],result=[];
            parent=parent||document;
            arr=this.$$("*");
            for(var i=0,len=arr.length;i0){
                    result.push(arr[i]);
                }
            }
            return result;    
        };
        /**
        事件绑定
        **/
        this.bindHandler=(function(){
                            
                        if(window.addEventListener){
                            return function(elem,type,handler){
                                elem.addEventListener(type,handler,false);
                                
                            }
                        }
                        else if(window.attachEvent){
                            return function(elem,type,handler){
                                elem.attachEvent("on"+type,handler);
                            }
                        }
        })();
        /**
        事件解除
        **/
        this.removeHandler=(function(){
                        if(window.removeEventListerner){
                            return function(elem,type,handler){
                                elem.removeEventListerner(type,handler,false);
                                
                            }
                        }
                        else if(window.detachEvent){
                            return function(elem,type,handler){
                                elem.detachEvent("on"+type,handler);
                            }
                        }
        })();
        /**
        获取事件对象
        **/
        this.getEventObj=function(eve){
            return eve||win.event;
        };
        /**
        获取事件目标对象
        **/
        this.getEventTarget=function(eve){
            var eve=this.getEventObj(eve);
            return eve.target||eve.srcElement;
        };
        /**
        禁止默认行为
        **/
        this.preventDefault=function(eve){
            if(eve.preventDefault){
                eve.preventDefault();
            }
            else{
                eve.returnValue=false;
            }
            
        };
        /**
        获取对象计算的样式
        **/
        this.getComputerStyle=(function(){
            var body=document.body;
            if(body.currentStyle){
                return function(elem){
                    return elem.currentStyle;
                }
            }
            else if(document.defaultView.getComputedStyle){
                return function(elem){
                    return document.defaultView.getComputedStyle(elem, null);    
                }
            }
            
        })();
        /**
        是否为undefined
        **/
        this.isUndefined=function(elem){
            return typeof elem==='undefined';
        },
        /**
        是否为数组
        **/
        this.isArray=function(elem){
            return Object.prototype.toString.call(elem)==="[object Array]";
        };
        /**
        是否为Object类型
        **/
        this.isObject=function(elem){
            return elem===Object(elem);
        };
        /**
        是否为字符串类型
        **/
        this.isString=function(elem){
            return Object.prototype.toString.call(elem)==="[object String]";
        };
        /**
        是否为数值类型
        **/
        this.isNum=function(elem){
            return Object.prototype.toString.call(elem)==="[object Number]";
        };
        /**
         *复制对象属性
        **/
        this.extend=function(destination,source,isCover){
            var isUndefined=this.isUndefined;
            (isUndefined(isCover))&&(isCover=true);
            for(var name in source){
                if(isCover||isUndefined(destination[name])){
                    destination[name]=source[name];
                }
            
            }
            return destination;
        };
        /**
         *原型继承对象
        **/
        this.inherit=function(child,parent){
            var func=function(){};
            func.prototype=parent.prototype;
            child.prototype=new func();
            child.prototype.constructor=child;
            child.prototype.parent=parent;
        };
    
});

以上是HTML5遊戲框架cnGameJS開發實錄-核心函式模組篇的程式碼實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！