Html5 Doudizhu 체스와 카드는 Doudizhu 게임 코드 분석을 실현하기 위해 Canvas를 설정합니다.
이제 h5.zhengtuwl.comhtml5와 캔버스 관련 지식과 Doudizhu의 데모를 읽은 후 데모에 있는 자료를 사용하여 Doudizhu를 작성해 보았지만 코드가 잘 리팩토링되지 않았습니다.
말할 것도 별로 없고, 차근차근 설명해보자
common.js 파일이 하나뿐이다
1 리소스 클래스
.var Resource = Class.create();
$.extend(Resource.prototype, {
initialize: function () { },
이미지: [
{ 경로: 'img/bg1.png', x: 0, y : 0, w: 800, h: 480, 데이터: null, 유형: 61, visible: true },
{ 경로: 'img/BeiMian.jpg', x: 320, y: 5, w: 100, h: 121, 데이터: null, 유형: 62, visible: true },
{ 경로: 'img/btn.jpg', x: 300, y: 281, w: 140, h: 50, 데이터: null, 유형: 63 , visible: true, 텍스트: '开始', textX: 366, textY: 310 },
{ x: 0, y: 0, 유형: 66, isText: true, visible: false },
{ 경로: 'img/ 1.jpg', 데이터: null, 유형: 16, 표시: false },
{ 경로: 'img/2.jpg', 데이터: null, 유형: 17, 표시: false },
{ 경로: 'img/ 3.jpg', 데이터: null, 유형: 3, visible: false, se: 1 },
{ 경로: 'img/4.jpg', 데이터: null, 유형: 4, visible: false, se: 1 } ,
{ 경로: 'img/5.jpg', 데이터: null, 유형: 5, visible: false, se: 1 },
{ 경로: 'img/6.jpg', 데이터: null, 유형: 6, visible: false, se: 1 },
{ 경로: 'img/7.jpg', 데이터: null, 유형: 7, visible: false, se: 1 },
{ 경로: 'img/8.jpg', 데이터: null, 유형: 8, visible: false, se: 1 },
{ 경로: 'img/9.jpg', 데이터: null, 유형: 9, visible: false, se: 1 },
{ 경로: 'img/10.jpg', 데이터: null, 유형: 10, visible: false, se: 1 },
{ 경로: 'img/11.jpg', 데이터: null, 유형: 11, visible: false, se : 1 },
{ 경로: 'img/12.jpg', 데이터: null, 유형: 12, visible: false, se: 1 },
{ 경로: 'img/13.jpg', 데이터: null, 유형 : 13, visible: false, se: 1 },
{ 경로: 'img/14.jpg', 데이터: null, 유형: 14, visible: false, se: 1 },
{ 경로: 'img/15. jpg', 데이터: null, 유형: 15, visible: false, se: 1 },
{ 경로: 'img/16.jpg', 데이터: null, 유형: 3, visible: false, se: 4 },
{ 경로: 'img/17.jpg', 데이터: null, 유형: 4, 표시: false, se: 4 },
{ 경로: 'img/18.jpg', 데이터: null, 유형: 5, 표시: false, se: 4 },
{ 경로: 'img/19.jpg', 데이터: null, 유형: 6, visible: false, se: 4 },
{ 경로: 'img/20.jpg', 데이터: null, 유형: 7, visible: false, se: 4 },
{ 경로: 'img/21.jpg', 데이터: null, 유형: 8, visible: false, se: 4 },
{ 경로: 'img /22.jpg', 데이터: null, 유형: 9, visible: false, se: 4 },
{ 경로: 'img/23.jpg', 데이터: null, 유형: 10, visible: false, se: 4 },
{ 경로: 'img/24.jpg', 데이터: null, 유형: 11, visible: false, se: 4 },
{ 경로: 'img/25.jpg', 데이터: null, 유형: 12 , visible: false, se: 4 },
{ 경로: 'img/26.jpg', 데이터: null, 유형: 13, visible: false, se: 4 },
{ 경로: 'img/27.jpg' , 데이터: null, 유형: 14, visible: false, se: 4 },
{ 경로: 'img/28.jpg', 데이터: null, 유형: 15, visible: false, se: 4 },
{ 경로 : 'img/29.jpg', 데이터: null, 유형: 3, visible: false, se: 3 },
{ 경로: 'img/30.jpg', 데이터: null, 유형: 4, visible: false, se: 3 },
{ 경로: 'img/31.jpg', 데이터: null, 유형: 5, visible: false, se: 3 },
{ 경로: 'img/32.jpg', 데이터: null, 유형: 6, visible: false, se: 3 },
{ 경로: 'img/33.jpg', 데이터: null, 유형: 7, visible: false, se: 3 },
{ 경로: 'img/34 .jpg', 데이터: null, 유형: 8, visible: false, se: 3 },
{ 경로: 'img/35.jpg', 데이터: null, 유형: 9, visible: false, se: 3 },
{ 경로: 'img/36.jpg', 데이터: null, 유형: 10, visible: false, se: 3 },
{ 경로: 'img/37.jpg', 데이터: null, 유형: 11, 표시 : false, se: 3 },
{ 경로: 'img/38.jpg', 데이터: null, 유형: 12, visible: false, se: 3 },
{ 경로: 'img/39.jpg', 데이터 : null, 유형: 13, visible: false, se: 3 },
{ 경로: 'img/40.jpg', 데이터: null, 유형: 14, visible: false, se: 3 },
{ 경로: 'img/41.jpg', 데이터: null, 유형: 15, visible: false, se: 3 },
{ 경로: 'img/42.jpg', 데이터: null, 유형: 3, visible: false, se: 2 },
{ 경로: 'img/43.jpg', 데이터: null, 유형: 4, visible: false, se: 2 },
{ 경로: 'img/44.jpg', 데이터: null, 유형: 5, visible: false, se: 2 },
{ 경로: 'img/45.jpg', 데이터: null, 유형: 6, visible: false, se: 2 },
{ 경로: 'img /46.jpg', 데이터: null, 유형: 7, visible: false, se: 2 },
{ 경로: 'img/47.jpg', 데이터: null, 유형: 8, visible: false, se: 2 },
{ 경로: 'img/48.jpg', 데이터: null, 유형: 9, visible: false, se: 2 },
{ 경로: 'img/49.jpg', 데이터: null, 유형: 10 , visible: false, se: 2 },
{ 경로: 'img/50.jpg', 데이터: null, 유형: 11, visible: false, se: 2 },
{ 경로: 'img/51.jpg' , 데이터: null, 유형: 12, visible: false, se: 2 },
{ 경로: 'img/52.jpg', 데이터: null, 유형: 13, visible: false, se: 2 },
{ 경로 : 'img/53.jpg', 데이터: null, 유형: 14, visible: false, se: 2 },
{ 경로: 'img/54.jpg', 데이터: null, 유형: 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: 함수(텍스트, 위치) {
this.cxt.font = 'bold 20px serif';
this.cxt.fillStyle = '#000000';
this.cxt.textAlign = 'center';
this.cxt.fillText(text, postion.x, position.y);
}
字);
这个类的方法setText主要是根据设置体，字体大，字体颜color，여기Canvas上画文本적，this.cxt这个是canvas上文(每个教程的叫法不一样)，首先this.cxt.font = 'bold 20px serif';这个是设置字体大小，样式等，this.cxt.fillStyle = '# 000000';这个
是设置字体颜color，this.cxt.textAlign = 'center';这个是设置字体对齐方式,this.cxt.fillText(text, position.x, position.y);这个是开始캔버스上画文本,postion.x, position.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;
이것 .Res = new Resource();
this.allPokers = new Array();
this.Lander = 0;//地主,1右边,2My,3左边
this.isGetLander = {};
this.G m캔버스 = 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: 함수 () {
var isClick = false;
for (var i = 0; 나는 < this.Controls.length; i++) {
var c = this.Controls[i];
var position = DdZGame.Statics.MousePostion;
if (c.onClick) {
if (postion.x >= c.x 위치.x 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 < 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 = 함수 (arry, 방향, isBeiMian, identiy, 축) {
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. 정적[방향].x;
y = DdZGame.Statics[방향].y;
o.x = this[방향].x;
o.y = this[방향].y;
}
else {
x = o.x; ㅋㅋㅋ ;???? {
o.w = 105;
o.h = 150;
}
var img = o.data;
if (isBeiMian) {
img = beiMain.data;
}
else if (방향 == 'myPannel') {
o.onClick = $.proxy(function () {
if (!this. isStart)
return;
if (!o.isPlay) {
o.isPlay = true;
> o.isPlay = false;
o.y += 30;
}
DdZGame 이 .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, 방향, isBeiMian, identiy, 축);
}, 이), DdZGame. Statics.DealTime);
else
DrawPokers.call(this, arry, direct, isBeiMian, identiy, axis);
}
else if (Dd ZGame.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' && copyMyPokers. 길이 == 0) {
isDealEndMy = true;
}
if (direction == 'lastPannel' && copyLastPokers.length == 0) {
isDealEndLast = true;
}
if (isDealEndLeft && isDealEndRight && isDealEndMy && isDealEndLast) {
/*发牌完毕*/
/*抢地主* /
if (콜백)
콜백();
}
}
};
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. 왼쪽 패널 = { 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 、왼쪽*/
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(M ath.random() * (이것은 .allPokers.length - 1) + 0);
c = this.allPokers.splice(index, 1);
c[0].visible = true;
this.rightPokers.push(c[0]);
DdZ게임 .Statics.DealedNums++;
index = Math.floor(Math.random() * (this.allPokers.length - 1) + 0);
c = this.allPokers.splice(index, 1);
c[0 ].visible = 사실;
this.myPokers.push(c[0]);
DdZGame.Statics.DealedNums++;
this.Dealing();
}
},
GetLander: 함수 (firstGet, minScore, curScore ) {
/*随机출谁先叫地主*/
//if (curScore && !this.isGetLander[1] && !this.isGetLander[2] && !this.isGetLander[3]) {
// //**게임 종료 !
/ /Alert ( ''人 人 抢 地主 ');
// return;
//}
var 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;
}
}, 이));
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 (최대 == 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 ;???? this.Controls.push(t);
//this.drawImage($.proxy(function () {
// this.FanDiPai(this.Lander);
//}, this));
this.F anDiPai(this.Lander);
return;
> .isGetLander[firstGet] = 이것입니다. CurScore == 4 ? -1 : this.CurScore;
var txt = this.CurScore + '分';
var t = {};
var tObj = $.grep(this.Res.Images, function (o, i) 돌아오다 .type == 66; })[0];
$.extend(t, tObj);//复제对象
if (this.CurScore == 4) {
txt = '불抢';
}
t .text = txt;
t.x = position[firstGet].x;
t.y = position[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));//电脑抢到地主优先ude牌
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);//电脑抢到地主优先ude牌
return;
}
}
}
if (curScore) {
/*代码写的很垃圾,这点没용면向对象*/
/*내가 집주인에게 전화했습니다. 버튼을 숨겨야 합니다*/ } }
This var tObj = $.grep(this.Res.Images, function ( o, i) { return o.type == 66; }) [0];
~ ~ 44
this.Controls.push(t);
this.isGetLander[2] = curScore == 4 ? -1 : curScore;
if (this.CurScore == 3 | | (this.isGetLander[1] && this.isGetLander[3] && this.CurScore != 4 ;) var dz = {};
$.extend(dz, tObj) dz.text = ' 집주인';
dz.true;
this.Controls.push(dz); /this.drawImage($.proxy(function () { this.Play(this.Lander, '내가 집주인입니다'); }, this), false);//컴퓨터가 집주인을 잡고 카드를 먼저 사용합니다
This.FanDiPai( this.Lander);
This.CurScore = this.CurScore == 4 ? 0 : this.CurScore;
if ( !this.isGetLander[3]) {
DdZGame.Statics.DealTime = 0; Return;}}
else {//이 있었으므로 집주인의 점수가 집주인을 더 사로잡았습니다.
var 최대 =
경우 (this.isgetlander [1] & gt; this.isgetlander [2]) {
max = this.isGetLander[1]; this.Lander = 1 max = this.isGetLander[2];
if (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);//复system对象
t. text = txt;
t.x = position[this.Lander].x;
t.y = position[this.Lander].y;
if (this.Lander != 2) { ㅋㅋㅋ ㅋㅋㅋ push(t);
//DdZGame.Statics.DealTime = 0;
//this.drawImage($.proxy(function () { this.Play(this.Lander, '抢地主啊'); this), false);
this.FanDiPai(this.Lander);
return;
}
}
}
그렇지 않은 경우(이 .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];
.Lander = 1;
}
else {
max = this.isGetLander[2];
this.Lander = 2;
}
if (max < this.isGetLander[3]) {
max = this.isGetLander[3];
this.Lander = 3; # 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 = position[this.Lander].x;
t.y = position[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 이 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.myB tnPostion.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); + 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( 함수 (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：这个函数是构造函数，初始化一些起始变。
initE vt这个里是初始化canvas事件,캔버스点击事件不imagesvg那样，因为canvas是一帧一帧画上去的，html dom里是看不到里素，javascript自然也无法获取到canvas里的某个元素,那canvas元素点击事件是怎么处理的了?
首先定义下canvas这个画布的事件，然后定义获取鼠标的坐标，再算流坐标，再算也标，因为每个元也也对己的坐标宽高，所以可以根据这个坐标判断这个坐标是否는 某个元素内。
onControlClick: 这个函数是根据上面算出的坐标，判断此坐标에서哪个元素内，如果에서 元素内，并且定义了onclick函数(注:此处并不是真정적 元素事件，只是对象的一个函数属性)，然后调用 onclick函数, 执行是应的代码。
loadImages : 这个是加载所，图 Images 加载完 木 木 木 ，就开始init: 这个函数就是调用loadImages函数 然后所有图 Pictures 加载完毕之后，调用回调函数 ，incanvas上画初始的元素
Dealing : 这个是发牌，每方的牌tour是随机的，if(DdZGame.Statics.DealedNums > = 51)发了51张牌之后,就剩3张底牌,然后再把这51张牌 and3张底牌画incanvas上
GetLander ：这个是抢地主,谁先抢地主是随机的，如果是先随机到电脑抢地主，那抢地主的分数也是随机的。
위 내용은 Html5 Doudizhu 체스와 카드는 Doudizhu 게임 코드 분석을 실현하기 위해 Canvas를 설정합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7642
15
1392
52
91
11
72
19
33
150
H5 프로젝트를 실행하는 방법
Apr 06, 2025 pm 12:21 PM
H5 프로젝트를 실행하려면 다음 단계가 필요합니다. Web Server, Node.js, 개발 도구 등과 같은 필요한 도구 설치. 개발 환경 구축, 프로젝트 폴더 작성, 프로젝트 초기화 및 코드 작성. 개발 서버를 시작하고 명령 줄을 사용하여 명령을 실행하십시오. 브라우저에서 프로젝트를 미리보고 개발 서버 URL을 입력하십시오. 프로젝트 게시, 코드 최적화, 프로젝트 배포 및 웹 서버 구성을 설정하십시오.
H5 페이지 제작은 정확히 무엇을 의미합니까?
Apr 06, 2025 am 07:18 AM
H5 Page 프로덕션은 HTML5, CSS3 및 JavaScript와 같은 기술을 사용하여 크로스 플랫폼 호환 웹 페이지의 생성을 말합니다. 핵심은 브라우저의 구문 분석 코드, 렌더링 구조, 스타일 및 대화식 기능에 있습니다. 일반적인 기술에는 애니메이션 효과, 반응 형 디자인 및 데이터 상호 작용이 포함됩니다. 오류를 피하려면 개발자를 디버깅해야합니다. 성능 최적화 및 모범 사례에는 이미지 형식 최적화, 요청 감소 및 코드 사양 등이 포함됩니다. 로딩 속도 및 코드 품질을 향상시킵니다.
H5를 만드는 방법 아이콘을 클릭하십시오
Apr 06, 2025 pm 12:15 PM
H5 클릭 아이콘을 생성하는 단계에는 다음이 포함됩니다. 이미지 편집 소프트웨어에서 정사각형 소스 이미지 준비. H5 편집기에 상호 작용을 추가하고 클릭 이벤트를 설정하십시오. 전체 아이콘을 덮는 핫스팟을 만듭니다. 페이지로 점프하거나 애니메이션 트리거링과 같은 클릭 이벤트의 동작을 설정하십시오. h5 문서를 HTML, CSS 및 JavaScript 파일로 내보내십시오. 내보내는 파일을 웹 사이트 또는 기타 플랫폼에 배포하십시오.
H5 페이지 제작은 프론트 엔드 개발입니까?
Apr 05, 2025 pm 11:42 PM
예, H5 페이지 제작은 HTML, CSS 및 JavaScript와 같은 핵심 기술을 포함하는 프론트 엔드 개발을위한 중요한 구현 방법입니다. 개발자는 & lt; canvas & gt; 그래픽을 그리거나 상호 작용 동작을 제어하기 위해 JavaScript를 사용하는 태그.
H5 페이지 제작에 적합한 응용 프로그램 시나리오
Apr 05, 2025 pm 11:36 PM
H5 (HTML5)는 마케팅 캠페인 페이지, 제품 디스플레이 페이지 및 기업 프로모션 마이크로 웨스 사이트와 같은 가벼운 응용 프로그램에 적합합니다. 그것의 장점은 교차 성형 및 풍부한 상호 작용에있어 있지만, 그 한계는 복잡한 상호 작용 및 애니메이션, 로컬 리소스 액세스 및 오프라인 기능에 있습니다.
H5 프로그래밍 언어는 무엇입니까?
Apr 03, 2025 am 12:16 AM
H5는 독립형 프로그래밍 언어가 아니라 최신 웹 애플리케이션을 구축하기위한 HTML5, CSS3 및 JavaScript 모음입니다. 1. HTML5는 웹 페이지 구조와 컨텐츠를 정의하고 새로운 태그와 API를 제공합니다. 2. CSS3은 스타일과 레이아웃을 제어하고 애니메이션과 같은 새로운 기능을 소개합니다. 3. JavaScript는 동적 상호 작용을 구현하고 DOM 작업 및 비동기 요청을 통해 기능을 향상시킵니다.
H5는 무엇을 언급합니까? 맥락 탐색
Apr 12, 2025 am 12:03 AM
h5referstohtml5, apivotaltechnologyinwebdevelopment.1) html5introducesnewelements 및 dynamicwebapplications.2) itsupp ortsmultimediawithoutplugins, enovannangeserexperienceacrossdevices.3) SemanticLementsImproveContentsTructUreAndSeo.4) H5'Srespo
H5로 팝업 창을 만드는 방법
Apr 06, 2025 pm 12:12 PM
H5 팝업 창 생성 단계 : 1. 트리거링 메소드를 결정합니다 (클릭, 시간, 종료, 스크롤); 2. 디자인 컨텐츠 (제목, 텍스트, 액션 버튼); 3. 세트 스타일 (크기, 색상, 글꼴, 배경); 4. 코드 구현 (HTML, CSS, JavaScript); 5. 테스트 및 배포.
