Web Front-end
H5 Tutorial
Html5 Doudizhu chess and card set up Canvas to realize Doudizhu game code analysis
Html5 Doudizhu chess and card set up Canvas to realize Doudizhu game code analysis
Now after reading h5.zhengtuwl.comhtml5 and canvas-related knowledge and the demo of Doudizhu, I tried to write a Doudizhu using the materials on the demo. The code was not refactored well. I welcome your advice.
Not much to say, let’s explain it step by step
There is only one common.js file
1. Resource class
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 has already called the landlord. The button needs to hide*/
$ .Each (this.controls, $ .proxy (function (i, o) {
if (O.LANDER) {
o. visible = false; t = { };
var tObj = $.grep(this.Res.Images, function (o, i) { return o.type == 66; })[0];
var tObj $.extend(t, tObj) ;//Copy object
if (this.CurScore == 4) {
txt = 'No grab';
[2] .x, == 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);//Copy object
dz.text = 'Landlord';
dz.x = t.x + 50; dz.visible = true;
this.Controls.push(dz);
//this.drawImage($.proxy(function () { this.Play(this.Lander, 'I am the landlord' ); }, this), false);//The computer grabs the landlord’s priority and plays the card
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);
;
}
but ##
max = this.isGetLander[2];
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 ：这个是抢地主，谁先抢地主是随机的，如果是先随机到电脑抢地主，那抢地主的分数也是随机的。
The above is the detailed content of Html5 Doudizhu chess and card set up Canvas to realize Doudizhu game code analysis. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1390
52
How to run the h5 project
Apr 06, 2025 pm 12:21 PM
Running the H5 project requires the following steps: installing necessary tools such as web server, Node.js, development tools, etc. Build a development environment, create project folders, initialize projects, and write code. Start the development server and run the command using the command line. Preview the project in your browser and enter the development server URL. Publish projects, optimize code, deploy projects, and set up web server configuration.
What exactly does H5 page production mean?
Apr 06, 2025 am 07:18 AM
H5 page production refers to the creation of cross-platform compatible web pages using technologies such as HTML5, CSS3 and JavaScript. Its core lies in the browser's parsing code, rendering structure, style and interactive functions. Common technologies include animation effects, responsive design, and data interaction. To avoid errors, developers should be debugged; performance optimization and best practices include image format optimization, request reduction and code specifications, etc. to improve loading speed and code quality.
How to make h5 click icon
Apr 06, 2025 pm 12:15 PM
The steps to create an H5 click icon include: preparing a square source image in the image editing software. Add interactivity in the H5 editor and set the click event. Create a hotspot that covers the entire icon. Set the action of click events, such as jumping to the page or triggering animation. Export H5 documents as HTML, CSS, and JavaScript files. Deploy the exported files to a website or other platform.
Is H5 page production a front-end development?
Apr 05, 2025 pm 11:42 PM
Yes, H5 page production is an important implementation method for front-end development, involving core technologies such as HTML, CSS and JavaScript. Developers build dynamic and powerful H5 pages by cleverly combining these technologies, such as using the <canvas> tag to draw graphics or using JavaScript to control interaction behavior.
What application scenarios are suitable for H5 page production
Apr 05, 2025 pm 11:36 PM
H5 (HTML5) is suitable for lightweight applications, such as marketing campaign pages, product display pages and corporate promotion micro-websites. Its advantages lie in cross-platformity and rich interactivity, but its limitations lie in complex interactions and animations, local resource access and offline capabilities.
What is the H5 programming language?
Apr 03, 2025 am 12:16 AM
H5 is not a standalone programming language, but a collection of HTML5, CSS3 and JavaScript for building modern web applications. 1. HTML5 defines the web page structure and content, and provides new tags and APIs. 2. CSS3 controls style and layout, and introduces new features such as animation. 3. JavaScript implements dynamic interaction and enhances functions through DOM operations and asynchronous requests.
What Does H5 Refer To? Exploring the Context
Apr 12, 2025 am 12:03 AM
H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo
How to make pop-up windows with h5
Apr 06, 2025 pm 12:12 PM
H5 pop-up window creation steps: 1. Determine the triggering method (click, time, exit, scroll); 2. Design content (title, text, action button); 3. Set style (size, color, font, background); 4. Implement code (HTML, CSS, JavaScript); 5. Test and deployment.
