話不多說，下面就一步一步解釋下吧

只有一個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是素材數(shù)組(幾個按鈕，文本，54張牌,背景圖片等),大家可以下載demo看看
2、Lables類,在Canvas畫布上畫文本的,比如按鈕文字,相關(guān)知識請看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主要是根據(jù)設(shè)置的字體，字體大小，字體顏色，在Canvas上畫文本的，this.cxt這個是canvas上下文(每個教程的叫法不一樣)，首先this.cxt.font = bold 20px serif 這個是設(shè)置字體大小，樣式等，this.cxt.fillStyle = #000000 這個

是設(shè)置字體顏色，this.cxt.textAlign = center 這個是設(shè)置字體對齊方式,this.cxt.fillText(text, postion.x, postion.y);這個是開始在canvas上畫文本,postion.x, postion.y分別是x坐標和y坐標。

3、DdZGame游戲類，主要功能就是初始化斗地主，發(fā)牌，搶地主等，出牌未完待續(xù)，后續(xù)更新

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) {
/*發(fā)牌完畢*/
/*搶地主*/
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 () {//發(fā)牌
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) { //發(fā)牌完畢

$.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));//電腦搶到地主優(yōu)先出牌
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);//電腦搶到地主優(yōu)先出牌
return;
}
}
}
if (curScore) {
/*代碼寫的很垃圾,這點沒用面向?qū)ο?/u>*/
/*My已經(jīng)叫過地主，按鈕需要隱藏*/
$.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);//電腦搶到地主優(yōu)先出牌
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 { //已經(jīng)轉(zhuǎn)了一圈,則比較搶地主的分數(shù)大小
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 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：這個函數(shù)是構(gòu)造函數(shù)，初始化一些起始變量。

initEvt這個里是初始化canvas事件,canvas點擊事件不像svg那樣，因為canvas是一幀一幀畫上去的，html dom里是看不到里面的每個元素，javascript自然也無法獲取到canvas里的某個元素,那canvas元素點擊事件是怎么處理的了？

首先定義下canvas這個畫布的事件，然后定義獲取鼠標的坐標，再算出在canvas相對坐標，因為每個元素也都有自己的坐標和寬高，所以可以根據(jù)這個坐標判斷這個坐標是否在某個元素內(nèi)。

onControlClick：這個函數(shù)是根據(jù)上面算出的坐標，判斷此坐標在哪個元素內(nèi)，如果在元素內(nèi)，并且定義了onclick函數(shù)(注:此處并不是真正的元素事件，只是對象的一個函數(shù)屬性)，然后調(diào)用onclick函數(shù)，執(zhí)行相應(yīng)的代碼。

loadImages：這個是加載所有圖片，圖片加載完成之后，就開始在canvas上畫初始的元素。

init：這個函數(shù)就是調(diào)用loadImages函數(shù)，然后所有圖片加載完畢之后，調(diào)用回調(diào)函數(shù)，在canvas上畫初始的元素

Dealing ：這個是發(fā)牌，每方的牌都是隨機的，if(DdZGame.Statics.DealedNums = 51)發(fā)了51張牌之后，就剩3張底牌，然后再把這51張牌和3張底牌畫在canvas上

GetLander ：這個是搶地主，誰先搶地主是隨機的，如果是先隨機到電腦搶地主，那搶地主的分數(shù)也是隨機的。

以上就是Html5斗地主棋牌架設(shè)Canvas實現(xiàn)斗地主游戲代碼解析的詳細內(nèi)容，其它編程語言

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。