当前位置：Gxlcms > html代码 > HTML5游戏框架cnGameJS开发实录-基本图形模块篇

HTML5游戏框架cnGameJS开发实录-基本图形模块篇

时间：2021-07-01 10:21:17 帮助过：17人阅读

1.功能

　　该模块也很简单，主要包括三个基础图形的绘制：矩形 圆形 文字。我们把一个个图像以构造函数的模式封装，例如当我们需要绘制一个矩形对象，我们首先new出一个矩形对象，再调用对象的draw方法进行绘制。例如：

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

2.实现

　　该模块包括三个图形对象，因此我们建立三个构造函数，它们分别有自己的各种方法，包括绘制，移动，旋转，尺寸调整等等，由于三个对象的方法有较多相似，我们以矩形对象为例进行解释，首先看构造函数：

  1. /**
  2.      *矩形对象
  3.     **/                                        
  4.     var rect=function(options){
  5.         if(!(this instanceof arguments.callee)){
  6.             return new arguments.callee(options);
  7.         }
  8.         this.init(options);
  9.     }

　　需要注意的是，该函数如果不是以构造函数方式调用，则会return new 构造函数，使函数始终以构造函数方式调用，返回生成的矩形对象。之后调用init进行初始化。

另外虽然每个对象有不同的属性，但是我们也应该为对象设定默认对象。这里就需要使用到之前在core模块extend函数，使用户设定的参数和默认对象的参数融合：

  1. /**
  2.              *默认值对象
  3.             **/                                                
  4.             var defaultObj={
  5.                 x:0,
  6.                 y:0,
  7.                 width:100,
  8.                 height:100
  9.                 
  10.             };
  11.             options=options||{};
  12.             options=cg.core.extend(defaultObj,options);

　　对于矩形，有一个特别之处是它有四个顶点，因此我们可以在保存x，y坐标之余，保存right顶点，和bottom顶点，方便以后矩形碰撞的检测，该函数也很简单，就是根据宽高和xy计算right和bottom：

  1. /**
  2.      *更新right和bottom
  3.     **/    
  4.     var resetRightBottom=function(elem){
  5.         elem.right=elem.x+elem.width;
  6.         elem.bottom=elem.y+elem.height;    
  7.     }

　　当矩形都有了它的位置和尺寸参数后，我们就可以　根据之前的参数把它绘制出来（分别有填充和描边两种模式）：

  1. /**
  2.          *绘制矩形
  3.         **/    
  4.         draw:function(style,isFill){
  5.             var context=cg.context;
  6.             (cg.core.isUndefined(isFill))&&(isFill=true);
  7.             if(isFill){
  8.                 context.fillStyle = style;
  9.                 context.fillRect(this.x, this.y, this.width, this.height);
  10.             }
  11.             else{
  12.                 context.strokeStyle = style;
  13.                 context.strokeRect(this.x, this.y, this.width, this.height);
  14.             }
  15.             
  16.               return this;
  17.             
  18.         }

　　另外，为了方便开发或测试，对象也提供其他各种改变自己参数的方法：

　　1.move：使矩形移动一定距离

　　2.moveTo:使矩形移动到特定距离

　　3.resize：改变矩形一定尺寸

　　4.resizeTo：把矩形改变到特定尺寸

　　这些方法最后都return this;使方法都支持链式调用。

