Html5斗地主棋牌架设Canvas实现斗地主游戏代码解析
现在我看了h5.zhengtuwl.comhtml5以及canvas相关知识和斗地主的demo后，自己用demo上的素材试着写了个斗地主，代码没重构好，欢迎赐教。
话不多说，下面就一步一步解释下吧
只有一个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是素材数组(几个按钮，文本，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已经叫过地主，按钮需要隐藏*/
$.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);//电脑抢到地主优先出牌
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 { //已经转了一圈,则比较抢地主的分数大小
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 <= 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 ：这个是抢地主，谁先抢地主是随机的，如果是先随机到电脑抢地主，那抢地主的分数也是随机的。
Atas ialah kandungan terperinci Html5斗地主棋牌架设Canvas实现斗地主游戏代码解析. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1392
52
Cara Menjalankan Projek H5
Apr 06, 2025 pm 12:21 PM
Menjalankan projek H5 memerlukan langkah -langkah berikut: memasang alat yang diperlukan seperti pelayan web, node.js, alat pembangunan, dan lain -lain. Membina persekitaran pembangunan, membuat folder projek, memulakan projek, dan menulis kod. Mulakan pelayan pembangunan dan jalankan arahan menggunakan baris arahan. Pratonton projek dalam penyemak imbas anda dan masukkan URL Server Pembangunan. Menerbitkan projek, mengoptimumkan kod, menggunakan projek, dan menyediakan konfigurasi pelayan web.
Apa sebenarnya maksud pengeluaran halaman H5?
Apr 06, 2025 am 07:18 AM
Pengeluaran halaman H5 merujuk kepada penciptaan laman web yang serasi dengan platform menggunakan teknologi seperti HTML5, CSS3 dan JavaScript. Intinya terletak pada kod parsing penyemak imbas, struktur rendering, gaya dan fungsi interaktif. Teknologi umum termasuk kesan animasi, reka bentuk responsif, dan interaksi data. Untuk mengelakkan kesilapan, pemaju harus disahpepijat; Pengoptimuman prestasi dan amalan terbaik termasuk pengoptimuman format imej, pengurangan permintaan dan spesifikasi kod, dan lain -lain untuk meningkatkan kelajuan pemuatan dan kualiti kod.
Cara membuat ikon klik h5
Apr 06, 2025 pm 12:15 PM
Langkah -langkah untuk membuat ikon klik H5 termasuk: menyediakan imej sumber persegi dalam perisian penyuntingan imej. Tambah interaktiviti dalam editor H5 dan tetapkan acara klik. Buat hotspot yang meliputi keseluruhan ikon. Tetapkan tindakan peristiwa klik, seperti melompat ke halaman atau mencetuskan animasi. Eksport dokumen H5 sebagai fail HTML, CSS, dan JavaScript. Menyebarkan fail yang dieksport ke laman web atau platform lain.
Adakah pengeluaran halaman H5 adalah pembangunan front-end?
Apr 05, 2025 pm 11:42 PM
Ya, pengeluaran halaman H5 adalah kaedah pelaksanaan penting untuk pembangunan front-end, yang melibatkan teknologi teras seperti HTML, CSS dan JavaScript. Pemaju membina halaman H5 yang dinamik dan berkuasa dengan bijak menggabungkan teknologi ini, seperti menggunakan & lt; kanvas & gt; Tag untuk menarik grafik atau menggunakan JavaScript untuk mengawal tingkah laku interaksi.
Senario aplikasi apa yang sesuai untuk pengeluaran halaman H5
Apr 05, 2025 pm 11:36 PM
H5 (HTML5) sesuai untuk aplikasi ringan, seperti halaman kempen pemasaran, halaman paparan produk dan promosi korporat mikro. Kelebihannya terletak pada platformiti silang dan interaktiviti yang kaya, tetapi batasannya terletak pada interaksi dan animasi yang kompleks, akses sumber tempatan dan keupayaan luar talian.
Apakah bahasa pengaturcaraan H5?
Apr 03, 2025 am 12:16 AM
H5 bukan bahasa pengaturcaraan yang mandiri, tetapi koleksi HTML5, CSS3 dan JavaScript untuk membina aplikasi web moden. 1. HTML5 mentakrifkan struktur dan kandungan laman web, dan menyediakan tag dan API baru. 2. CSS3 mengawal gaya dan susun atur, dan memperkenalkan ciri -ciri baru seperti animasi. 3. JavaScript melaksanakan interaksi dinamik dan meningkatkan fungsi melalui operasi DOM dan permintaan tak segerak.
Apa yang dirujuk oleh H5? Meneroka konteks
Apr 12, 2025 am 12:03 AM
H5referstohtml5, apivotaltechnologyinwebdevelopment.1) html5introducesnewelementsandapisforrich, dynamicwebapplications.2) itsupp ortsmultimediawithoutplugins, enhancusexperienceaceacrossdevices.3) SemantikelementsImproveContentstructureandseo.4) H5'srespo
Cara membuat tingkap pop timbul dengan H5
Apr 06, 2025 pm 12:12 PM
H5 POPU-UP Window Penciptaan Langkah: 1. Tentukan kaedah pencetus (klik, masa, keluar, tatal); 2. Kandungan reka bentuk (tajuk, teks, butang tindakan); 3. Set gaya (saiz, warna, fon, latar belakang); 4. Melaksanakan Kod (HTML, CSS, JavaScript); 5. Ujian dan penempatan.
