Html5Canvas实现斗地主游戏的示例代码分析

var Resource = Class.create();
$.extend(Resource.prototype, {
 initialize: function () { },
 Images: [
 { path: 'img/bg1.png', x: 0, y: 0, w: 800, h: 480, data: null, type: 61, visible: true },
 { path: 'img/BeiMian.jpg', x: 320, y: 5, w: 100, h: 121, data: null, type: 62, visible: true },
 { path: 'img/btn.jpg', x: 300, y: 281, w: 140, h: 50, data: null, type: 63, visible: true, text: '开始', textX: 366, textY: 310 },
 { x: 0, y: 0, type: 66, isText: true, visible: false },
 { path: 'img/1.jpg', data: null, type: 16, visible: false },
 { path: 'img/2.jpg', data: null, type: 17, visible: false },
 { path: 'img/3.jpg', data: null, type: 3, visible: false, se: 1 },
 { path: 'img/4.jpg', data: null, type: 4, visible: false, se: 1 },
 { path: 'img/5.jpg', data: null, type: 5, visible: false, se: 1 },
 { path: 'img/6.jpg', data: null, type: 6, visible: false, se: 1 },
 { path: 'img/7.jpg', data: null, type: 7, visible: false, se: 1 },
 { path: 'img/8.jpg', data: null, type: 8, visible: false, se: 1 },
 { path: 'img/9.jpg', data: null, type: 9, visible: false, se: 1 },
 { path: 'img/10.jpg', data: null, type: 10, visible: false, se: 1 },
 { path: 'img/11.jpg', data: null, type: 11, visible: false, se: 1 },
 { path: 'img/12.jpg', data: null, type: 12, visible: false, se: 1 },
 { path: 'img/13.jpg', data: null, type: 13, visible: false, se: 1 },
 { path: 'img/14.jpg', data: null, type: 14, visible: false, se: 1 },
 { path: 'img/15.jpg', data: null, type: 15, visible: false, se: 1 },
 { path: 'img/16.jpg', data: null, type: 3, visible: false, se: 4 },
 { path: 'img/17.jpg', data: null, type: 4, visible: false, se: 4 },
 { path: 'img/18.jpg', data: null, type: 5, visible: false, se: 4 },
 { path: 'img/19.jpg', data: null, type: 6, visible: false, se: 4 },
 { path: 'img/20.jpg', data: null, type: 7, visible: false, se: 4 },
 { path: 'img/21.jpg', data: null, type: 8, visible: false, se: 4 },
 { path: 'img/22.jpg', data: null, type: 9, visible: false, se: 4 },
 { path: 'img/23.jpg', data: null, type: 10, visible: false, se: 4 },
 { path: 'img/24.jpg', data: null, type: 11, visible: false, se: 4 },
 { path: 'img/25.jpg', data: null, type: 12, visible: false, se: 4 },
 { path: 'img/26.jpg', data: null, type: 13, visible: false, se: 4 },
 { path: 'img/27.jpg', data: null, type: 14, visible: false, se: 4 },
 { path: 'img/28.jpg', data: null, type: 15, visible: false, se: 4 },
 { path: 'img/29.jpg', data: null, type: 3, visible: false, se: 3 },
 { path: 'img/30.jpg', data: null, type: 4, visible: false, se: 3 },
 { path: 'img/31.jpg', data: null, type: 5, visible: false, se: 3 },
 { path: 'img/32.jpg', data: null, type: 6, visible: false, se: 3 },
 { path: 'img/33.jpg', data: null, type: 7, visible: false, se: 3 },
 { path: 'img/34.jpg', data: null, type: 8, visible: false, se: 3 },
 { path: 'img/35.jpg', data: null, type: 9, visible: false, se: 3 },
 { path: 'img/36.jpg', data: null, type: 10, visible: false, se: 3 },
 { path: 'img/37.jpg', data: null, type: 11, visible: false, se: 3 },
 { path: 'img/38.jpg', data: null, type: 12, visible: false, se: 3 },
 { path: 'img/39.jpg', data: null, type: 13, visible: false, se: 3 },
 { path: 'img/40.jpg', data: null, type: 14, visible: false, se: 3 },
 { path: 'img/41.jpg', data: null, type: 15, visible: false, se: 3 },
 { path: 'img/42.jpg', data: null, type: 3, visible: false, se: 2 },
 { path: 'img/43.jpg', data: null, type: 4, visible: false, se: 2 },
 { path: 'img/44.jpg', data: null, type: 5, visible: false, se: 2 },
 { path: 'img/45.jpg', data: null, type: 6, visible: false, se: 2 },
 { path: 'img/46.jpg', data: null, type: 7, visible: false, se: 2 },
 { path: 'img/47.jpg', data: null, type: 8, visible: false, se: 2 },
 { path: 'img/48.jpg', data: null, type: 9, visible: false, se: 2 },
 { path: 'img/49.jpg', data: null, type: 10, visible: false, se: 2 },
 { path: 'img/50.jpg', data: null, type: 11, visible: false, se: 2 },
 { path: 'img/51.jpg', data: null, type: 12, visible: false, se: 2 },
 { path: 'img/52.jpg', data: null, type: 13, visible: false, se: 2 },
 { path: 'img/53.jpg', data: null, type: 14, visible: false, se: 2 },
 { path: 'img/54.jpg', data: null, type: 15, visible: false, se: 2 }
 ]
});

