HTML5 game framework cnGameJS development record - basic graphics module-H5 Tutorial-php.cn

1. Function

This module is also very simple, mainly including the drawing of three basic graphics: rectangle, circle and text. We encapsulate each image in theconstructormode. For example, when we need to draw a rectangleobject, we firstnewcreate a rectangular object, and then call the object draw method to draw. For example:

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

Copy after login

2. Implementation

This module includes three graphics objects, so we create three constructors, each of which has its own various methods, including Drawing, moving, rotating, resizing, etc. Since the three objects have many similar methods, we take the rectangular object as an example to explain. First, look at the constructor:

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

Copy after login

It should be noted that,If this function is not called as a constructor, it will return the new constructor, so that the function is always called as a constructorand returns the generated rectangular object. Then call init for initialization.

In addition, although each object has different properties, we should also set a default object for the object. Here you need to use the extend function in the core module to merge the parameters set by the user with the parameters of the default object:

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

Copy after login

For a rectangle, one special thing is that it has four vertices, so we can In addition to saving the x and y coordinates, therightvertex and thebottomvertex are saved to facilitate the detection of rectangular collisions in the future. This function is also very simple, which is to calculate the right based on the width, height and xy and bottom:

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

Copy after login

When the rectangle has its position and size parameters, we can draw it according to the previous parameters (there are two modes of fill and stroke respectively):

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

Copy after login

In addition, in order to facilitate development or testing, the object also provides various other methods to change its own parameters:

1.move: Make the rectangle move a certain distance

2.moveTo: Make the rectangle move a certain distance Move to a specific distance

　3.resize: Change the rectangle to a certain size

　4.resizeTo: Change the rectangle to a specific size

These methods finally return this; so that the methods are Supports chain calls.

This module is also relatively simple and will not be described in detail. Finally, all the source code of the module is given:

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

Copy after login

The above is the detailed content of HTML5 game framework cnGameJS development record - basic graphics module. For more information, please follow other related articles on the PHP Chinese website!