Web Front-endH5 TutorialHtml5 Doudizhu chess and card set up Canvas to realize Doudizhu game code analysisHtml5 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 var c = this.Controls[i];
var postion = DdZGame.Statics.MousePostion;
if (c.onClick) {
if (postion.x >= c.x && postion.x = 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.y && postion.y 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 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 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 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 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 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!
Is H5 a Shorthand for HTML5? Exploring the DetailsApr 14, 2025 am 12:05 AMH5 is not just the abbreviation of HTML5, it represents a wider modern web development technology ecosystem: 1. H5 includes HTML5, CSS3, JavaScript and related APIs and technologies; 2. It provides a richer, interactive and smooth user experience, and can run seamlessly on multiple devices; 3. Using the H5 technology stack, you can create responsive web pages and complex interactive functions.
H5 and HTML5: Commonly Used Terms in Web DevelopmentApr 13, 2025 am 12:01 AMH5 and HTML5 refer to the same thing, namely HTML5. HTML5 is the fifth version of HTML, bringing new features such as semantic tags, multimedia support, canvas and graphics, offline storage and local storage, improving the expressiveness and interactivity of web pages.
What Does H5 Refer To? Exploring the ContextApr 12, 2025 am 12:03 AMH5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo
H5: Tools, Frameworks, and Best PracticesApr 11, 2025 am 12:11 AMThe tools and frameworks that need to be mastered in H5 development include Vue.js, React and Webpack. 1.Vue.js is suitable for building user interfaces and supports component development. 2.React optimizes page rendering through virtual DOM, suitable for complex applications. 3.Webpack is used for module packaging and optimize resource loading.
The Legacy of HTML5: Understanding H5 in the PresentApr 10, 2025 am 09:28 AMHTML5hassignificantlytransformedwebdevelopmentbyintroducingsemanticelements,enhancingmultimediasupport,andimprovingperformance.1)ItmadewebsitesmoreaccessibleandSEO-friendlywithsemanticelementslike,,and.2)HTML5introducednativeandtags,eliminatingthenee
H5 Code: Accessibility and Semantic HTMLApr 09, 2025 am 12:05 AMH5 improves web page accessibility and SEO effects through semantic elements and ARIA attributes. 1. Use, etc. to organize the content structure and improve SEO. 2. ARIA attributes such as aria-label enhance accessibility, and assistive technology users can use web pages smoothly.
Is h5 same as HTML5?Apr 08, 2025 am 12:16 AM"h5" and "HTML5" are the same in most cases, but they may have different meanings in certain specific scenarios. 1. "HTML5" is a W3C-defined standard that contains new tags and APIs. 2. "h5" is usually the abbreviation of HTML5, but in mobile development, it may refer to a framework based on HTML5. Understanding these differences helps to use these terms accurately in your project.
What is the function of H5?Apr 07, 2025 am 12:10 AMH5, or HTML5, is the fifth version of HTML. It provides developers with a stronger tool set, making it easier to create complex web applications. The core functions of H5 include: 1) elements that allow drawing graphics and animations on web pages; 2) semantic tags such as, etc. to make the web page structure clear and conducive to SEO optimization; 3) new APIs such as GeolocationAPI support location-based services; 4) Cross-browser compatibility needs to be ensured through compatibility testing and Polyfill library.
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
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
SublimeText3 Chinese version
Chinese version, very easy to use
SublimeText3 Mac version
God-level code editing software (SublimeText3)
SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.
EditPlus Chinese cracked version
Small size, syntax highlighting, does not support code prompt function
DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software
