Html5 Canvas斗地主游戏

  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                 else
225                     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 });