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

Home

Web Front-end

H5 Tutorial

HTML5 game framework cnGameJS development record - basic graphics module

黄舟

Mar 24, 2017 pm 04:16 PM

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 the constructor mode. For example, when we need to draw a rectangle object , we first new create a rectangular object, and then call the object draw method to draw. For example:

1 2	`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 constructor and 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, the right vertex and the bottom vertex 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:

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

/**
 *
 *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!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn