Enregistrement de développement cnGameJS du cadre de jeu HTML5 - module graphique de base

1. Fonction

Ce module est également très simple, comprenant principalement le dessin de trois graphiques de base : rectangle, cercle et texte. Nous encapsulons chaque image dans le motif de Constructeur Par exemple, lorsque nous devons dessiner un objet rectangulaire, nous nouveau créons un objet rectangulaire, puis appelez la méthode object draw pour dessiner. Par exemple :

var rect=new cnGame.shape.Rect();
rect.draw();

2. Implémenter

Ce module comprend trois objets graphiques, nous créons donc trois constructeurs, chacun ayant ses propres méthodes. y compris dessiner, déplacer, faire pivoter, redimensionner, etc. Puisque les méthodes des trois objets sont très similaires, nous prenons l'objet rectangulaire comme exemple pour expliquer. Tout d'abord, regardons le constructeur :

/**
     *矩形对象
    **/                                        
    var rect=function(options){
        if(!(this instanceof arguments.callee)){
            return new arguments.callee(options);
        }
        this.init(options);
    }

Les choses. à noter Oui, si cette fonction n'est pas appelée en tant que constructeur, elle renverra le nouveau constructeur, de sorte que la fonction soit toujours appelée en tant que constructeur et renvoie l'objet rectangulaire généré. Appelez ensuite init pour l'initialisation.

De plus, bien que chaque objet ait des propriétés différentes, nous devons également définir un objet par défaut pour l'objet. Ici, vous devez utiliser la fonction extend dans le module principal pour fusionner les paramètres définis par l'utilisateur avec les paramètres de l'objet par défaut :

/**
             *默认值对象
            **/                                                
            var defaultObj={
                x:0,
                y:0,
                width:100,
                height:100
                
            };
            options=options||{};
            options=cg.core.extend(defaultObj,options);

Pour un rectangle, une particularité est qu'il a quatre sommets , donc en plus de sauvegarder les coordonnées x et y, nous pouvons également sauvegarder le sommet droit et le sommet bas pour faciliter la détection des collisions rectangulaires à l'avenir. très simple, en fonction de la largeur, de la hauteur et de xy Calculer la droite et le bas :

/**
     *更新right和bottom
    **/    
    var resetRightBottom=function(elem){
        elem.right=elem.x+elem.width;
        elem.bottom=elem.y+elem.height;    
    }

Lorsque le rectangle a ses paramètres de position et de taille, on peut le dessiner en fonction des paramètres précédents (il existe deux modes : remplissage et contour) :

/**
         *绘制矩形
        **/    
        draw:function(style,isFill){
            var context=cg.context;
            (cg.core.isUndefined(isFill))&&(isFill=true);
            if(isFill){
                context.fillStyle = style;
                context.fillRect(this.x, this.y, this.width, this.height);
            }
            else{
                context.strokeStyle = style;
                context.strokeRect(this.x, this.y, this.width, this.height);
            }
            
              return this;
            
        }

De plus, afin de faciliter le développement ou les tests, l'objet propose également diverses autres méthodes pour modifier ses propres paramètres :

1. déplacer : Faire le le rectangle se déplace d'une certaine distance

2.moveTo : Déplace le rectangle à une distance spécifique

3.resize : Change le rectangle à une certaine taille

4.resizeTo : Change le rectangle à une taille spécifique

En fin de compte, ces méthodes renvoient ceci ; permet aux méthodes de prendre en charge les appels en chaîne.

Ce module est également relativement simple, je n'entrerai donc pas dans les détails. Enfin, tout le code source du module est donné :