　　该模块也比较简单，就不再详述。最后给出该模块所有的源码：

  1. /**
  2.  *
  3.  *canvas基本形状对象
  4.  *
  5. **/
  6. cnGame.register("cnGame.shape",function(cg){
  7.     /**
  8.      *更新right和bottom
  9.     **/    
  10.     var resetRightBottom=function(elem){
  11.         elem.right=elem.x+elem.width;
  12.         elem.bottom=elem.y+elem.height;    
  13.     }
  14.     /**
  15.      *矩形对象
  16.     **/                                        
  17.     var rect=function(options){
  18.         if(!(this instanceof arguments.callee)){
  19.             return new arguments.callee(options);
  20.         }
  21.         this.init(options);
  22.     }
  23.     rect.prototype={
  24.         /**
  25.          *初始化
  26.         **/
  27.         init:function(options){
  28.             /**
  29.              *默认值对象
  30.             **/                                                
  31.             var defaultObj={
  32.                 x:0,
  33.                 y:0,
  34.                 width:100,
  35.                 height:100,
  36.                 style:"red",
  37.                 isFill:true
  38.                 
  39.             };
  40.             options=options||{};
  41.             options=cg.core.extend(defaultObj,options);
  42.             this.setOptions(options);
  43.         
  44.             resetRightBottom(this);
  45.         },
  46.         /**
  47.          *绘制矩形
  48.         **/    
  49.         setOptions:function(options){
  50.             this.x=options.x;
  51.             this.y=options.y;
  52.             this.width=options.width;
  53.             this.height=options.height;    
  54.             this.style=options.style;
  55.             this.isFill=this.isFill;
  56.         },
  57.         /**
  58.          *绘制矩形
  59.         **/    
  60.         draw:function(){
  61.             var context=cg.context;
  62.             if(this.isFill){
  63.                 context.fillStyle = this.style;
  64.                 context.fillRect(this.x, this.y, this.width, this.height);
  65.             }
  66.             else{
  67.                 context.strokeStyle = this.style;
  68.                 context.strokeRect(this.x, this.y, this.width, this.height);
  69.             }
  70.             
  71.               return this;
  72.             
  73.         },
  74.         /**
  75.          *将矩形移动一定距离
  76.         **/    
  77.         move:function(dx,dy){
  78.             dx=dx||0;
  79.             dy=dy||0;
  80.             this.x+=dx;
  81.             this.y+=dy;
  82.             resetRightBottom(this);
  83.             return this;
  84.         },
  85.         /**
  86.          *将矩形移动到特定位置
  87.         **/    
  88.         moveTo:function(x,y){
  89.             x=x||this.x;
  90.             y=y||this.y;
  91.             this.x=x;
  92.             this.y=y;
  93.             resetRightBottom(this);
  94.             return this;
  95.         },
  96.         /**
  97.          *将矩形改变一定大小
  98.         **/    
  99.         resize:function(dWidth,dHeight){
  100.             dWidth=dWidth||0;
  101.             dHeight=dHeight||0;
  102.             this.width+=dWidth;
  103.             this.height+=dHeight;
  104.             resetRightBottom(this);
  105.             return this;
  106.             
  107.         },
  108.         /**
  109.          *将矩形改变到特定大小
  110.         **/    
  111.         resizeTo:function(width,height){
  112.             width=width||this.width;
  113.             height=height||this.height;
  114.             this.width=width;
  115.             this.height=height;
  116.             resetRightBottom(this);
  117.             return this;
  118.         }
  119.     }
  120.     
  121.     /**
  122.      *圆形对象
  123.     **/        
  124.     var circle=function(options){
  125.         if(!(this instanceof arguments.callee)){
  126.             return new arguments.callee(options);
  127.         }
  128.         this.init(options);
  129.     }
  130.     circle.prototype={
  131.         /**
  132.          *初始化
  133.         **/
  134.         init:function(options){
  135.             /**
  136.              *默认值对象
  137.             **/
  138.             var defaultObj={
  139.                 x:100,
  140.                 y:100,
  141.                 r:100,
  142.                 startAngle:0,
  143.                 endAngle:Math.PI*2,
  144.                 antiClock:false,
  145.                 style:"red",
  146.                 isFill:true
  147.             };
  148.             options=options||{};
  149.             options=cg.core.extend(defaultObj,options);
  150.             this.setOptions(options);
  151.         
  152.         },
  153.         /**
  154.          *设置参数
  155.         **/
  156.         setOptions=function(options){
  157.             this.x=options.x;
  158.             this.y=options.y;
  159.             this.r=options.r;
  160.             this.startAngle=options.startAngle;
  161.             this.endAngle=options.endAngle;
  162.             this.antiClock=options.antiClock;
  163.             this.isFill=options.isFill;
  164.             this.style=options.style;
  165.         },
  166.         /**
  167.          *绘制圆形
  168.         **/
  169.         draw:function(){
  170.             var context=cg.context;
  171.             context.beginPath();
  172.             context.arc(this.x,this.y,this.r,this.startAngle,this.endAngle,this.antiClock);
  173.             context.closePath();
  174.             if(this.isFill){
  175.                 context.fillStyle=this.style;
  176.                 context.fill();
  177.             }
  178.             else{
  179.                 context.strokeStyle=this.style;
  180.                 context.stroke();
  181.             }
  182.             
  183.         },
  184.         /**
  185.          *将圆形移动一定距离
  186.         **/    
  187.         move:function(dx,dy){
  188.             dx=dx||0;
  189.             dy=dy||0;
  190.             this.x+=dx;
  191.             this.y+=dy;
  192.             return this;
  193.         },
  194.         /**
  195.          *将圆形移动到特定位置
  196.         **/    
  197.         moveTo:function(x,y){
  198.             x=x||this.x;
  199.             y=y||this.y;
  200.             this.x=x;
  201.             this.y=y;
  202.             return this;
  203.         },
  204.         /**
  205.          *将圆形改变一定大小
  206.         **/    
  207.         resize:function(dr){
  208.             dr=dr||0;
  209.             this.r+=dr;
  210.             return this;
  211.             
  212.         },
  213.         /**
  214.          *将圆形改变到特定大小
  215.         **/    
  216.         resizeTo:function(r){
  217.             r=r||this.r;
  218.             this.r=r;
  219.             return this;
  220.         }    
  221.     }
  222.     /**
  223.      *将圆形改变到特定大小
  224.     **/    
  225.     var text=function(text,options){
  226.         if(!(this instanceof arguments.callee)){
  227.             return new arguments.callee(text,options);
  228.         }
  229.         this.init(text,options);
  230.     
  231.     }
  232.     text.prototype={
  233.         /**
  234.          *初始化
  235.         **/
  236.         init:function(text,options){
  237.             /**
  238.              *默认值对象
  239.             **/
  240.             var defaultObj={
  241.                 x:100,
  242.                 y:100,
  243.                 style:"red",
  244.                 isFill:true
  245.                 
  246.             };
  247.             options=options||{};
  248.             options=cg.core.extend(defaultObj,options);
  249.             this.setOptions(options);
  250.             this.text=text;        
  251.         },
  252.         /**
  253.         *绘制
  254.         **/
  255.         draw:function(){
  256.             var context=cg.context;
  257.             (!cg.core.isUndefined(this.font))&&(context.font=this.font);
  258.             (!cg.core.isUndefined(this.textBaseline))&&(context.textBaseline=this.textBaseline);
  259.             (!cg.core.isUndefined(this.textAlign))&&(context.textAlign=this.textAlign);
  260.             (!cg.core.isUndefined(this.maxWidth))&&(context.maxWidth=this.maxWidth);
  261.             if(this.isFill){
  262.                 context.fillStyle=this.style;
  263.                 this.maxWidth?context.fillText(this.text,this.x,this.y,this.maxWidth):context.fillText(this.text,this.x,this.y);
  264.             }
  265.             else{
  266.                 context.strokeStyle=this.style;
  267.                 this.maxWidth?context.strokeText(this.text,this.x,this.y,this.maxWidth):context.strokeText(this.text,this.x,this.y);
  268.             }
  269.         },
  270.         /**
  271.         *设置参数
  272.         **/
  273.         setOptions:function(options){
  274.             this.x=options.x||this.x;
  275.             this.y=options.y||this.y;
  276.             this.maxWidth=options.maxWidth||this.maxWidth;
  277.             this.font=options.font||this.font;
  278.             this.textBaseline=options.textBaseline||this.textBaseline;
  279.             this.textAlign=options.textAlign||this.textAlign;
  280.             this.isFill=options.isFill||this.isFill;
  281.             this.style=options.style||this.style;
  282.             
  283.         }
  284.     }
  285.     
  286.     this.Text=text;
  287.     this.Rect=rect;
  288.     this.Circle=circle;
  289.     
  290. });

以上就是HTML5游戏框架cnGameJS开发实录-基本图形模块篇的详细内容，更多请关注Gxl网其它相关文章！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！