HTML5-Spielframework cnGameJS-Entwicklungsdatensatz – Codebeispiel des Kernfunktionsmoduls

Zurück zum Verzeichnis

1.cnGameJs Framework-Code-Organisation

KernFunktion Die Hauptfunktion des Moduls besteht darin, die nachfolgende Framework-Entwicklung und Benutzerspielentwicklung zu erleichtern. Das gesamte Framework befindet sich in einem geschlossenen Zustand, um eine Kontamination des globalen Umfangs zu vermeiden. Danach befindet sich jedes einzelne Modul in einem eigenen Abschluss, wodurch die Trennung der verschiedenen Module klarer wird. Daher wird die Modulaufteilung unseres Frameworks wie folgt aussehen:

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

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

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

}(window,undefined)

Wie teilen wir also andere kleine Module auf? Um es jedem kleinen Modul zu ermöglichen, seinen eigenen Namespace und seinen eigenen Abschluss zu haben, haben wir als Erstes eine Registermethode hinzugefügt, die sein eigenes Modul in verschiedenen Namespaces erweitern kann Wir müssen den Namen des Namespace übergeben, diese Methode generiert das Namespace-Objekt für uns und dann führen wir unsere eigene Methode aus, um die entsprechende Erweiterungsoperation für das Namespace-Objekt durchzuführen:

/**
         *生成命名空间,并执行相应操作
        **/
        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;
        }

wie oben Zuerst können Sie die eingehende Namespace--Zeichenfolge aufteilen, dann das Objekt generieren und dann die vom Benutzer übergebene Funktion ausführen, um den Erweiterungsvorgang wie folgt auszuführen:

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

Auf diese Weise kann das Kernmodul generiert und die func-Methode zum Modul hinzugefügt werden. Dann sieht die Codeorganisation unseres Frameworks wie folgt aus:

(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 . Initialisierung des Frameworks

Wenn das Framework initialisiert wird, müssen folgende Objekte gespeichert werden: Leinwand Objekt, Kontextobjekt, Leinwandposition, Größe usw. Wir können Schauen Sie sich zunächst die Initialisierungsfunktion an:

/**
         *初始化
        **/
        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";
            
        },

Ganz einfach, speichern Sie einfach einige Initialisierungswerte für die spätere Verwendung. Darüber hinaus können Sie feststellen, dass wir die getCanvasPos-Methode aufgerufen haben, um den Positionsparameter der Leinwand zu erhalten. Dieser Parameter wird in einer Schleife ausgeführt, um den OffsetParent des Objekts zu erhalten, und überlagert offsetLeft und offsetTop, um die Position der Leinwand zu erhalten auf der Seite. Der Quellcode dieser Funktion lautet wie folgt:

/**
    *获取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. Tool-Funktionsmodul

Danach können wir die obige Registermethode verwenden, um das erste Modul hinzuzufügen : Kernmodul. Dieses Modul ist auch sehr einfach. Seine Hauptfunktion besteht darin, Toolfunktionen hinzuzufügen, um die spätere Framework-Entwicklung und Benutzerspielentwicklung zu erleichtern. Hier sind einige häufig verwendete Werkzeugfunktionen, z. B. Abrufen von Elementen nach ID, Prototyp--Vererbung , -Objektkopie , -Ereignis--Bindung usw. . Beachten Sie, dass wir bei Kompatibilitätsproblemen mit verschiedenen Browsern die Funktion von Anfang an entsprechend dem Browser festlegen können, anstatt jedes Mal den Browsertyp zu beurteilen und entsprechende Vorgänge auszuführen, was effizienter ist. Nehmen Sie als Beispiel die Ereignisbindung:

/**
        事件绑定
        **/
        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);
                            }
                        }
        })();

Geben Sie im Voraus verschiedene Funktionen entsprechend den Browsereigenschaften zurück, sodass bei der späteren Verwendung die Browsereigenschaften nicht beurteilt werden müssen und die Effizienz verbessert wird.

Im Anhang finden Sie die Quellcodes aller Toolfunktionen. Da diese sehr einfach sind, wird das Modul nicht im Detail beschrieben.

/**
 *
 *基本工具函数模块
 *
**/
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;
        };
    
});

Das obige ist der detaillierte Inhalt vonHTML5-Spielframework cnGameJS-Entwicklungsdatensatz – Codebeispiel des Kernfunktionsmoduls. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!