var Labels = Class.create();
$.extend(Labels.prototype, {
 initialize: function (cxt) {
 this.cxt = cxt;
 },
 setText: function (text, postion) {
 this.cxt.font = 'bold 20px serif';
 this.cxt.fillStyle = '#000000';
 this.cxt.textAlign = 'center';
 this.cxt.fillText(text, postion.x, postion.y);
 }
});

var DdZGame = Class.create();
DdZGame.Statics = { DealedNums: 0, isLeftFirstDeal: true };
$.extend(DdZGame.prototype, {
 initialize: function () {
 DdZGame.Statics.IsGetLander = false;
 DdZGame.Statics.DealTime = 66;
 this.leftPokers = [];
 this.rightPokers = [];
 this.myPokers = [];
 this.LastPokers = [];//最后3张牌

 this.leftPlays = [];
 this.rightPlays = [];
 this.myPlays = [];

 this.myBtnPostion = { y: 245, x: 162 };

 this.isStart = false;

 this.Res = new Resource();

 this.allPokers = new Array();

 this.Lander = 0;//地主,1右边,2My,3左边
 this.isGetLander = {};
 this.GmCanvas = document.getElementById('gmCanvas');


 this.cxt = this.GmCanvas.getContext('2d');
 this.Lbl = new Labels(this.cxt);
 this.init();
 this.initEvt();
 },
 initEvt: function () {
 this.GmCanvas.onclick = $.proxy(function (e) {
 var box = this.GmCanvas.getBoundingClientRect();

 DdZGame.Statics.MousePostion = { x: e.pageX - box.left, y: e.pageY - box.top };
 this.onControlClick();
 }, this);
 },
 onControlClick: function () {
 var isClick = false;
 for (var i = 0; i < this.Controls.length; i++) {
 var c = this.Controls[i];
 var postion = DdZGame.Statics.MousePostion;
 if (c.onClick) {
 if (postion.x >= c.x && postion.x <= c.x + c.w && postion.y >= c.y && postion.y <= c.y + c.h) {
 c.onClick();
 isClick = true;
 break;
 }
 }
 }
 if (!isClick) {
 for (var i = 0; i < this.myPokers.length; i++) {
 var c = this.myPokers[i];
 var postion = DdZGame.Statics.MousePostion;
 if (c.onClick) {
 if (postion.x >= c.x && postion.x <= c.x + c.w && postion.y >= c.y && postion.y <= c.y + c.h) {
 c.onClick();
 isClick = true;
 break;
 }
 }
 }
 }
 },
 loadImages: function (callback) {
 var loadedNums = 0;
 var totalNums = this.Res.Images.length - 1;
 this.Controls = [];
 $.each(this.Res.Images, $.proxy(function (i, o) {
 if (!o.path) {
 return true;
 }
 o.data = new Image();
 o.data.src = o.path;
 o.data.onload = $.proxy(function () {
 if (o.type <= 17) {
 this.allPokers.push(o);
 }
 else
 this.Controls.push(o);


 loadedNums++;
 if (loadedNums >= totalNums) {
 callback.call(this);
 }
 }, this);
 }, this));
 },
 drawImage: function (callback, isUnVisibleLast) {//isVisibleLast 是否让底牌不可见
 $.each(this.Controls, $.proxy(function (i, o) {
 if (!o.visible)
 return true;
 if (o.type == 62) {
 var x = 0;
 for (var i = 0; i < 54 - DdZGame.Statics.DealedNums ; i++) {
 if (i == 0) x = o.x;
 this.cxt.drawImage(o.data, o.x, o.y, o.w, o.h);
 o.x++;
 }
 o.x = x;
 }
 else if (!o.isText) {
 this.cxt.drawImage(o.data, o.x, o.y, o.w, o.h);
 }
 if (o.type == 63) {
 this.Lbl.setText(o.text, { x: o.textX, y: o.textY });



 if (!o.onClick)
 o.onClick = $.proxy(function () {
 o.onClick = null;
 o.visible = false;
 this.drawImage();
 this.Dealing();
 }, this);
 }

 if (o.type == 66) {
 this.Lbl.setText(o.text, { x: o.x, y: o.y });
 }
 }, this));


 /*克隆*/
 var copyLeftPokers = this.leftPokers.slice();
 var copyRightPokers = this.rightPokers.slice();
 var copyMyPokers = this.myPokers.slice();
 var copyLastPokers = this.LastPokers.slice();

 var isDealEndLeft = false;
 var isDealEndRight = false;
 var isDealEndMy = false;
 var isDealEndLast = false;

 var beiMain = $.grep(this.Res.Images, $.proxy(function (o, i) { return o.type == 62; }, this))[0];
 var DrawPokers = function (arry, direction, isBeiMian, identiy, axis) {
 if (arry && arry.length > 0) {
 var o = arry[0];
 var x = 0, y = 0;


 if (!DdZGame.Statics[direction]) {
 DdZGame.Statics[direction] = this[direction];
 }

 if (!o.x) {
 x = DdZGame.Statics[direction].x;
 y = DdZGame.Statics[direction].y;

 o.x = this[direction].x;
 o.y = this[direction].y;
 }
 else {
 x = o.x;
 y = o.y;
 }


 if (!o.visible) {
 return true;
 }



 o.w = 18;
 o.h = 129;
 if (arry.length == 1) {
 o.w = 105;
 o.h = 150;
 }







 var img = o.data;
 if (isBeiMian) {
 img = beiMain.data;
 }
 else if (direction == 'myPannel') {
 o.onClick = $.proxy(function () {
 if (!this.isStart)
 return;
 if (!o.isPlay) {
 o.isPlay = true;
 o.y -= 30;
 }
 else {
 o.isPlay = false;
 o.y += 30;
 }

 DdZGame.Statics.DealTime = 0;
 this.drawImage();
 }, this);
 }
 this.cxt.drawImage(img, x, y);
 DdZGame.Statics[direction][axis] += identiy;

 arry.splice(0, 1);
 if (DdZGame.Statics.DealTime > 0)
 DdZGame.Statics[direction + 'handle'] = setTimeout($.proxy(function () {
 DrawPokers.call(this, arry, direction, isBeiMian, identiy, axis);
 }, this), DdZGame.Statics.DealTime);
 else
 DrawPokers.call(this, arry, direction, isBeiMian, identiy, axis);
 }
 else if (DdZGame.Statics[direction + 'handle'] || DdZGame.Statics.DealTime == 0) {
 clearTimeout(DdZGame.Statics[direction + 'handle']);


 if (direction == 'leftPannel' && copyLeftPokers.length == 0) {
 isDealEndLeft = true;
 }
 if (direction == 'rightPannel' && copyRightPokers.length == 0) {
 isDealEndRight = true;
 }
 if (direction == 'myPannel' && copyMyPokers.length == 0) {
 isDealEndMy = true;
 }
 if (direction == 'lastPannel' && copyLastPokers.length == 0) {
 isDealEndLast = true;
 }
 if (isDealEndLeft && isDealEndRight && isDealEndMy && isDealEndLast) {
 /*发牌完毕*/
 /*抢地主*/
 if (callback)
 callback();
 }
 }
 };


 DrawPokers.call(this, copyLeftPokers, 'leftPannel', true, 26, 'y');
 DrawPokers.call(this, copyRightPokers, 'rightPannel', true, 26, 'y');
 DrawPokers.call(this, copyMyPokers, 'myPannel', false, 19, 'x');

 DrawPokers.call(this, copyLastPokers, 'lastPannel', isUnVisibleLast, 126, 'x');
 },
 init: function () {
 this.loadImages(this.drawImage);
 },
 Dealing: function () {//发牌 
 this.leftPannel = { x: 5, y: 18 };
 this.rightPannel = { x: 691, y: 18 };
 this.myPannel = { x: 198, y: 330 };
 this.lastPannel = { x: 243, y: 5 };


 if (DdZGame.Statics.DealedNums >= 51) { //发牌完毕 

 $.each(this.allPokers, $.proxy(function (i, o) {
 o.visible = true;
 this.LastPokers.push(o);
 }, this));


 this.myPokers.sort(function (a, b) {
 if (a.type != b.type)
 return b.type - a.type;
 return b.se - a.se;
 });
 $.grep(this.Res.Images, $.proxy(function (o, i) { return o.type == 62; }, this))[0].visible = false;
 this.drawImage($.proxy(function () { this.GetLander(); }, this), true);

 }
 else {
 /*1、left*/
 var index = Math.floor(Math.random() * (this.allPokers.length - 1) + 0);
 var c = this.allPokers.splice(index, 1);
 c[0].visible = true;
 this.leftPokers.push(c[0]);
 DdZGame.Statics.DealedNums++;

 /*2、right*/
 index = Math.floor(Math.random() * (this.allPokers.length - 1) + 0);
 c = this.allPokers.splice(index, 1);
 c[0].visible = true;
 this.rightPokers.push(c[0]);
 DdZGame.Statics.DealedNums++;

 index = Math.floor(Math.random() * (this.allPokers.length - 1) + 0);
 c = this.allPokers.splice(index, 1);
 c[0].visible = true;
 this.myPokers.push(c[0]);
 DdZGame.Statics.DealedNums++;

 this.Dealing();
 }
 },
 GetLander: function (firstGet, minScore, curScore) {
 /*随机出谁先叫地主*/

 //if (curScore && !this.isGetLander[1] && !this.isGetLander[2] && !this.isGetLander[3]) {
 // //**Game Over !
 // alert('无人抢地主');
 // return;
 //}


 var postion = { 1: { y: 100, x: 640 }, 3: { y: 100, x: 126 }, 2: { x: 216, y: 297 } };
 if (!curScore) {
 if (!minScore)
 minScore = 1;
 if (!firstGet)
 firstGet = Math.floor(Math.random() * (3 - 1 + 1) + 1);
 if (firstGet == 1 || firstGet == 3) { //电脑抢地主
 if (this.isGetLander[firstGet] == -1 || this.isGetLander[firstGet]) {
 $.each(this.Controls, $.proxy(function (i, o) {
 if (o.Lander) {
 o.visible = false;
 }
 }, this));

 var max = 0;
 if (this.isGetLander[1] > this.isGetLander[2]) {
 max = this.isGetLander[1];
 this.Lander = 1;
 }
 else {
 max = this.isGetLander[2];
 this.Lander = 2;
 }
 if (max < this.isGetLander[3]) {
 max = this.isGetLander[3];
 this.Lander = 3;
 }
 if (max == 0) {
 alert('Game Over !');
 return;
 }

 var txt = max + '分';
 var t = {};
 var tObj = $.grep(this.Res.Images, function (o, i) { return o.type == 66; })[0];
 $.extend(t, tObj);//复制对象
 if (this.CurScore == 4) {
 txt = '不抢';
 }
 t.text = txt;
 t.x = postion[this.Lander].x;
 t.y = postion[this.Lander].y;
 t.visible = true;
 this.Controls.push(t);



 //this.drawImage($.proxy(function () {

 // this.FanDiPai(this.Lander);
 //}, this));
 this.FanDiPai(this.Lander);
 return;
 }
 console.log('电脑抢地主');
 this.CurScore = Math.floor(Math.random() * (4 - minScore + 1) + minScore);

 this.isGetLander[firstGet] = this.CurScore == 4 ? -1 : this.CurScore;

 var txt = this.CurScore + '分';
 var t = {};
 var tObj = $.grep(this.Res.Images, function (o, i) { return o.type == 66; })[0];
 $.extend(t, tObj);//复制对象
 if (this.CurScore == 4) {
 txt = '不抢';
 }

 t.text = txt;
 t.x = postion[firstGet].x;
 t.y = postion[firstGet].y;
 t.visible = true;

 this.Controls.push(t);

 if (this.CurScore == 3) {
 this.Lander = firstGet;
 //DdZGame.Statics.IsGetLander = true;
 //DdZGame.Statics.DealTime = 0;

 var dz = {};
 $.extend(dz, tObj);//复制对象
 dz.text = '地主';
 dz.x = t.x + 30;
 dz.y = t.y;
 dz.visible = true;

 this.Controls.push(dz);

 //this.drawImage($.proxy(function () { this.Play(this.Lander, '电脑地主'); }, this));//电脑抢到地主优先出牌
 this.FanDiPai(this.Lander);
 return;
 }
 else {
 if (this.CurScore == 4) {
 var test = 'abcdefg';
 }
 var nextGet = firstGet == 1 ? 2 : 1;
 minScore = this.CurScore == 4 ? minScore : this.CurScore + 1;
 this.CurScore = this.CurScore == 4 ? 0 : this.CurScore;


 DdZGame.Statics.DealTime = 0;
 this.drawImage($.proxy(function () { this.GetLander(nextGet, minScore); }, this), true);//电脑抢到地主优先出牌
 return;
 }
 }
 }
 if (curScore) {
 /*代码写的很垃圾,这点没用面向对象*/
 /*My已经叫过地主，按钮需要隐藏*/
 $.each(this.Controls, $.proxy(function (i, o) {
 if (o.Lander) {
 o.visible = false;
 }
 }, this));

 this.CurScore = curScore;
 var txt = this.CurScore + '分';
 var t = {};
 var tObj = $.grep(this.Res.Images, function (o, i) { return o.type == 66; })[0];
 $.extend(t, tObj);//复制对象
 if (this.CurScore == 4) {
 txt = '不抢';
 }
 t.text = txt;
 t.x = postion[2].x;
 t.y = postion[2].y;
 t.visible = true;
 this.Controls.push(t);

 this.isGetLander[2] = curScore == 4 ? -1 : curScore;

 if (this.CurScore == 3 || (this.isGetLander[1] && this.isGetLander[3] && this.CurScore != 4)) {
 this.Lander = 2;
 //DdZGame.Statics.IsGetLander = true;
 //DdZGame.Statics.DealTime = 0;

 var dz = {};
 $.extend(dz, tObj);//复制对象
 dz.text = '地主';
 dz.x = t.x + 50;
 dz.y = t.y;
 dz.visible = true;

 this.Controls.push(dz);

 //this.drawImage($.proxy(function () { this.Play(this.Lander, '我是地主'); }, this), false);//电脑抢到地主优先出牌
 this.FanDiPai(this.Lander);
 return;
 }
 else {
 minScore = this.CurScore == 4 ? minScore : this.CurScore + 1;
 this.CurScore = this.CurScore == 4 ? 0 : this.CurScore;
 if (!this.isGetLander[3]) {
 DdZGame.Statics.DealTime = 0;
 this.drawImage($.proxy(function () { this.GetLander(3, minScore) }, this), true);
 return;
 }
 else { //已经转了一圈,则比较抢地主的分数大小
 var max = 0;
 if (this.isGetLander[1] > this.isGetLander[2]) {
 max = this.isGetLander[1];
 this.Lander = 1;
 }
 else {
 max = this.isGetLander[2];
 this.Lander = 2;
 }
 if (max < this.isGetLander[3]) {
 max = this.isGetLander[3];
 this.Lander = 3;
 }
 if (max == 0) {
 alert('Game Over !');
 return;
 }

 var txt = '地主';
 var t = {};
 var tObj = $.grep(this.Res.Images, function (o, i) { return o.type == 66; })[0];
 $.extend(t, tObj);//复制对象 
 t.text = txt;
 t.x = postion[this.Lander].x;
 t.y = postion[this.Lander].y;
 if (this.Lander != 2) {
 t.x += 30;
 }
 else {
 t.x += 50;
 }
 t.visible = true;
 this.Controls.push(t);


 //DdZGame.Statics.DealTime = 0;
 //this.drawImage($.proxy(function () { this.Play(this.Lander, '抢地主啊'); }, this), false);
 this.FanDiPai(this.Lander);
 return;
 }
 }
 }
 else if (this.isGetLander[2] == -1 || this.isGetLander[2]) {
 $.each(this.Controls, $.proxy(function (i, o) {
 if (o.Lander) {
 o.visible = false;
 }
 }, this));

 var max = 0;
 if (this.isGetLander[1] > this.isGetLander[2]) {
 max = this.isGetLander[1];
 this.Lander = 1;
 }
 else {
 max = this.isGetLander[2];
 this.Lander = 2;
 }
 if (max < this.isGetLander[3]) {
 max = this.isGetLander[3];
 this.Lander = 3;
 }
 if (max == 0) {
 alert('Game Over !');
 return;
 }

 var txt = max + '分';
 var t = {};
 var tObj = $.grep(this.Res.Images, function (o, i) { return o.type == 66; })[0];
 $.extend(t, tObj);//复制对象
 if (this.CurScore == 4) {
 txt = '不抢';
 }
 t.text = txt;
 t.x = postion[this.Lander].x;
 t.y = postion[this.Lander].y;
 t.visible = true;
 this.Controls.push(t);


 //DdZGame.Statics.DealTime = 0;
 //this.drawImage($.proxy(function () { this.Play(this.Lander, '抢地主啊'); }, this), false);
 this.FanDiPai(this.Lander);
 return;
 }
 //if (DdZGame.Statics.IsGetLander) {
 // return;
 //}
 //DdZGame.Statics.IsGetLander = true;//是否在抢地主
 console.log('我抢地主');
 var btnObj = $.grep(this.Res.Images, $.proxy(function (o, i) {
 return o.type == 63;
 }, this))[0];
 if (!this.CurScore) {
 this.CurScore = 0;
 }
 var txtX = 0;
 for (var i = 1; i <= 3; i++) {
 if (i > this.CurScore) {
 var btn = {};
 $.extend(btn, btnObj);
 btn.text = i + '分';
 btn.x = this.myBtnPostion.x;
 btn.y = this.myBtnPostion.y;
 btn.visible = true;
 btn.type = 63;
 btn.textX = this.myBtnPostion.x + 30;
 btn.textY = 286;
 btn.h = 50;
 btn.w = 81;
 btn.Lander = true;
 btn.onClick = (function (i, obj) { return function () { obj.GetLander(3, i + 1, i); }; })(i, this)
 DdZGame.Statics.DealTime = 0;
 this.Controls.push(btn);
 this.myBtnPostion.x += btn.w + 10;
 }
 }
 if (DdZGame.Statics.DealTime == 0) {
 var btn = {};
 $.extend(btn, btnObj);
 btn.text = '不抢';
 btn.x = this.myBtnPostion.x;
 btn.y = this.myBtnPostion.y;
 btn.visible = true;
 btn.type = 63;
 btn.textX = this.myBtnPostion.x + 30;
 btn.textY = 286;
 btn.h = 50;
 btn.w = 81;
 btn.Lander = true;
 btn.onClick = $.proxy(function () { this.GetLander(3, minScore, 4); }, this);
 this.Controls.push(btn);
 this.drawImage(null, true);
 }
 },
 FanDiPai: function (lander) {//翻底牌
 DdZGame.Statics.DealTime = 0;
 var p = '';
 if (lander == 1) {
 p = 'rightPokers';
 }
 else if (lander == 2) {
 p = 'myPokers';
 }
 else if (lander == 3) {
 p = 'leftPokers';
 }
 /*谁抢到地主,底牌归谁*/
 $.each(this.LastPokers, $.proxy(function (i, o) {
 var c = {};
 $.extend(c, o);
 c.x = null;
 c.y = null;
 this[p].push(c);
 test = c.path;
 }, this));
 if (lander == 2) {
 this.myPokers.sort(function (a, b) {
 a.x = null;
 a.y = null;
 b.x = null;
 b.y = null;
 if (a.type != b.type)
 return b.type - a.type;
 return b.se - a.se;
 });
 this.myPannel = { x: 198, y: 330 };
 DdZGame.Statics['myPannel'] = null;
 }
 this.drawImage($.proxy(function () { this.isStart = true; this.Play(lander, '是地主啊'); }, this), false);
 },
 Play: function (lander, msg) {//出牌
 //alert('');
 }
});