/**
 *
 *canvas基本形状对象
 *
**/
cnGame.register("cnGame.shape",function(cg){

    /**
     *更新right和bottom
    **/    
    var resetRightBottom=function(elem){
        elem.right=elem.x+elem.width;
        elem.bottom=elem.y+elem.height;    
    }
    /**
     *矩形对象
    **/                                        
    var rect=function(options){
        if(!(this instanceof arguments.callee)){
            return new arguments.callee(options);
        }
        this.init(options);
    }
    rect.prototype={
        /**
         *初始化
        **/
        init:function(options){
            /**
             *默认值对象
            **/                                                
            var defaultObj={
                x:0,
                y:0,
                width:100,
                height:100,
                style:"red",
                isFill:true
                
            };
            options=options||{};
            options=cg.core.extend(defaultObj,options);
            this.setOptions(options);
        
            resetRightBottom(this);
        },
        /**
         *绘制矩形
        **/    
        setOptions:function(options){
            this.x=options.x;
            this.y=options.y;
            this.width=options.width;
            this.height=options.height;    
            this.style=options.style;
            this.isFill=this.isFill;
        },
        /**
         *绘制矩形
        **/    
        draw:function(){
            var context=cg.context;
            if(this.isFill){
                context.fillStyle = this.style;
                context.fillRect(this.x, this.y, this.width, this.height);
            }
            else{
                context.strokeStyle = this.style;
                context.strokeRect(this.x, this.y, this.width, this.height);
            }
            
              return this;
            
        },
        /**
         *将矩形移动一定距离
        **/    
        move:function(dx,dy){
            dx=dx||0;
            dy=dy||0;
            this.x+=dx;
            this.y+=dy;
            resetRightBottom(this);
            return this;
        },
        /**
         *将矩形移动到特定位置
        **/    
        moveTo:function(x,y){
            x=x||this.x;
            y=y||this.y;
            this.x=x;
            this.y=y;
            resetRightBottom(this);
            return this;
        },
        /**
         *将矩形改变一定大小
        **/    
        resize:function(dWidth,dHeight){
            dWidth=dWidth||0;
            dHeight=dHeight||0;
            this.width+=dWidth;
            this.height+=dHeight;
            resetRightBottom(this);
            return this;
            
        },
        /**
         *将矩形改变到特定大小
        **/    
        resizeTo:function(width,height){
            width=width||this.width;
            height=height||this.height;
            this.width=width;
            this.height=height;
            resetRightBottom(this);
            return this;
        }
    }
    
    /**
     *圆形对象
    **/        
    var circle=function(options){
        if(!(this instanceof arguments.callee)){
            return new arguments.callee(options);
        }
        this.init(options);
    }
    circle.prototype={
        /**
         *初始化
        **/
        init:function(options){
            /**
             *默认值对象
            **/
            var defaultObj={
                x:100,
                y:100,
                r:100,
                startAngle:0,
                endAngle:Math.PI*2,
                antiClock:false,
                style:"red",
                isFill:true
            };
            options=options||{};
            options=cg.core.extend(defaultObj,options);
            this.setOptions(options);
        
        },
        /**
         *设置参数
        **/
        setOptions=function(options){
            this.x=options.x;
            this.y=options.y;
            this.r=options.r;
            this.startAngle=options.startAngle;
            this.endAngle=options.endAngle;
            this.antiClock=options.antiClock;
            this.isFill=options.isFill;
            this.style=options.style;
        },
        /**
         *绘制圆形
        **/
        draw:function(){
            var context=cg.context;
            context.beginPath();
            context.arc(this.x,this.y,this.r,this.startAngle,this.endAngle,this.antiClock);
            context.closePath();
            if(this.isFill){
                context.fillStyle=this.style;
                context.fill();
            }
            else{
                context.strokeStyle=this.style;
                context.stroke();
            }
            
        },
        /**
         *将圆形移动一定距离
        **/    
        move:function(dx,dy){
            dx=dx||0;
            dy=dy||0;
            this.x+=dx;
            this.y+=dy;
            return this;
        },
        /**
         *将圆形移动到特定位置
        **/    
        moveTo:function(x,y){
            x=x||this.x;
            y=y||this.y;
            this.x=x;
            this.y=y;
            return this;
        },
        /**
         *将圆形改变一定大小
        **/    
        resize:function(dr){
            dr=dr||0;
            this.r+=dr;
            return this;
            
        },
        /**
         *将圆形改变到特定大小
        **/    
        resizeTo:function(r){
            r=r||this.r;
            this.r=r;
            return this;
        }    
    }
    /**
     *将圆形改变到特定大小
    **/    
    var text=function(text,options){
        if(!(this instanceof arguments.callee)){
            return new arguments.callee(text,options);
        }
        this.init(text,options);
    
    }
    text.prototype={
        /**
         *初始化
        **/
        init:function(text,options){
            /**
             *默认值对象
            **/
            var defaultObj={
                x:100,
                y:100,
                style:"red",
                isFill:true
                
            };
            options=options||{};
            options=cg.core.extend(defaultObj,options);
            this.setOptions(options);
            this.text=text;        
        },
        /**
        *绘制
        **/
        draw:function(){
            var context=cg.context;
            (!cg.core.isUndefined(this.font))&&(context.font=this.font);
            (!cg.core.isUndefined(this.textBaseline))&&(context.textBaseline=this.textBaseline);
            (!cg.core.isUndefined(this.textAlign))&&(context.textAlign=this.textAlign);
            (!cg.core.isUndefined(this.maxWidth))&&(context.maxWidth=this.maxWidth);
            if(this.isFill){
                context.fillStyle=this.style;
                this.maxWidth?context.fillText(this.text,this.x,this.y,this.maxWidth):context.fillText(this.text,this.x,this.y);
            }
            else{
                context.strokeStyle=this.style;
                this.maxWidth?context.strokeText(this.text,this.x,this.y,this.maxWidth):context.strokeText(this.text,this.x,this.y);
            }
        },
        /**
        *设置参数
        **/
        setOptions:function(options){
            this.x=options.x||this.x;
            this.y=options.y||this.y;
            this.maxWidth=options.maxWidth||this.maxWidth;
            this.font=options.font||this.font;
            this.textBaseline=options.textBaseline||this.textBaseline;
            this.textAlign=options.textAlign||this.textAlign;
            this.isFill=options.isFill||this.isFill;
            this.style=options.style||this.style;
            
        }
    }
    
    this.Text=text;
    this.Rect=rect;
    this.Circle=circle;
    
});

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!