首页 / HTML5 / Html5 Canvas斗地主游戏
Html5 Canvas斗地主游戏
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Html5 Canvas斗地主游戏，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含22179字，纯文字阅读大概需要32分钟。
内容图文
过完年来公司，没什么事，主管说研究下html5 游戏，然后主管就给了一个斗地主的demo，随后我就开始看代码，
现在我看了html5以及canvas相关知识和斗地主的demo后，自己用demo上的素材试着写了个斗地主，代码没重构好，欢迎赐教。
话不多说，下面就一步一步解释下吧
只有一个common.js文件
1、资源类
1
var Resource = Class.create();
2$.extend(Resource.prototype, {
3 initialize: function () { },
4 Images: [
5 { path: ‘img/bg1.png‘, x: 0, y: 0, w: 800, h: 480, data: null, type: 61, visible: true },
6 { path: ‘img/BeiMian.jpg‘, x: 320, y: 5, w: 100, h: 121, data: null, type: 62, visible: true },
7 { path: ‘img/btn.jpg‘, x: 300, y: 281, w: 140, h: 50, data: null, type: 63, visible: true, text: ‘开始‘, textX: 366, textY: 310 },
8 { x: 0, y: 0, type: 66, isText: true, visible: false },
9 { path: ‘img/1.jpg‘, data: null, type: 16, visible: false },
10 { path: ‘img/2.jpg‘, data: null, type: 17, visible: false },
11 { path: ‘img/3.jpg‘, data: null, type: 3, visible: false, se: 1 },
12 { path: ‘img/4.jpg‘, data: null, type: 4, visible: false, se: 1 },
13 { path: ‘img/5.jpg‘, data: null, type: 5, visible: false, se: 1 },
14 { path: ‘img/6.jpg‘, data: null, type: 6, visible: false, se: 1 },
15 { path: ‘img/7.jpg‘, data: null, type: 7, visible: false, se: 1 },
16 { path: ‘img/8.jpg‘, data: null, type: 8, visible: false, se: 1 },
17 { path: ‘img/9.jpg‘, data: null, type: 9, visible: false, se: 1 },
18 { path: ‘img/10.jpg‘, data: null, type: 10, visible: false, se: 1 },
19 { path: ‘img/11.jpg‘, data: null, type: 11, visible: false, se: 1 },
20 { path: ‘img/12.jpg‘, data: null, type: 12, visible: false, se: 1 },
21 { path: ‘img/13.jpg‘, data: null, type: 13, visible: false, se: 1 },
22 { path: ‘img/14.jpg‘, data: null, type: 14, visible: false, se: 1 },
23 { path: ‘img/15.jpg‘, data: null, type: 15, visible: false, se: 1 },
24 { path: ‘img/16.jpg‘, data: null, type: 3, visible: false, se: 4 },
25 { path: ‘img/17.jpg‘, data: null, type: 4, visible: false, se: 4 },
26 { path: ‘img/18.jpg‘, data: null, type: 5, visible: false, se: 4 },
27 { path: ‘img/19.jpg‘, data: null, type: 6, visible: false, se: 4 },
28 { path: ‘img/20.jpg‘, data: null, type: 7, visible: false, se: 4 },
29 { path: ‘img/21.jpg‘, data: null, type: 8, visible: false, se: 4 },
30 { path: ‘img/22.jpg‘, data: null, type: 9, visible: false, se: 4 },
31 { path: ‘img/23.jpg‘, data: null, type: 10, visible: false, se: 4 },
32 { path: ‘img/24.jpg‘, data: null, type: 11, visible: false, se: 4 },
33 { path: ‘img/25.jpg‘, data: null, type: 12, visible: false, se: 4 },
34 { path: ‘img/26.jpg‘, data: null, type: 13, visible: false, se: 4 },
35 { path: ‘img/27.jpg‘, data: null, type: 14, visible: false, se: 4 },
36 { path: ‘img/28.jpg‘, data: null, type: 15, visible: false, se: 4 },
37 { path: ‘img/29.jpg‘, data: null, type: 3, visible: false, se: 3 },
38 { path: ‘img/30.jpg‘, data: null, type: 4, visible: false, se: 3 },
39 { path: ‘img/31.jpg‘, data: null, type: 5, visible: false, se: 3 },
40 { path: ‘img/32.jpg‘, data: null, type: 6, visible: false, se: 3 },
41 { path: ‘img/33.jpg‘, data: null, type: 7, visible: false, se: 3 },
42 { path: ‘img/34.jpg‘, data: null, type: 8, visible: false, se: 3 },
43 { path: ‘img/35.jpg‘, data: null, type: 9, visible: false, se: 3 },
44 { path: ‘img/36.jpg‘, data: null, type: 10, visible: false, se: 3 },
45 { path: ‘img/37.jpg‘, data: null, type: 11, visible: false, se: 3 },
46 { path: ‘img/38.jpg‘, data: null, type: 12, visible: false, se: 3 },
47 { path: ‘img/39.jpg‘, data: null, type: 13, visible: false, se: 3 },
48 { path: ‘img/40.jpg‘, data: null, type: 14, visible: false, se: 3 },
49 { path: ‘img/41.jpg‘, data: null, type: 15, visible: false, se: 3 },
50 { path: ‘img/42.jpg‘, data: null, type: 3, visible: false, se: 2 },
51 { path: ‘img/43.jpg‘, data: null, type: 4, visible: false, se: 2 },
52 { path: ‘img/44.jpg‘, data: null, type: 5, visible: false, se: 2 },
53 { path: ‘img/45.jpg‘, data: null, type: 6, visible: false, se: 2 },
54 { path: ‘img/46.jpg‘, data: null, type: 7, visible: false, se: 2 },
55 { path: ‘img/47.jpg‘, data: null, type: 8, visible: false, se: 2 },
56 { path: ‘img/48.jpg‘, data: null, type: 9, visible: false, se: 2 },
57 { path: ‘img/49.jpg‘, data: null, type: 10, visible: false, se: 2 },
58 { path: ‘img/50.jpg‘, data: null, type: 11, visible: false, se: 2 },
59 { path: ‘img/51.jpg‘, data: null, type: 12, visible: false, se: 2 },
60 { path: ‘img/52.jpg‘, data: null, type: 13, visible: false, se: 2 },
61 { path: ‘img/53.jpg‘, data: null, type: 14, visible: false, se: 2 },
62 { path: ‘img/54.jpg‘, data: null, type: 15, visible: false, se: 2 }
63 ]
64 });
Resource.Images是素材数组(几个按钮，文本，54张牌,背景图片等),大家可以下载demo看看
2、Lables类,在Canvas画布上画文本的,比如按钮文字,相关知识请看canvas教程
1
var Labels = Class.create();
2$.extend(Labels.prototype, {
3 initialize: function (cxt) {
4this.cxt = cxt;
5 },
6 setText: function (text, postion) {
7this.cxt.font = ‘bold 20px serif‘;
8this.cxt.fillStyle = ‘#000000‘;
9this.cxt.textAlign = ‘center‘;
10this.cxt.fillText(text, postion.x, postion.y);
11 }
12 });
这个类的方法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游戏类，主要功能就是初始化斗地主，发牌，抢地主等，出牌未完待续，后续更新
1
var DdZGame = Class.create();
2 DdZGame.Statics = { DealedNums: 0, isLeftFirstDeal: true };
3$.extend(DdZGame.prototype, {
4 initialize: function () {
5 DdZGame.Statics.IsGetLander = false;
6 DdZGame.Statics.DealTime = 66;
7this.leftPokers = [];
8this.rightPokers = [];
9this.myPokers = [];
10this.LastPokers = [];//最后3张牌 11 12this.leftPlays = [];
13this.rightPlays = [];
14this.myPlays = [];
15 16this.myBtnPostion = { y: 245, x: 162 };
17 18this.isStart = false;
19 20this.Res = new Resource();
21 22this.allPokers = new Array();
23 24this.Lander = 0;//地主,1右边,2My,3左边 25this.isGetLander = {};
26this.GmCanvas = document.getElementById(‘gmCanvas‘);
27 28 29this.cxt = this.GmCanvas.getContext(‘2d‘);
30this.Lbl = new Labels(this.cxt);
31this.init();
32this.initEvt();
33 },
34 initEvt: function () {
35this.GmCanvas.onclick = $.proxy(function (e) {
36var box = this.GmCanvas.getBoundingClientRect();
37 38 DdZGame.Statics.MousePostion = { x: e.pageX - box.left, y: e.pageY - box.top };
39this.onControlClick();
40 }, this);
41 },
42 onControlClick: function () {
43var isClick = false;
44for (var i = 0; i < this.Controls.length; i++) {
45var c = this.Controls[i];
46var postion = DdZGame.Statics.MousePostion;
47if (c.onClick) {
48if (postion.x >= c.x && postion.x <= c.x + c.w && postion.y >= c.y && postion.y <= c.y + c.h) {
49 c.onClick();
50 isClick = true;
51break;
52 }
53 }
54 }
55if (!isClick) {
56for (var i = 0; i < this.myPokers.length; i++) {
57var c = this.myPokers[i];
58var postion = DdZGame.Statics.MousePostion;
59if (c.onClick) {
60if (postion.x >= c.x && postion.x <= c.x + c.w && postion.y >= c.y && postion.y <= c.y + c.h) {
61 c.onClick();
62 isClick = true;
63break;
64 }
65 }
66 }
67 }
68 },
69 loadImages: function (callback) {
70var loadedNums = 0;
71var totalNums = this.Res.Images.length - 1;
72this.Controls = [];
73 $.each(this.Res.Images, $.proxy(function (i, o) {
74if (!o.path) {
75returntrue;
76 }
77 o.data = new Image();
78 o.data.src = o.path;
79 o.data.onload = $.proxy(function () {
80if (o.type <= 17) {
81this.allPokers.push(o);
82 }
83else 84this.Controls.push(o);
85 86 87 loadedNums++;
88if (loadedNums >= totalNums) {
89 callback.call(this);
90 }
91 }, this);
92 }, this));
93 },
94 drawImage: function (callback, isUnVisibleLast) {//isVisibleLast 是否让底牌不可见 95 $.each(this.Controls, $.proxy(function (i, o) {
96if (!o.visible)
97returntrue;
98if (o.type == 62) {
99var x = 0;
100for (var i = 0; i < 54 - DdZGame.Statics.DealedNums ; i++) {
101if (i == 0) x = o.x;
102this.cxt.drawImage(o.data, o.x, o.y, o.w, o.h);
103 o.x++;
104 }
105 o.x = x;
106 }
107elseif (!o.isText) {
108this.cxt.drawImage(o.data, o.x, o.y, o.w, o.h);
109 }
110if (o.type == 63) {
111this.Lbl.setText(o.text, { x: o.textX, y: o.textY });
112113114115if (!o.onClick)
116 o.onClick = $.proxy(function () {
117 o.onClick = null;
118 o.visible = false;
119this.drawImage();
120this.Dealing();
121 }, this);
122 }
123124if (o.type == 66) {
125this.Lbl.setText(o.text, { x: o.x, y: o.y });
126 }
127 }, this));
128129130/*克隆*/131var copyLeftPokers = this.leftPokers.slice();
132var copyRightPokers = this.rightPokers.slice();
133var copyMyPokers = this.myPokers.slice();
134var copyLastPokers = this.LastPokers.slice();
135136var isDealEndLeft = false;
137var isDealEndRight = false;
138var isDealEndMy = false;
139var isDealEndLast = false;
140141var beiMain = $.grep(this.Res.Images, $.proxy(function (o, i) { return o.type == 62; }, this))[0];
142var DrawPokers = function (arry, direction, isBeiMian, identiy, axis) {
143if (arry && arry.length > 0) {
144var o = arry[0];
145var x = 0, y = 0;
146147148149150151152153154155156157158159if (!DdZGame.Statics[direction]) {
160 DdZGame.Statics[direction] = this[direction];
161 }
162163if (!o.x) {
164 x = DdZGame.Statics[direction].x;
165 y = DdZGame.Statics[direction].y;
166167 o.x = this[direction].x;
168 o.y = this[direction].y;
169 }
170else {
171 x = o.x;
172 y = o.y;
173 }
174175176if (!o.visible) {
177returntrue;
178 }
179180181182 o.w = 18;
183 o.h = 129;
184if (arry.length == 1) {
185 o.w = 105;
186 o.h = 150;
187 }
188189190191192193194195var img = o.data;
196if (isBeiMian) {
197 img = beiMain.data;
198 }
199elseif (direction == ‘myPannel‘) {
200 o.onClick = $.proxy(function () {
201if (!this.isStart)
202return;
203if (!o.isPlay) {
204 o.isPlay = true;
205 o.y -= 30;
206 }
207else {
208 o.isPlay = false;
209 o.y += 30;
210 }
211212 DdZGame.Statics.DealTime = 0;
213this.drawImage();
214 }, this);
215 }
216this.cxt.drawImage(img, x, y);
217 DdZGame.Statics[direction][axis] += identiy;
218219 arry.splice(0, 1);
220if (DdZGame.Statics.DealTime > 0)
221 DdZGame.Statics[direction + ‘handle‘] = setTimeout($.proxy(function () {
222 DrawPokers.call(this, arry, direction, isBeiMian, identiy, axis);
223 }, this), DdZGame.Statics.DealTime);
224else225 DrawPokers.call(this, arry, direction, isBeiMian, identiy, axis);
226 }
227elseif (DdZGame.Statics[direction + ‘handle‘] || DdZGame.Statics.DealTime == 0) {
228 clearTimeout(DdZGame.Statics[direction + ‘handle‘]);
229230231if (direction == ‘leftPannel‘ && copyLeftPokers.length == 0) {
232 isDealEndLeft = true;
233 }
234if (direction == ‘rightPannel‘ && copyRightPokers.length == 0) {
235 isDealEndRight = true;
236 }
237if (direction == ‘myPannel‘ && copyMyPokers.length == 0) {
238 isDealEndMy = true;
239 }
240if (direction == ‘lastPannel‘ && copyLastPokers.length == 0) {
241 isDealEndLast = true;
242 }
243if (isDealEndLeft && isDealEndRight && isDealEndMy && isDealEndLast) {
244/*发牌完毕*/245/*抢地主*/246if (callback)
247 callback();
248 }
249 }
250 };
251252253 DrawPokers.call(this, copyLeftPokers, ‘leftPannel‘, true, 26, ‘y‘);
254 DrawPokers.call(this, copyRightPokers, ‘rightPannel‘, true, 26, ‘y‘);
255 DrawPokers.call(this, copyMyPokers, ‘myPannel‘, false, 19, ‘x‘);
256257 DrawPokers.call(this, copyLastPokers, ‘lastPannel‘, isUnVisibleLast, 126, ‘x‘);
258 },
259 init: function () {
260this.loadImages(this.drawImage);
261 },
262 Dealing: function () {//发牌 263this.leftPannel = { x: 5, y: 18 };
264this.rightPannel = { x: 691, y: 18 };
265this.myPannel = { x: 198, y: 330 };
266this.lastPannel = { x: 243, y: 5 };
267268269if (DdZGame.Statics.DealedNums >= 51) { //发牌完毕 270271 $.each(this.allPokers, $.proxy(function (i, o) {
272 o.visible = true;
273this.LastPokers.push(o);
274 }, this));
275276277this.myPokers.sort(function (a, b) {
278if (a.type != b.type)
279return b.type - a.type;
280return b.se - a.se;
281 });
282 $.grep(this.Res.Images, $.proxy(function (o, i) { return o.type == 62; }, this))[0].visible = false;
283this.drawImage($.proxy(function () { this.GetLander(); }, this), true);
284285 }
286else {
287/*1、left*/288var index = Math.floor(Math.random() * (this.allPokers.length - 1) + 0);
289var c = this.allPokers.splice(index, 1);
290 c[0].visible = true;
291this.leftPokers.push(c[0]);
292 DdZGame.Statics.DealedNums++;
293294/*2、right*/295 index = Math.floor(Math.random() * (this.allPokers.length - 1) + 0);
296 c = this.allPokers.splice(index, 1);
297 c[0].visible = true;
298this.rightPokers.push(c[0]);
299 DdZGame.Statics.DealedNums++;
300301 index = Math.floor(Math.random() * (this.allPokers.length - 1) + 0);
302 c = this.allPokers.splice(index, 1);
303 c[0].visible = true;
304this.myPokers.push(c[0]);
305 DdZGame.Statics.DealedNums++;
306307this.Dealing();
308 }
309 },
310 GetLander: function (firstGet, minScore, curScore) {
311/*随机出谁先叫地主*/312313//if (curScore && !this.isGetLander[1] && !this.isGetLander[2] && !this.isGetLander[3]) {314// //**Game Over !315// alert(‘无人抢地主‘);316// return;317//}318319320var postion = { 1: { y: 100, x: 640 }, 3: { y: 100, x: 126 }, 2: { x: 216, y: 297 } };
321if (!curScore) {
322if (!minScore)
323 minScore = 1;
324if (!firstGet)
325 firstGet = Math.floor(Math.random() * (3 - 1 + 1) + 1);
326if (firstGet == 1 || firstGet == 3) { //电脑抢地主327if (this.isGetLander[firstGet] == -1 || this.isGetLander[firstGet]) {
328 $.each(this.Controls, $.proxy(function (i, o) {
329if (o.Lander) {
330 o.visible = false;
331 }
332 }, this));
333334var max = 0;
335if (this.isGetLander[1] > this.isGetLander[2]) {
336 max = this.isGetLander[1];
337this.Lander = 1;
338 }
339else {
340 max = this.isGetLander[2];
341this.Lander = 2;
342 }
343if (max < this.isGetLander[3]) {
344 max = this.isGetLander[3];
345this.Lander = 3;
346 }
347if (max == 0) {
348 alert(‘Game Over !‘);
349return;
350 }
351352var txt = max + ‘分‘;
353var t = {};
354var tObj = $.grep(this.Res.Images, function (o, i) { return o.type == 66; })[0];
355 $.extend(t, tObj);//复制对象356if (this.CurScore == 4) {
357 txt = ‘不抢‘;
358 }
359 t.text = txt;
360 t.x = postion[this.Lander].x;
361 t.y = postion[this.Lander].y;
362 t.visible = true;
363this.Controls.push(t);
364365366367//this.drawImage($.proxy(function () {368369// this.FanDiPai(this.Lander);370//}, this));371this.FanDiPai(this.Lander);
372return;
373 }
374 console.log(‘电脑抢地主‘);
375this.CurScore = Math.floor(Math.random() * (4 - minScore + 1) + minScore);
376377this.isGetLander[firstGet] = this.CurScore == 4 ? -1 : this.CurScore;
378379var txt = this.CurScore + ‘分‘;
380var t = {};
381var tObj = $.grep(this.Res.Images, function (o, i) { return o.type == 66; })[0];
382 $.extend(t, tObj);//复制对象383if (this.CurScore == 4) {
384 txt = ‘不抢‘;
385 }
386387 t.text = txt;
388 t.x = postion[firstGet].x;
389 t.y = postion[firstGet].y;
390 t.visible = true;
391392this.Controls.push(t);
393394if (this.CurScore == 3) {
395this.Lander = firstGet;
396//DdZGame.Statics.IsGetLander = true;397//DdZGame.Statics.DealTime = 0;398399var dz = {};
400 $.extend(dz, tObj);//复制对象401 dz.text = ‘地主‘;
402 dz.x = t.x + 30;
403 dz.y = t.y;
404 dz.visible = true;
405406this.Controls.push(dz);
407408//this.drawImage($.proxy(function () { this.Play(this.Lander, ‘电脑地主‘); }, this));//电脑抢到地主优先出牌409this.FanDiPai(this.Lander);
410return;
411 }
412else {
413if (this.CurScore == 4) {
414var test = ‘abcdefg‘;
415 }
416var nextGet = firstGet == 1 ? 2 : 1;
417 minScore = this.CurScore == 4 ? minScore : this.CurScore + 1;
418this.CurScore = this.CurScore == 4 ? 0 : this.CurScore;
419420421 DdZGame.Statics.DealTime = 0;
422this.drawImage($.proxy(function () { this.GetLander(nextGet, minScore); }, this), true);//电脑抢到地主优先出牌423return;
424 }
425 }
426 }
427if (curScore) {
428/*代码写的很垃圾,这点没用面向对象*/429/*My已经叫过地主，按钮需要隐藏*/430 $.each(this.Controls, $.proxy(function (i, o) {
431if (o.Lander) {
432 o.visible = false;
433 }
434 }, this));
435436this.CurScore = curScore;
437var txt = this.CurScore + ‘分‘;
438var t = {};
439var tObj = $.grep(this.Res.Images, function (o, i) { return o.type == 66; })[0];
440 $.extend(t, tObj);//复制对象441if (this.CurScore == 4) {
442 txt = ‘不抢‘;
443 }
444 t.text = txt;
445 t.x = postion[2].x;
446 t.y = postion[2].y;
447 t.visible = true;
448this.Controls.push(t);
449450this.isGetLander[2] = curScore == 4 ? -1 : curScore;
451452if (this.CurScore == 3 || (this.isGetLander[1] && this.isGetLander[3] && this.CurScore != 4)) {
453this.Lander = 2;
454//DdZGame.Statics.IsGetLander = true;455//DdZGame.Statics.DealTime = 0;456457var dz = {};
458 $.extend(dz, tObj);//复制对象459 dz.text = ‘地主‘;
460 dz.x = t.x + 50;
461 dz.y = t.y;
462 dz.visible = true;
463464this.Controls.push(dz);
465466//this.drawImage($.proxy(function () { this.Play(this.Lander, ‘我是地主‘); }, this), false);//电脑抢到地主优先出牌467this.FanDiPai(this.Lander);
468return;
469 }
470else {
471 minScore = this.CurScore == 4 ? minScore : this.CurScore + 1;
472this.CurScore = this.CurScore == 4 ? 0 : this.CurScore;
473if (!this.isGetLander[3]) {
474 DdZGame.Statics.DealTime = 0;
475this.drawImage($.proxy(function () { this.GetLander(3, minScore) }, this), true);
476return;
477 }
478else { //已经转了一圈,则比较抢地主的分数大小479var max = 0;
480if (this.isGetLander[1] > this.isGetLander[2]) {
481 max = this.isGetLander[1];
482this.Lander = 1;
483 }
484else {
485 max = this.isGetLander[2];
486this.Lander = 2;
487 }
488if (max < this.isGetLander[3]) {
489 max = this.isGetLander[3];
490this.Lander = 3;
491 }
492if (max == 0) {
493 alert(‘Game Over !‘);
494return;
495 }
496497var txt = ‘地主‘;
498var t = {};
499var tObj = $.grep(this.Res.Images, function (o, i) { return o.type == 66; })[0];
500 $.extend(t, tObj);//复制对象 501 t.text = txt;
502 t.x = postion[this.Lander].x;
503 t.y = postion[this.Lander].y;
504if (this.Lander != 2) {
505 t.x += 30;
506 }
507else {
508 t.x += 50;
509 }
510 t.visible = true;
511this.Controls.push(t);
512513514//DdZGame.Statics.DealTime = 0;515//this.drawImage($.proxy(function () { this.Play(this.Lander, ‘抢地主啊‘); }, this), false);516this.FanDiPai(this.Lander);
517return;
518 }
519 }
520 }
521elseif (this.isGetLander[2] == -1 || this.isGetLander[2]) {
522 $.each(this.Controls, $.proxy(function (i, o) {
523if (o.Lander) {
524 o.visible = false;
525 }
526 }, this));
527528var max = 0;
529if (this.isGetLander[1] > this.isGetLander[2]) {
530 max = this.isGetLander[1];
531this.Lander = 1;
532 }
533else {
534 max = this.isGetLander[2];
535this.Lander = 2;
536 }
537if (max < this.isGetLander[3]) {
538 max = this.isGetLander[3];
539this.Lander = 3;
540 }
541if (max == 0) {
542 alert(‘Game Over !‘);
543return;
544 }
545546var txt = max + ‘分‘;
547var t = {};
548var tObj = $.grep(this.Res.Images, function (o, i) { return o.type == 66; })[0];
549 $.extend(t, tObj);//复制对象550if (this.CurScore == 4) {
551 txt = ‘不抢‘;
552 }
553 t.text = txt;
554 t.x = postion[this.Lander].x;
555 t.y = postion[this.Lander].y;
556 t.visible = true;
557this.Controls.push(t);
558559560//DdZGame.Statics.DealTime = 0;561//this.drawImage($.proxy(function () { this.Play(this.Lander, ‘抢地主啊‘); }, this), false);562this.FanDiPai(this.Lander);
563return;
564 }
565//if (DdZGame.Statics.IsGetLander) {566// return;567//}568//DdZGame.Statics.IsGetLander = true;//是否在抢地主569 console.log(‘我抢地主‘);
570var btnObj = $.grep(this.Res.Images, $.proxy(function (o, i) {
571return o.type == 63;
572 }, this))[0];
573if (!this.CurScore) {
574this.CurScore = 0;
575 }
576var txtX = 0;
577for (var i = 1; i <= 3; i++) {
578if (i > this.CurScore) {
579var btn = {};
580 $.extend(btn, btnObj);
581 btn.text = i + ‘分‘;
582 btn.x = this.myBtnPostion.x;
583 btn.y = this.myBtnPostion.y;
584 btn.visible = true;
585 btn.type = 63;
586 btn.textX = this.myBtnPostion.x + 30;
587 btn.textY = 286;
588 btn.h = 50;
589 btn.w = 81;
590 btn.Lander = true;
591 btn.onClick = (function (i, obj) { returnfunction () { obj.GetLander(3, i + 1, i); }; })(i, this)
592 DdZGame.Statics.DealTime = 0;
593this.Controls.push(btn);
594this.myBtnPostion.x += btn.w + 10;
595 }
596 }
597if (DdZGame.Statics.DealTime == 0) {
598var btn = {};
599 $.extend(btn, btnObj);
600 btn.text = ‘不抢‘;
601 btn.x = this.myBtnPostion.x;
602 btn.y = this.myBtnPostion.y;
603 btn.visible = true;
604 btn.type = 63;
605 btn.textX = this.myBtnPostion.x + 30;
606 btn.textY = 286;
607 btn.h = 50;
608 btn.w = 81;
609 btn.Lander = true;
610 btn.onClick = $.proxy(function () { this.GetLander(3, minScore, 4); }, this);
611this.Controls.push(btn);
612this.drawImage(null, true);
613 }
614 },
615 FanDiPai: function (lander) {//翻底牌616 DdZGame.Statics.DealTime = 0;
617var p = ‘‘;
618if (lander == 1) {
619 p = ‘rightPokers‘;
620 }
621elseif (lander == 2) {
622 p = ‘myPokers‘;
623 }
624elseif (lander == 3) {
625 p = ‘leftPokers‘;
626 }
627/*谁抢到地主,底牌归谁*/628 $.each(this.LastPokers, $.proxy(function (i, o) {
629var c = {};
630 $.extend(c, o);
631 c.x = null;
632 c.y = null;
633this[p].push(c);
634 test = c.path;
635 }, this));
636if (lander == 2) {
637this.myPokers.sort(function (a, b) {
638 a.x = null;
639 a.y = null;
640 b.x = null;
641 b.y = null;
642if (a.type != b.type)
643return b.type - a.type;
644return b.se - a.se;
645 });
646this.myPannel = { x: 198, y: 330 };
647 DdZGame.Statics[‘myPannel‘] = null;
648 }
649this.drawImage($.proxy(function () { this.isStart = true; this.Play(lander, ‘是地主啊‘); }, this), false);
650 },
651 Play: function (lander, msg) {//出牌652//alert(‘‘);653 }
654 });
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 ：这个是抢地主，谁先抢地主是随机的，如果是先随机到电脑抢地主，那抢地主的分数也是随机的。
...................................未完待续
原文：http://www.cnblogs.com/ChengPuYuan/p/4311772.html
内容总结
以上是互联网集市为您收集整理的Html5 Canvas斗地主游戏全部内容，希望文章能够帮你解决Html5 Canvas斗地主游戏所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】