现在我看了h5.zhengtuwl.comhtml5以及canvas相关知识和斗地主的demo后，自己用demo上的素材试着写了个斗地主，代码没重构好，欢迎赐教。

话不多说，下面就一步一步解释下吧

只有一个common.js 文件

1、资源类

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 }

]

});

Resource.Images是素材数组(几个按钮，文本，54张牌,背景图片等),大家可以下载demo看看

2、Lables类,在Canvas画布上画文本的,比如按钮文字,相关知识请看canvas教程

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);

}

});

这个类的方法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游戏类，主要功能就是初始化斗地主，发牌，抢地主等，出牌未完待续，后续更新

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('');

}

});

View Code

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 ：这个是抢地主，谁先抢地主是随机的，如果是先随机到电脑抢地主，那抢地主的分数也是随机的。