HTML5 Doudizhu チェスとカードのキャンバスをセットアップして、Doudizhu ゲーム コード分析を実現します

h5.zhengtuwl.comhtml5 と Canvas 関連の知識と Doudizhu のデモを読んだ後、デモの資料を使用して Doudizhu を作成しようとしましたが、コードがうまくリファクタリングされませんでした。

あまり言うことはありません。順を追って説明しましょう

common.js ファイルは 1 つだけです

1 のリソース クラスです。

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

Resource.Images是素材数组(几个按钮、文本、54张牌、背景图片等)、大家可下載デモ看看
2、Lables类、在Canvas画布上画文本的,比如按钮文字,相关知识请看canvas教程

var Labels = Class.create();
$.extend(Labels.prototype, {
initialize: function (cxt) {
this.cxt = cxt ;
}、
settext：function（text、posion）{
this.cxt.font = 'bold 20px serif';
this.cxt.fillText(text, postion.x, postion.y);
}
});


这个类的方法setText主是据置的字体，字体大小，字体颜色，在キャンバス上画文本，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);これはキャンバスで始まります

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;

これ.res = new Resource（）; = 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;私は＜ this.Controls.length; i++) {
var c = this.Controls[i];
var postion = DdZGame.Statics.MousePostion;
if (c.onClick) {
if (postion.x >= c.x & & 位置.x <= c.x + c.w && postion.y >= c.y && postion.y c.onClick();
isClick = true;
break;
}
}
}
if (!isClick) {
for (var i = 0; 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 ;
休憩;
}
}
}
},
loadImages: function (コールバック) {
varloadedNums = 0;
var totalNums = this.Res.Images.length - 1;
this.Controls = [] ;
$.each(this.Res.Images, $.proxy(function (i, o) {
if (!o.path) {
true;
}
o.data = new画像();
o .data.src = o.path;
o.data.onload = $.proxy(function () {
if (o.type <= 17) {
                   this.allPokers.push(o);
}
else
this.Controls.push(o);


loadedNum s++;
if (loadedNums >= totalNums) {
callback.call(this);
}
} , this);
}, this));
},
drawImage: function (callback, isUnVisibleLast) {//isVisibleLast 否让底不可牌见
$.each(this.Controls, $.proxy(function (i, o ) {
if (!o.visible)
true;
if (o.type == 62) {
var x = 0;
for (var i = 0; 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();
}

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, 方向, isBeiMian, identiy, axis) {
if (arry && arry.length > 0) {
var o = arry[0];
var x = 0, y = 0;


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

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

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


if (!o.visible) {
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[方向][軸] += 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);
}、これ）、DdZGame。 Statics.DealTime);
else
DrawPokers.call(this, arry, 方向, isBeiMian, identiy, axis);
}
else if (DdZ Game.Statics[方向 + 'ハンドル'] || 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' && copyMyPoker s.length == 0) {
isDealEndMy = true;
}
if (direction == 'lastPannel' && copyLastPokers.length == 0) {
isDealEndLast = true;
}
if (isDealEndLeft && isDealEndRight && DealEndMy && isDealEndLast) {
/*発行牌完毕*/
/*抢地主* /
if (コールバック)
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.可視 = 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*/
varindex = 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*/
Math.floor (Math.random() * (これ.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, core) {
/*随机出谁先叫地主*/

//if (curScore && !this.isGetLander[1] && !this.isGetLander[2] && !this.isGetLander[3]) {
// //**ゲームオーバー!
/ / 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('ゲームオーバー!') ;
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.F anDiPai(this.Lander);
return;
}
console.log('电脑抢地主');
this.CurScore = Math.floor(Math.random() * (4 - minScore + 1) + minScore);

this.isGetLander[firstGet] = これ。 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) {
/*代序写的很垃圾,この点不用面向对象*/
/*家主に電話したので、ボタンを非表示にする必要があります*/ } }
This var tObj = $.grep(this.Res.Images, function ( o, i) { return o.type == 66; }) [0];
';
45
this.controls.push（t）; | (this.isGetLander[1] && this.isGetLander[3] && this.CurScore != 4 )) {
this.Lander = 2; var dz = {};
$.extend(dz, tObj);オブジェクトをコピーします
dz.text = 'Landlord';
dz. true;

this.Controls.push(dz); /this.drawImage($.proxy(function () { this.Play(this.Lander, 'I私は家主です'); }, this), false);//コンピューターは家主を掴んで最初にカードをプレイします
This.FanDiPai(this.Lander);

This.CurScore = this.CurScore == 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] & gt; this. ISGETLANDER [2]）{Max = thisgetlander [1];                       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;
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 (これ.isGetLander[2] == -1 || this.isGetLander[2]) {
$.each(this.Controls, $.proxy(function (i, o) {
if (o.Lander) {
o.visible = false;
}
}、これ） );

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('ゲームオーバー!');
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++) {
場合(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.myBtnPosition.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 (着陸船 == 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('');
}
});

コードを表示

initialize：この関数は構築関数、初期化された開始量です。

initEvtここは初期化されたcanvasイベント、canvaです点击イベント不像 svg那样，因canvas是一帧画上去，html dom里在看不到此面的各要素，javascript自然的不法取取到canvas里的特定要素，那canvas元素点击イベント是怎么処理の完了?

最初にキャンバスの下にあるこの画布のイベントを決定し、次にマウスマークの座標を決定し、キャンバスの相対的な座標を再計算します。これは、各要素も独自の座標と高さを持っているため、この座標に基づいてこれを判断できます。

onControlClick: この関数は、上で計算された座標に基づいて、その座標がエレメント内にあるかどうかを判断し、エレメント内にある場合は、onclick 関数を定義します (注: ここは真のエレメント イベントではありません)

loadImages: これはすべての画像をロードし、画像の追加が完了すると、キャンバス上の最初の要素が開始されます。

init: この関数つまり、loadImages 関数を使用し、その後すべての画像の追加が完了した後、回调関数を使用し、キャンバス上の最初の要素

Dealing : これは発行牌、每方的牌都は随机的、if(DdZGame.Statics.DealedNums > = 51) 発行51张牌之後，就剩3张底牌，その後再びこの51张牌と3张底牌画をキャンバス上に

GetLander ：これは抢地主，谁先抢地主は随机的，如果是先は電気的にマスターであり、同様にマスターの分数も同様です。

以上がHTML5 Doudizhu チェスとカードのキャンバスをセットアップして、Doudizhu ゲーム コード分析を実現しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。