Enregistrement de développement cnGameJS du cadre de jeu HTML5 - exemple de code du module de fonction de base

Retour au répertoire

Organisation du code-cadre 1.cnGameJs

CoreFonction La fonction principale du module est de faciliter le développement ultérieur du framework et le développement de jeux utilisateur L'ensemble du framework est fermé pour éviter la contamination de la portée globale. Après cela, chaque module différent est dans sa propre fermeture, ce qui rend la séparation des différents modules plus claire . Par conséquent, la division des modules de notre framework sera comme ceci :

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

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

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

}(window,undefined)

Alors, comment diviser les autres petits modules ? Afin de permettre à chaque petit module d'avoir son propre espace de noms et dans sa propre fermeture , nous avons ajouté une méthode de registre, qui peut étendre son propre module dans différents espaces de noms , la première chose nous devons transmettre le nom de l'espace de noms, cette méthode génère l'objet espace de noms pour nous, puis nous exécutons notre propre méthode pour effectuer l'opération d'expansion correspondante pour l'objet espace de noms :

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

comme ci-dessus , vous pouvez d'abord diviser l'espace de noms entrant chaîne , puis générer un objet, puis exécuter la fonction transmise par l'utilisateur pour effectuer l'opération d'expansion, comme suit :

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

De cette façon, le module principal peut être généré et la méthode func est ajoutée au module, puis l'organisation du code de notre framework ressemblera à ceci :

(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. Initialisation du framework

Lorsque le framework est initialisé, les objets qui doivent être sauvegardés sont : l'objet canvas, l'objet de contexte, la position du canevas, la taille, etc. On peut d'abord regardez la fonction d'initialisation :

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

Très simple, il suffit de sauvegarder quelques valeurs d'initialisation pour une utilisation ultérieure. De plus, vous pouvez remarquer que nous avons appelé la méthode getCanvasPos pour obtenir le paramètre de position du canevas. Ce paramètre boucle pour obtenir le offsetParent de l'objet, et superpose offsetLeft et offsetTop pour obtenir la position du canevas. sur la page. Le code source de cette fonction est le suivant :

/**
    *获取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. Module de fonction outil

Après cela, nous pouvons utiliser la méthode de registre ci-dessus pour ajouter le premier module : module de base. Ce module est également très simple. Sa fonction principale est d'ajouter des fonctions d'outils pour faciliter le développement ultérieur du framework et le développement de jeux utilisateur. Voici quelques fonctions d'outils couramment utilisées, telles que l'obtention d'éléments par identifiant, le prototype héritage , copie d'objet , événement liaison, etc. Notez que s'il y a des problèmes de compatibilité avec différents navigateurs, nous pouvons définir la fonction en fonction du navigateur dès le début, au lieu de juger à chaque fois le type de navigateur et d'effectuer les opérations correspondantes, ce qui sera plus efficace. Prenons l'exemple de la liaison d'événement :

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

Renvoyez à l'avance différentes fonctions en fonction des caractéristiques du navigateur, de sorte que l'utilisation ultérieure n'ait pas besoin de juger les caractéristiques du navigateur et améliore l'efficacité.

Ci-joint les codes sources de toutes les fonctions de l'outil Comme ils sont très simples, le module ne sera pas décrit en détail.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!