Entwicklungsdatensatz des HTML5-Spielframeworks cnGameJS – grundlegendes Grafikmodul

1. Funktion

Dieses Modul ist ebenfalls sehr einfach und umfasst hauptsächlich das Zeichnen von drei Grundgrafiken: Rechteck, Kreis und Text. Wir kapseln jedes Bild im Muster von Konstruktor. Wenn wir beispielsweise ein rechteckiges Objekt zeichnen müssen, erstellen wir zuerst neu ein rechteckiges Objekt und dann Rufen Sie zum Zeichnen die Objektzeichnungsmethode auf. Zum Beispiel:

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

2. Implementieren Sie

Dieses Modul enthält drei Grafikobjekte, daher erstellen wir drei Konstruktoren, von denen jeder seine eigenen verschiedenen Methoden hat. einschließlich Zeichnen, Verschieben, Drehen, Größenänderung usw. Da die Methoden der drei Objekte sehr ähnlich sind, nehmen wir zur Erläuterung das rechteckige Objekt als Beispiel. Schauen Sie sich zunächst den Konstruktor an:

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

Dinge zu beachten Ja, Wenn diese Funktion nicht als Konstruktor aufgerufen wird, gibt sie den neuen Konstruktor zurück, sodass die Funktion immer als Konstruktor aufgerufen wirdund das generierte rechteckige Objekt zurückgibt. Rufen Sie dann init zur Initialisierung auf.

Obwohl jedes Objekt unterschiedliche Eigenschaften hat, sollten wir außerdem ein Standardobjekt für das Objekt festlegen. Hier müssen Sie die Erweiterungsfunktion im Kernmodul verwenden, um die vom Benutzer eingestellten Parameter mit den Parametern des Standardobjekts zusammenzuführen:

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

Eine Besonderheit bei einem Rechteck ist, dass es vier Eckpunkte hat , also Zusätzlich zum Speichern der x- und y-Koordinaten können wir auch den rechten Scheitelpunkt und den unteren Scheitelpunkt speichern, um die Erkennung rechteckiger Kollisionen in Zukunft zu erleichtern. Diese Funktion ist ebenfalls verfügbar ganz einfach, basierend auf Breite, Höhe und xy Berechnen Sie rechts und unten:

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

Wenn das Rechteck seine Positions- und Größenparameter hat, können wir es basierend auf den vorherigen Parametern zeichnen (es gibt zwei Modi: Füllung und Strich):

/**
         *绘制矩形
        **/    
        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;
            
        }

Darüber hinaus bietet das Objekt zur Erleichterung der Entwicklung oder des Testens auch verschiedene andere Methoden zum Ändern seiner eigenen Parameter:

1. Verschieben: Machen Sie das Rechteck um eine bestimmte Distanz verschieben

2.moveTo: Das Rechteck um eine bestimmte Distanz verschieben

3.resize: Das Rechteck auf eine bestimmte Größe ändern

4.resizeTo: Ändern das Rechteck auf eine bestimmte Größe

Am Ende werden diese Methoden zurückgegeben. Dadurch können Methoden Kettenaufrufe unterstützen.

Dieses Modul ist auch relativ einfach, daher werde ich nicht auf Details eingehen. Abschließend wird der gesamte Quellcode des Moduls angegeben:

/**
 *
 *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;
    
});

Das obige ist der detaillierte Inhalt vonEntwicklungsdatensatz des HTML5-Spielframeworks cnGameJS – grundlegendes Grafikmodul. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!