Nachdem ich nun h5.zhengtuwl.comhtml5 und Canvas-bezogenes Wissen sowie die Demo von Doudizhu gelesen hatte, habe ich versucht, ein Doudizhu mit den Materialien in der Demo zu schreiben. Ich begrüße Ihren Rat.
Es gibt nicht viel zu sagen, lass es uns Schritt für Schritt erklären
Es gibt nur eine common.js-Datei
1. Ressourcenklasse
var Resource = Class.create();
$.extend(Resource.prototype, {
initialize: function () { },
Bilder: [
{ path: 'img/ bg1.png', x: 0, y: 0, w: 800, h: 480, Daten: null, Typ: 61, sichtbar: wahr },
{ path: 'img/BeiMian.jpg', x: 320, y: 5, w: 100, h: 121, Daten: null, Typ: 62, sichtbar: true },
{ path: 'img/btn.jpg', x: 300, y: 281, w : 140, h: 50, Daten: null, Typ: 63, sichtbar: wahr, Text: '开始', textX: 366, textY: 310 },
{ x: 0, y: 0, Typ: 66, isText: wahr, sichtbar: falsch },
{ Pfad: 'img/1.jpg', Daten: null, Typ: 16, sichtbar: falsch },
{ Pfad: 'img/2.jpg', Daten: null, Typ: 17, sichtbar: falsch },
{ Pfad: 'img/3.jpg', Daten: null, Typ: 3, sichtbar: falsch, se: 1 },
{ Pfad: 'img/4.jpg', Daten: null, Typ: 4, sichtbar: falsch, se: 1 },
{ Pfad: 'img/5.jpg', Daten: null, Typ: 5, sichtbar: falsch , se: 1 },
{ Pfad: 'img/6.jpg', Daten: null, Typ: 6, sichtbar: falsch, se: 1 },
{ Pfad: 'img/7.jpg' , Daten: null, Typ: 7, sichtbar: falsch, se: 1 },
{ Pfad: 'img/8.jpg', Daten: null, Typ: 8, sichtbar: falsch, se: 1 },
{ Pfad: 'img/9.jpg', Daten: null, Typ: 9, sichtbar: falsch, se: 1 },
{ Pfad: 'img/10.jpg', Daten: null, Typ: 10, sichtbar: falsch, se: 1 },
{ Pfad: 'img/11.jpg', Daten: null, Typ: 11, sichtbar: falsch, se: 1 },
{ Pfad: 'img /12.jpg', Daten: null, Typ: 12, sichtbar: falsch, se: 1 },
{ Pfad: 'img/13.jpg', Daten: null, Typ: 13, sichtbar: falsch, se : 1 },
{ Pfad: 'img/14.jpg', Daten: null, Typ: 14, sichtbar: falsch, se: 1 },
{ Pfad: 'img/15.jpg', Daten : null, Typ: 15, sichtbar: falsch, se: 1 },
{ Pfad: 'img/16.jpg', Daten: null, Typ: 3, sichtbar: falsch, se: 4 },
{ Pfad: 'img/17.jpg', Daten: null, Typ: 4, sichtbar: falsch, se: 4 },
{ Pfad: 'img/18.jpg', Daten: null, Typ: 5, sichtbar: falsch, se: 4 },
{ Pfad: 'img/19.jpg', Daten: null, Typ: 6, sichtbar: falsch, se: 4 },
{ Pfad: 'img/20 .jpg', Daten: null, Typ: 7, sichtbar: falsch, se: 4 },
{ Pfad: 'img/21.jpg', Daten: null, Typ: 8, sichtbar: falsch, se: 4 },
{ Pfad: 'img/22.jpg', Daten: null, Typ: 9, sichtbar: falsch, se: 4 },
{ Pfad: 'img/23.jpg', Daten: null , Typ: 10, sichtbar: falsch, se: 4 },
{ Pfad: 'img/24.jpg', Daten: null, Typ: 11, sichtbar: falsch, se: 4 },
{ Pfad : 'img/25.jpg', Daten: null, Typ: 12, sichtbar: falsch, se: 4 },
{ Pfad: 'img/26.jpg', Daten: null, Typ: 13, sichtbar: false, se: 4 },
{ path: 'img/27.jpg', Daten: null, Typ: 14, sichtbar: false, se: 4 },
{ path: 'img/28.jpg ', Daten: null, Typ: 15, sichtbar: falsch, se: 4 },
{ Pfad: 'img/29.jpg', Daten: null, Typ: 3, sichtbar: falsch, se: 3 },
{ Pfad: 'img/30.jpg', Daten: null, Typ: 4, sichtbar: falsch, se: 3 },
{ Pfad: 'img/31.jpg', Daten: null, Typ : 5, sichtbar: falsch, se: 3 },
{ Pfad: 'img/32.jpg', Daten: null, Typ: 6, sichtbar: falsch, se: 3 },
{ Pfad: ' img/33.jpg', Daten: null, Typ: 7, sichtbar: falsch, se: 3 },
{ Pfad: 'img/34.jpg', Daten: null, Typ: 8, sichtbar: falsch, se: 3 },
{ Pfad: 'img/35.jpg', Daten: null, Typ: 9, sichtbar: falsch, se: 3 },
{ Pfad: 'img/36.jpg', Daten: null, Typ: 10, sichtbar: falsch, se: 3 },
{ Pfad: 'img/37.jpg', Daten: null, Typ: 11, sichtbar: falsch, se: 3 },
{ Pfad: 'img/38.jpg', Daten: null, Typ: 12, sichtbar: falsch, se: 3 },
{ Pfad: 'img/39.jpg', Daten: null, Typ: 13 , sichtbar: falsch, se: 3 },
{ Pfad: 'img/40.jpg', Daten: null, Typ: 14, sichtbar: falsch, se: 3 },
{ Pfad: 'img/41.jpg', Daten: null, Typ: 15, sichtbar: falsch, se: 3 },
{ Pfad: 'img/42.jpg', Daten: null, Typ: 3, sichtbar: falsch, se: 2 },
{ Pfad: 'img/43.jpg', Daten: null, Typ: 4, sichtbar: falsch, se: 2 },
{ Pfad: 'img/44 .jpg', Daten: null, Typ: 5, sichtbar: falsch, se: 2 },
{ Pfad: 'img/45.jpg', Daten: null, Typ: 6, sichtbar: falsch, se: 2 },
{ Pfad: 'img/46.jpg', Daten: null, Typ: 7, sichtbar: falsch, se: 2 },
{ Pfad: 'img/47.jpg', Daten: null , Typ: 8, sichtbar: falsch, se: 2 },
{ Pfad: 'img/48.jpg', Daten: null, Typ: 9, sichtbar: falsch, se: 2 },
{ Pfad : 'img/49.jpg', Daten: null, Typ: 10, sichtbar: falsch, se: 2 },
{ Pfad: 'img/50.jpg', Daten: null, Typ: 11, sichtbar: false, se: 2 },
{ path: 'img/51.jpg', Daten: null, Typ: 12, sichtbar: false, se: 2 },
{ path: 'img/52.jpg ', Daten: null, Typ: 13, sichtbar: falsch, se: 2 },
{ Pfad: 'img/53.jpg', Daten: null, Typ: 14, sichtbar: falsch, se: 2 },
{ Pfad: 'img/54.jpg', Daten: null, Typ: 15, sichtbar: falsch, se: 2 }
]
});
Ressource .Images, eine Demoversion von 54 Bildern, eine Demoversion, eine Demoversion
2, Etiketten, eine Leinwand画文本的,比如按钮文字,相关知识请看canvas教程
var Labels = Class.create();
$.extend(Labels.prototype, {
initialize: function (cxt) {
this.cxt = cxt;
},
setText: function (text, position) {
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); 、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; ich < 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;
Pause ;
}
🎜> 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 geladenNums = 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 () {
wenn (o .type <= 17) {
this.allPokers.push(o);
loadedNums++;
if (loadedNums >= totalNums ) {
callback.call(this);
: Funktion (Rückruf, isUnVisibleLast) { //isVisibleLast 是否让底牌不可见
$.each(this.Controls, $.proxy(function (i, o) {
if (!o.visible)
return true;
wenn (o.type == 62) {
var x = 0;
for (var i = 0; i < 54 - DdZGame.Statics.DealedNums ; i++) {
wenn (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);
this.Lbl.setText(o.text, { x: o.textX, y: o.textY });
if (!o.onClick)
o.onClick = $.proxy(function () {
o.visible = false;
this.draw Image();
this.Dealing();
}, this);
}
if (o.type == 66) {
this.Lbl.setText(o.text, { .y });
}
}, this));
/*克隆*/
var copyLeftPokers = this.leftPokers.slice();
var. copyRight Pokers = this.rightPokers .slice();
var copyMyPokers = this.myPokers.slice();
var copyLastPokers = this.LastPokers.slice();
var isDealEndLeft = false;
var. isDeal EndRight = 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] = diese[Richtung] ;
}
if (!o.x) {
y = DdZGame.Statics[direction].y;
o.x = diese[Richtung].x;
o.y = diese[Richtung].y;
= 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;
}
o.y += 30;
this.drawImage();
}, this);
.Statics[Richtung][Achse] += 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' && copyMyPoker s.length == 0) {
isDealEndMy = true;
isDealEndLast = true;
}
if (isDealEndLeft && isDealEndRight && isDealEndMy && isDealEndLast) {
/*发牌完毕*/
/*抢地主*/
if (Rückruf)
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++;
Mathe.Boden (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) {
/ isgetLander [3]) {
// // ** Spiel über! ;
//}
🎜>
var position = { 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) { //Computer schnappt sich den Grundbesitzer
if (this.isGetLander[firstGet] == -1 ||. this.isGetLander[firstGet]) {
, this));
var max = 0;
if. (this. isGetLander[1 ] > this.isGetLander[2]) {
max = this.isGetLander[1];
this.Lander = 1; max = this.isGetLander[2];
this.Lander = 2;
}
if (max < this.isgetlander [3]) {
max = this.isgetlander [3]
this.lander = 3
}
if ( max == 0) {
var tObj = $.grep(this .Res.Images, function (o, i) { return o .type == 66; })[0];
$.extend(t, tObj);//Objekt kopieren
== 4) {
t.text = txt; t.x = postion[this .Lander].x;
t.y = postion[this .Lander].y;
t.visible = true; //this.drawImage($.proxy(function () {
// this.FanDiPai(this.Lander);
//}, this));
this.FanDiPai(this .Lander);
return;
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 .Bilder, Funktion (o, i) { return o.type == 66; })[0];
$.extend(t, tObj);//复制对象
if (this.CurScore == 4) {
txt = '不抢';
= 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;
dieses. 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; ), wahr);//电脑抢到地主优先出牌
return;
}
}
}
if (curScore) {
/*代码写的很垃圾,这点没用面向对象*/
/*Mein hat den Vermieter angerufen, die Schaltfläche muss ausgeblendet sein . sichtbar = false;
}
}, this));
this.CurScore = curScore;
var txt = this.CurScore + 'point';
var t = { };
var tObj = $.grep(this.Res.Images, function (o, i) { return o.type = = 66; })[0];
var tObj = $.extend(t, tObj) ;//Objekt kopieren
if (this.CurScore == 4) {
txt = 'No grabbing' ;
}
t.text = txt;
t.x = position[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);//Objekt kopieren
dz.text = 'Vermieter';
dz .x = t.x + 50;
dz.y = t.y;
dz.visible = true;
this.Controls.push(dz);
//this. drawImage($.proxy(function () { this.Play(this.Lander, 'I am the wirt' ); }, this), false);//Der Computer schnappt sich den Vermieter und spielt zuerst die Karte
this .FanDiPai(this.Lander);
return;
}
else {
minScore = this.CurScore == 4 ? 0 : this.CurScore;
if (!this.isGetLander[ 3]) {
zurück;
. ]) {< T> max = this.isgetlander [1]
this.lander = 1
}
Else {
max = this.isgetlander [2];
this.Lander = 3;
if (max == 0) {
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(Funktion () { 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. sichtbar = false;
}
}, this));
var max = 0;
if (this.isGetLander[1] > this.isGetLander[2])
max = this.isGetLander[1];
this.Lander = 1;
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, '抢 地主 啊 '); 🎜> // 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;
wenn (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;
.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';
}
. sonst wenn ( 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; .isStart = true; this.Play(lander, '是地主啊'); }, false);
},
Play: function (lander, msg) {//出牌
//alert('');
}
});
Code anzeigen
initialize：这个函数是构造函数，初始化一些起始变量.
initEvt这个里是初始化canvas事件,canvas点击事件不像svg那样，因为canvas是一帧一帧画上去的，html dom里是看不到里面的每个元素，javascript自然也无法获取到canvas里的某个元素,那canvas元素点击事件是怎么处理的了？
首先定义下Leinwand这个画布的事件, 然后定义获取鼠标的坐标,再算出在Leinwand相对坐标, 因为每个元素也都有自己的坐标和宽高, 所以可以根据这个坐标判断这个坐标是否在某个元素内.
onControlClick：这个函数是根据上面算出的坐标, 判断此坐标在哪个元素内, 如果在元素内, 并且定义了onclick函数(注:此处并不是真正的元).素事件, 只是对象的一个函数属性), 然后调用onclick函数, 执行相应的代码。
loadImages：这个是加载所有图片，图片加载完成之后，就开始在canvas上画初始的元素。
init：这个函数就是调用loadImages函数, 然后所有图片加载完毕之后，调用回调函数，在canvas上画初始的元素
Dealing ：这个是发牌，每方的牌都是随机的，if(DdZGame.Stat ics.DealedNums >= 51)发了51张牌之后,就剩3张底牌,然后再把这51张牌和3张底牌画在canvas上
GetLander. :这个是抢地主，谁先抢地主是随机的, 如果是先随机到电脑抢地主，那抢地主的分数也是随机的.
Das obige ist der detaillierte Inhalt vonHtml5 Doudizhu Schach und Karte richten Canvas ein, um die Code-Analyse des Doudizhu-Spiels zu realisieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
So stellen Sie eine Verbindung zum Zugriff auf die Datenbank in VB her
Was passiert, wenn Software abstürzt?
Die übergeordnete Vue-Komponente ruft die Methode der untergeordneten Komponente auf
Was sind die Produktionsmethoden der HTML5-Animationsproduktion?
Welche Auflösung ist 1080p?
Was bedeutet Win11-Aktivierungsstatusaktivität?
Verwendung von Kordelzug
Was tun, wenn die CHM-Datei nicht geöffnet werden kann?
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
