过完年来公司，没什么事，主管说研究下html5 游戏，然后主管就给了一个斗地主的demo，随后我就开始看代码，
现在我看了html5以及canvas相关知识和斗地主的demo后，自己用demo上的素材试着写了个斗地主，代码没重构好，欢迎赐教。
话不多说，下面就一步一步解释下吧
只有一个common.js文件
1、资源类
1 var Resource = Class.create(); 2 $.extend(Resource.prototype, { 3 initialize: function () { }, 4 Images: [ 5 { path: 'img/bg1.png', x: 0, y: 0, w: 800, h: 480, data: null, type: 61, visible: true }, 6 { path: 'img/BeiMian.jpg', x: 320, y: 5, w: 100, h: 121, data: null, type: 62, visible: true }, 7 { path: 'img/btn.jpg', x: 300, y: 281, w: 140, h: 50, data: null, type: 63, visible: true, text: '开始', textX: 366, textY: 310 }, 8 { x: 0, y: 0, type: 66, isText: true, visible: false }, 9 { path: 'img/1.jpg', data: null, type: 16, visible: false },10 { path: 'img/2.jpg', data: null, type: 17, visible: false },11 { path: 'img/3.jpg', data: null, type: 3, visible: false, se: 1 },12 { path: 'img/4.jpg', data: null, type: 4, visible: false, se: 1 },13 { path: 'img/5.jpg', data: null, type: 5, visible: false, se: 1 },14 { path: 'img/6.jpg', data: null, type: 6, visible: false, se: 1 },15 { path: 'img/7.jpg', data: null, type: 7, visible: false, se: 1 },16 { path: 'img/8.jpg', data: null, type: 8, visible: false, se: 1 },17 { path: 'img/9.jpg', data: null, type: 9, visible: false, se: 1 },18 { path: 'img/10.jpg', data: null, type: 10, visible: false, se: 1 },19 { path: 'img/11.jpg', data: null, type: 11, visible: false, se: 1 },20 { path: 'img/12.jpg', data: null, type: 12, visible: false, se: 1 },21 { path: 'img/13.jpg', data: null, type: 13, visible: false, se: 1 },22 { path: 'img/14.jpg', data: null, type: 14, visible: false, se: 1 },23 { path: 'img/15.jpg', data: null, type: 15, visible: false, se: 1 },24 { path: 'img/16.jpg', data: null, type: 3, visible: false, se: 4 },25 { path: 'img/17.jpg', data: null, type: 4, visible: false, se: 4 },26 { path: 'img/18.jpg', data: null, type: 5, visible: false, se: 4 },27 { path: 'img/19.jpg', data: null, type: 6, visible: false, se: 4 },28 { path: 'img/20.jpg', data: null, type: 7, visible: false, se: 4 },29 { path: 'img/21.jpg', data: null, type: 8, visible: false, se: 4 },30 { path: 'img/22.jpg', data: null, type: 9, visible: false, se: 4 },31 { path: 'img/23.jpg', data: null, type: 10, visible: false, se: 4 },32 { path: 'img/24.jpg', data: null, type: 11, visible: false, se: 4 },33 { path: 'img/25.jpg', data: null, type: 12, visible: false, se: 4 },34 { path: 'img/26.jpg', data: null, type: 13, visible: false, se: 4 },35 { path: 'img/27.jpg', data: null, type: 14, visible: false, se: 4 },36 { path: 'img/28.jpg', data: null, type: 15, visible: false, se: 4 },37 { path: 'img/29.jpg', data: null, type: 3, visible: false, se: 3 },38 { path: 'img/30.jpg', data: null, type: 4, visible: false, se: 3 },39 { path: 'img/31.jpg', data: null, type: 5, visible: false, se: 3 },40 { path: 'img/32.jpg', data: null, type: 6, visible: false, se: 3 },41 { path: 'img/33.jpg', data: null, type: 7, visible: false, se: 3 },42 { path: 'img/34.jpg', data: null, type: 8, visible: false, se: 3 },43 { path: 'img/35.jpg', data: null, type: 9, visible: false, se: 3 },44 { path: 'img/36.jpg', data: null, type: 10, visible: false, se: 3 },45 { path: 'img/37.jpg', data: null, type: 11, visible: false, se: 3 },46 { path: 'img/38.jpg', data: null, type: 12, visible: false, se: 3 },47 { path: 'img/39.jpg', data: null, type: 13, visible: false, se: 3 },48 { path: 'img/40.jpg', data: null, type: 14, visible: false, se: 3 },49 { path: 'img/41.jpg', data: null, type: 15, visible: false, se: 3 },50 { path: 'img/42.jpg', data: null, type: 3, visible: false, se: 2 },51 { path: 'img/43.jpg', data: null, type: 4, visible: false, se: 2 },52 { path: 'img/44.jpg', data: null, type: 5, visible: false, se: 2 },53 { path: 'img/45.jpg', data: null, type: 6, visible: false, se: 2 },54 { path: 'img/46.jpg', data: null, type: 7, visible: false, se: 2 },55 { path: 'img/47.jpg', data: null, type: 8, visible: false, se: 2 },56 { path: 'img/48.jpg', data: null, type: 9, visible: false, se: 2 },57 { path: 'img/49.jpg', data: null, type: 10, visible: false, se: 2 },58 { path: 'img/50.jpg', data: null, type: 11, visible: false, se: 2 },59 { path: 'img/51.jpg', data: null, type: 12, visible: false, se: 2 },60 { path: 'img/52.jpg', data: null, type: 13, visible: false, se: 2 },61 { path: 'img/53.jpg', data: null, type: 14, visible: false, se: 2 },62 { path: 'img/54.jpg', data: null, type: 15, visible: false, se: 2 }63 ]64 }); Resource.Images是素材数组(几个按钮，文本，54张牌,背景图片等),大家可以下载demo看看 2、Lables类,在Canvas画布上画文本的,比如按钮文字,相关知识请看
1 var Labels = Class.create(); 2 $.extend(Labels.prototype, { 3 initialize: function (cxt) { 4 this.cxt = cxt; 5 }, 6 setText: function (text, postion) { 7 this.cxt.font = 'bold 20px serif'; 8 this.cxt.fillStyle = '#000000'; 9 this.cxt.textAlign = 'center';10 this.cxt.fillText(text, postion.x, postion.y);11 }12 }); 这个类的方法setText主要是根据设置的字体，字体大小，字体颜色，在Canvas上画文本的，this.cxt这个是canvas上下文(每个教程的叫法不一样)，首先this.cxt.font = 'bold 20px serif';这个是设置字体大小，样式等，this.cxt.fillStyle = '#000000';这个
是设置字体颜色，this.cxt.textAlign = 'center';这个是设置字体对齐方式,this.cxt.fillText(text, postion.x, postion.y);这个是开始在canvas上画文本,postion.x, postion.y分别是x坐标和y坐标。
3、DdZGame游戏类，主要功能就是初始化斗地主，发牌，抢地主等，出牌未完待续，后续更新
1 var DdZGame = Class.create(); 2 DdZGame.Statics = { DealedNums: 0, isLeftFirstDeal: true }; 3 $.extend(DdZGame.prototype, { 4 initialize: function () { 5 DdZGame.Statics.IsGetLander = false; 6 DdZGame.Statics.DealTime = 66; 7 this.leftPokers = []; 8 this.rightPokers = []; 9 this.myPokers = []; 10 this.LastPokers = [];//最后3张牌 11 12 this.leftPlays = []; 13 this.rightPlays = []; 14 this.myPlays = []; 15 16 this.myBtnPostion = { y: 245, x: 162 }; 17 18 this.isStart = false; 19 20 this.Res = new Resource(); 21 22 this.allPokers = new Array(); 23 24 this.Lander = 0;//地主,1右边,2My,3左边 25 this.isGetLander = {}; 26 this.GmCanvas = document.getElementById('gmCanvas'); 27 28 29 this.cxt = this.GmCanvas.getContext('2d'); 30 this.Lbl = new Labels(this.cxt); 31 this.init(); 32 this.initEvt(); 33 }, 34 initEvt: function () { 35 this.GmCanvas.onclick = $.proxy(function (e) { 36 var box = this.GmCanvas.getBoundingClientRect(); 37 38 DdZGame.Statics.MousePostion = { x: e.pageX - box.left, y: e.pageY - box.top }; 39 this.onControlClick(); 40 }, this); 41 }, 42 onControlClick: function () { 43 var isClick = false; 44 for (var i = 0; i < this.Controls.length; i++) { 45 var c = this.Controls[i]; 46 var postion = DdZGame.Statics.MousePostion; 47 if (c.onClick) { 48 if (postion.x >= c.x && postion.x <= c.x + c.w && postion.y >= c.y && postion.y <= c.y + c.h) { 49 c.onClick(); 50 isClick = true; 51 break; 52 } 53 } 54 } 55 if (!isClick) { 56 for (var i = 0; i < this.myPokers.length; i++) { 57 var c = this.myPokers[i]; 58 var postion = DdZGame.Statics.MousePostion; 59 if (c.onClick) { 60 if (postion.x >= c.x && postion.x <= c.x + c.w && postion.y >= c.y && postion.y <= c.y + c.h) { 61 c.onClick(); 62 isClick = true; 63 break; 64 } 65 } 66 } 67 } 68 }, 69 loadImages: function (callback) { 70 var loadedNums = 0; 71 var totalNums = this.Res.Images.length - 1; 72 this.Controls = []; 73 $.each(this.Res.Images, $.proxy(function (i, o) { 74 if (!o.path) { 75 return true; 76 } 77 o.data = new Image(); 78 o.data.src = o.path; 79 o.data.onload = $.proxy(function () { 80 if (o.type <= 17) { 81 this.allPokers.push(o); 82 } 83 else 84 this.Controls.push(o); 85 86 87 loadedNums++; 88 if (loadedNums >= totalNums) { 89 callback.call(this); 90 } 91 }, this); 92 }, this)); 93 }, 94 drawImage: function (callback, isUnVisibleLast) { //isVisibleLast 是否让底牌不可见 95 $.each(this.Controls, $.proxy(function (i, o) { 96 if (!o.visible) 97 return true; 98 if (o.type == 62) { 99 var x = 0;100 for (var i = 0; i < 54 - DdZGame.Statics.DealedNums ; i++) {101 if (i == 0) x = o.x;102 this.cxt.drawImage(o.data, o.x, o.y, o.w, o.h);103 o.x++;104 }105 o.x = x;106 }107 else if (!o.isText) {108 this.cxt.drawImage(o.data, o.x, o.y, o.w, o.h);109 }110 if (o.type == 63) {111 this.Lbl.setText(o.text, { x: o.textX, y: o.textY });112 113 114 115 if (!o.onClick)116 o.onClick = $.proxy(function () {117 o.onClick = null;118 o.visible = false;119 this.drawImage();120 this.Dealing();121 }, this);122 }123 124 if (o.type == 66) {125 this.Lbl.setText(o.text, { x: o.x, y: o.y });126 }127 }, this));128 129 130 /*克隆*/131 var copyLeftPokers = this.leftPokers.slice();132 var copyRightPokers = this.rightPokers.slice();133 var copyMyPokers = this.myPokers.slice();134 var copyLastPokers = this.LastPokers.slice();135 136 var isDealEndLeft = false;137 var isDealEndRight = false;138 var isDealEndMy = false;139 var isDealEndLast = false;140 141 var beiMain = $.grep(this.Res.Images, $.proxy(function (o, i) { return o.type == 62; }, this))[0];142 var DrawPokers = function (arry, direction, isBeiMian, identiy, axis) {143 if (arry && arry.length > 0) {144 var o = arry[0];145 var x = 0, y = 0;146 147 148 149 150 151 152 153 154 155 156 157 158 159 if (!DdZGame.Statics[direction]) {160 DdZGame.Statics[direction] = this[direction];161 }162 163 if (!o.x) {164 x = DdZGame.Statics[direction].x;165 y = DdZGame.Statics[direction].y;166 167 o.x = this[direction].x;168 o.y = this[direction].y;169 }170 else {171 x = o.x;172 y = o.y;173 }174 175 176 if (!o.visible) {177 return true;178 }179 180 181 182 o.w = 18;183 o.h = 129;184 if (arry.length == 1) {185 o.w = 105;186 o.h = 150;187 }188 189 190 191 192 193 194 195 var img = o.data;196 if (isBeiMian) {197 img = beiMain.data;198 }199 else if (direction == 'myPannel') {200 o.onClick = $.proxy(function () {201 if (!this.isStart)202 return;203 if (!o.isPlay) {204 o.isPlay = true;205 o.y -= 30;206 }207 else {208 o.isPlay = false;209 o.y += 30;210 }211 212 DdZGame.Statics.DealTime = 0;213 this.drawImage();214 }, this);215 }216 this.cxt.drawImage(img, x, y);217 DdZGame.Statics[direction][axis] += identiy;218 219 arry.splice(0, 1);220 if (DdZGame.Statics.DealTime > 0)221 DdZGame.Statics[direction + 'handle'] = setTimeout($.proxy(function () {222 DrawPokers.call(this, arry, direction, isBeiMian, identiy, axis);223 }, this), DdZGame.Statics.DealTime);224 else225 DrawPokers.call(this, arry, direction, isBeiMian, identiy, axis);226 }227 else if (DdZGame.Statics[direction + 'handle'] || DdZGame.Statics.DealTime == 0) {228 clearTimeout(DdZGame.Statics[direction + 'handle']);229 230 231 if (direction == 'leftPannel' && copyLeftPokers.length == 0) {232 isDealEndLeft = true;233 }234 if (direction == 'rightPannel' && copyRightPokers.length == 0) {235 isDealEndRight = true;236 }237 if (direction == 'myPannel' && copyMyPokers.length == 0) {238 isDealEndMy = true;239 }240 if (direction == 'lastPannel' && copyLastPokers.length == 0) {241 isDealEndLast = true;242 }243 if (isDealEndLeft && isDealEndRight && isDealEndMy && isDealEndLast) {244 /*发牌完毕*/245 /*抢地主*/246 if (callback)247 callback();248 }249 }250 };251 252 253 DrawPokers.call(this, copyLeftPokers, 'leftPannel', true, 26, 'y');254 DrawPokers.call(this, copyRightPokers, 'rightPannel', true, 26, 'y');255 DrawPokers.call(this, copyMyPokers, 'myPannel', false, 19, 'x');256 257 DrawPokers.call(this, copyLastPokers, 'lastPannel', isUnVisibleLast, 126, 'x');258 },259 init: function () {260 this.loadImages(this.drawImage);261 },262 Dealing: function () { //发牌 263 this.leftPannel = { x: 5, y: 18 };264 this.rightPannel = { x: 691, y: 18 };265 this.myPannel = { x: 198, y: 330 };266 this.lastPannel = { x: 243, y: 5 };267 268 269 if (DdZGame.Statics.DealedNums >= 51) { //发牌完毕 270 271 $.each(this.allPokers, $.proxy(function (i, o) {272 o.visible = true;273 this.LastPokers.push(o);274 }, this));275 276 277 this.myPokers.sort(function (a, b) {278 if (a.type != b.type)279 return b.type - a.type;280 return b.se - a.se;281 });282 $.grep(this.Res.Images, $.proxy(function (o, i) { return o.type == 62; }, this))[0].visible = false;283 this.drawImage($.proxy(function () { this.GetLander(); }, this), true);284 285 }286 else {287 /*1、left*/288 var index = Math.floor(Math.random() * (this.allPokers.length - 1) + 0);289 var c = this.allPokers.splice(index, 1);290 c[0].visible = true;291 this.leftPokers.push(c[0]);292 DdZGame.Statics.DealedNums++;293 294 /*2、right*/295 index = Math.floor(Math.random() * (this.allPokers.length - 1) + 0);296 c = this.allPokers.splice(index, 1);297 c[0].visible = true;298 this.rightPokers.push(c[0]);299 DdZGame.Statics.DealedNums++;300 301 index = Math.floor(Math.random() * (this.allPokers.length - 1) + 0);302 c = this.allPokers.splice(index, 1);303 c[0].visible = true;304 this.myPokers.push(c[0]);305 DdZGame.Statics.DealedNums++;306 307 this.Dealing();308 }309 },310 GetLander: function (firstGet, minScore, curScore) {311 /*随机出谁先叫地主*/312 313 //if (curScore && !this.isGetLander[1] && !this.isGetLander[2] && !this.isGetLander[3]) { 314 // //**Game Over !315 // alert('无人抢地主');316 // return;317 //}318 319 320 var postion = { 1: { y: 100, x: 640 }, 3: { y: 100, x: 126 }, 2: { x: 216, y: 297 } };321 if (!curScore) {322 if (!minScore)323 minScore = 1;324 if (!firstGet)325 firstGet = Math.floor(Math.random() * (3 - 1 + 1) + 1);326 if (firstGet == 1 || firstGet == 3) { //电脑抢地主327 if (this.isGetLander[firstGet] == -1 || this.isGetLander[firstGet]) {328 $.each(this.Controls, $.proxy(function (i, o) {329 if (o.Lander) {330 o.visible = false;331 }332 }, this));333 334 var max = 0;335 if (this.isGetLander[1] > this.isGetLander[2]) {336 max = this.isGetLander[1];337 this.Lander = 1;338 }339 else {340 max = this.isGetLander[2];341 this.Lander = 2;342 }343 if (max < this.isGetLander[3]) {344 max = this.isGetLander[3];345 this.Lander = 3;346 }347 if (max == 0) {348 alert('Game Over !');349 return;350 }351 352 var txt = max + '分';353 var t = {};354 var tObj = $.grep(this.Res.Images, function (o, i) { return o.type == 66; })[0];355 $.extend(t, tObj);//复制对象356 if (this.CurScore == 4) {357 txt = '不抢';358 }359 t.text = txt;360 t.x = postion[this.Lander].x;361 t.y = postion[this.Lander].y;362 t.visible = true;363 this.Controls.push(t);364 365 366 367 //this.drawImage($.proxy(function () { 368 369 // this.FanDiPai(this.Lander);370 //}, this));371 this.FanDiPai(this.Lander);372 return;373 }374 console.log('电脑抢地主');375 this.CurScore = Math.floor(Math.random() * (4 - minScore + 1) + minScore);376 377 this.isGetLander[firstGet] = this.CurScore == 4 ? -1 : this.CurScore;378 379 var txt = this.CurScore + '分';380 var t = {};381 var tObj = $.grep(this.Res.Images, function (o, i) { return o.type == 66; })[0];382 $.extend(t, tObj);//复制对象383 if (this.CurScore == 4) {384 txt = '不抢';385 }386 387 t.text = txt;388 t.x = postion[firstGet].x;389 t.y = postion[firstGet].y;390 t.visible = true;391 392 this.Controls.push(t);393 394 if (this.CurScore == 3) {395 this.Lander = firstGet;396 //DdZGame.Statics.IsGetLander = true;397 //DdZGame.Statics.DealTime = 0;398 399 var dz = {};400 $.extend(dz, tObj);//复制对象401 dz.text = '地主';402 dz.x = t.x + 30;403 dz.y = t.y;404 dz.visible = true;405 406 this.Controls.push(dz);407 408 //this.drawImage($.proxy(function () { this.Play(this.Lander, '电脑地主'); }, this));//电脑抢到地主优先出牌409 this.FanDiPai(this.Lander);410 return;411 }412 else {413 if (this.CurScore == 4) {414 var test = 'abcdefg';415 }416 var nextGet = firstGet == 1 ? 2 : 1;417 minScore = this.CurScore == 4 ? minScore : this.CurScore + 1;418 this.CurScore = this.CurScore == 4 ? 0 : this.CurScore;419 420 421 DdZGame.Statics.DealTime = 0;422 this.drawImage($.proxy(function () { this.GetLander(nextGet, minScore); }, this), true);//电脑抢到地主优先出牌423 return;424 }425 }426 }427 if (curScore) {428 /*代码写的很垃圾,这点没用面向对象*/429 /*My已经叫过地主，按钮需要隐藏*/430 $.each(this.Controls, $.proxy(function (i, o) {431 if (o.Lander) {432 o.visible = false;433 }434 }, this));435 436 this.CurScore = curScore;437 var txt = this.CurScore + '分';438 var t = {};439 var tObj = $.grep(this.Res.Images, function (o, i) { return o.type == 66; })[0];440 $.extend(t, tObj);//复制对象441 if (this.CurScore == 4) {442 txt = '不抢';443 }444 t.text = txt;445 t.x = postion[2].x;446 t.y = postion[2].y;447 t.visible = true;448 this.Controls.push(t);449 450 this.isGetLander[2] = curScore == 4 ? -1 : curScore;451 452 if (this.CurScore == 3 || (this.isGetLander[1] && this.isGetLander[3] && this.CurScore != 4)) {453 this.Lander = 2;454 //DdZGame.Statics.IsGetLander = true;455 //DdZGame.Statics.DealTime = 0;456 457 var dz = {};458 $.extend(dz, tObj);//复制对象459 dz.text = '地主';460 dz.x = t.x + 50;461 dz.y = t.y;462 dz.visible = true;463 464 this.Controls.push(dz);465 466 //this.drawImage($.proxy(function () { this.Play(this.Lander, '我是地主'); }, this), false);//电脑抢到地主优先出牌467 this.FanDiPai(this.Lander);468 return;469 }470 else {471 minScore = this.CurScore == 4 ? minScore : this.CurScore + 1;472 this.CurScore = this.CurScore == 4 ? 0 : this.CurScore;473 if (!this.isGetLander[3]) {474 DdZGame.Statics.DealTime = 0;475 this.drawImage($.proxy(function () { this.GetLander(3, minScore) }, this), true);476 return;477 }478 else { //已经转了一圈,则比较抢地主的分数大小479 var max = 0;480 if (this.isGetLander[1] > this.isGetLander[2]) {481 max = this.isGetLander[1];482 this.Lander = 1;483 }484 else {485 max = this.isGetLander[2];486 this.Lander = 2;487 }488 if (max < this.isGetLander[3]) {489 max = this.isGetLander[3];490 this.Lander = 3;491 }492 if (max == 0) {493 alert('Game Over !');494 return;495 }496 497 var txt = '地主';498 var t = {};499 var tObj = $.grep(this.Res.Images, function (o, i) { return o.type == 66; })[0];500 $.extend(t, tObj);//复制对象 501 t.text = txt;502 t.x = postion[this.Lander].x;503 t.y = postion[this.Lander].y;504 if (this.Lander != 2) {505 t.x += 30;506 }507 else {508 t.x += 50;509 }510 t.visible = true;511 this.Controls.push(t);512 513 514 //DdZGame.Statics.DealTime = 0;515 //this.drawImage($.proxy(function () { this.Play(this.Lander, '抢地主啊'); }, this), false);516 this.FanDiPai(this.Lander);517 return;518 }519 }520 }521 else if (this.isGetLander[2] == -1 || this.isGetLander[2]) {522 $.each(this.Controls, $.proxy(function (i, o) {523 if (o.Lander) {524 o.visible = false;525 }526 }, this));527 528 var max = 0;529 if (this.isGetLander[1] > this.isGetLander[2]) {530 max = this.isGetLander[1];531 this.Lander = 1;532 }533 else {534 max = this.isGetLander[2];535 this.Lander = 2;536 }537 if (max < this.isGetLander[3]) {538 max = this.isGetLander[3];539 this.Lander = 3;540 }541 if (max == 0) {542 alert('Game Over !');543 return;544 }545 546 var txt = max + '分';547 var t = {};548 var tObj = $.grep(this.Res.Images, function (o, i) { return o.type == 66; })[0];549 $.extend(t, tObj);//复制对象550 if (this.CurScore == 4) {551 txt = '不抢';552 }553 t.text = txt;554 t.x = postion[this.Lander].x;555 t.y = postion[this.Lander].y;556 t.visible = true;557 this.Controls.push(t);558 559 560 //DdZGame.Statics.DealTime = 0;561 //this.drawImage($.proxy(function () { this.Play(this.Lander, '抢地主啊'); }, this), false);562 this.FanDiPai(this.Lander);563 return;564 }565 //if (DdZGame.Statics.IsGetLander) { 566 // return;567 //}568 //DdZGame.Statics.IsGetLander = true;//是否在抢地主569 console.log('我抢地主');570 var btnObj = $.grep(this.Res.Images, $.proxy(function (o, i) {571 return o.type == 63;572 }, this))[0];573 if (!this.CurScore) {574 this.CurScore = 0;575 }576 var txtX = 0;577 for (var i = 1; i <= 3; i++) {578 if (i > this.CurScore) {579 var btn = {};580 $.extend(btn, btnObj);581 btn.text = i + '分';582 btn.x = this.myBtnPostion.x;583 btn.y = this.myBtnPostion.y;584 btn.visible = true;585 btn.type = 63;586 btn.textX = this.myBtnPostion.x + 30;587 btn.textY = 286;588 btn.h = 50;589 btn.w = 81;590 btn.Lander = true;591 btn.onClick = (function (i, obj) { return function () { obj.GetLander(3, i + 1, i); }; })(i, this)592 DdZGame.Statics.DealTime = 0;593 this.Controls.push(btn);594 this.myBtnPostion.x += btn.w + 10;595 }596 }597 if (DdZGame.Statics.DealTime == 0) {598 var btn = {};599 $.extend(btn, btnObj);600 btn.text = '不抢';601 btn.x = this.myBtnPostion.x;602 btn.y = this.myBtnPostion.y;603 btn.visible = true;604 btn.type = 63;605 btn.textX = this.myBtnPostion.x + 30;606 btn.textY = 286;607 btn.h = 50;608 btn.w = 81;609 btn.Lander = true;610 btn.onClick = $.proxy(function () { this.GetLander(3, minScore, 4); }, this);611 this.Controls.push(btn);612 this.drawImage(null, true);613 }614 },615 FanDiPai: function (lander) { //翻底牌616 DdZGame.Statics.DealTime = 0;617 var p = '';618 if (lander == 1) {619 p = 'rightPokers';620 }621 else if (lander == 2) {622 p = 'myPokers';623 }624 else if (lander == 3) {625 p = 'leftPokers';626 }627 /*谁抢到地主,底牌归谁*/628 $.each(this.LastPokers, $.proxy(function (i, o) {629 var c = {};630 $.extend(c, o);631 c.x = null;632 c.y = null;633 this[p].push(c);634 test = c.path;635 }, this));636 if (lander == 2) {637 this.myPokers.sort(function (a, b) {638 a.x = null;639 a.y = null;640 b.x = null;641 b.y = null;642 if (a.type != b.type)643 return b.type - a.type;644 return b.se - a.se;645 });646 this.myPannel = { x: 198, y: 330 };647 DdZGame.Statics['myPannel'] = null;648 }649 this.drawImage($.proxy(function () { this.isStart = true; this.Play(lander, '是地主啊'); }, this), false);650 },651 Play: function (lander, msg) { //出牌652 //alert('');653 }654 }); initialize：这个函数是构造函数，初始化一些起始变量。
initEvt这个里是初始化canvas事件,canvas点击事件不像svg那样，因为canvas是一帧一帧画上去的，html dom里是看不到里面的每个元素，javascript自然也无法获取到canvas里的某个元素,那canvas元素点击事件是怎么处理的了？
首先定义下canvas这个画布的事件，然后定义获取鼠标的坐标，再算出在canvas相对坐标，因为每个元素也都有自己的坐标和宽高，所以可以根据这个坐标判断这个坐标是否在某个元素内。
onControlClick：这个函数是根据上面算出的坐标，判断此坐标在哪个元素内，如果在元素内，并且定义了onclick函数(注:此处并不是真正的元素事件，只是对象的一个函数属性)，然后调用onclick函数，执行相应的代码。
loadImages：这个是加载所有图片，图片加载完成之后，就开始在canvas上画初始的元素。
init：这个函数就是调用loadImages函数，然后所有图片加载完毕之后，调用回调函数，在canvas上画初始的元素
Dealing ：这个是发牌，每方的牌都是随机的，if(DdZGame.Statics.DealedNums >= 51)发了51张牌之后，就剩3张底牌，然后再把这51张牌和3张底牌画在canvas上
GetLander ：这个是抢地主，谁先抢地主是随机的，如果是先随机到电脑抢地主，那抢地主的分数也是随机的。
...................................未完待续