国外对旅游网站的建设,注册咨询服务公司有什么要求,品牌包包都有哪些牌子,企业网站排版规则过完年来公司#xff0c;没什么事#xff0c;主管说研究下html5 游戏#xff0c;然后主管就给了一个斗地主的demo#xff0c;随后我就开始看代码#xff0c; 现在我看了html5以及canvas相关知识和斗地主的demo后#xff0c;自己用demo上的素材试着写了个斗地主#xff0… 过完年来公司没什么事主管说研究下html5 游戏然后主管就给了一个斗地主的demo随后我就开始看代码 现在我看了html5以及canvas相关知识和斗地主的demo后自己用demo上的素材试着写了个斗地主代码没重构好欢迎赐教。 演示地址:CanVas斗地主 话不多说下面就一步一步解释下吧 只有一个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) {4 this.cxt cxt;5 },6 setText: function (text, postion) {7 this.cxt.font bold 20px serif;8 this.cxt.fillStyle #000000;9 this.cxt.textAlign center;
10 this.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;7 this.leftPokers [];8 this.rightPokers [];9 this.myPokers [];10 this.LastPokers [];//最后3张牌11 12 this.leftPlays [];13 this.rightPlays [];14 this.myPlays [];15 16 this.myBtnPostion { y: 245, x: 162 };17 18 this.isStart false;19 20 this.Res new Resource();21 22 this.allPokers new Array();23 24 this.Lander 0;//地主,1右边,2My,3左边25 this.isGetLander {};26 this.GmCanvas document.getElementById(gmCanvas);27 28 29 this.cxt this.GmCanvas.getContext(2d);30 this.Lbl new Labels(this.cxt);31 this.init();32 this.initEvt();33 },34 initEvt: function () {35 this.GmCanvas.onclick $.proxy(function (e) {36 var box this.GmCanvas.getBoundingClientRect();37 38 DdZGame.Statics.MousePostion { x: e.pageX - box.left, y: e.pageY - box.top };39 this.onControlClick();40 }, this);41 },42 onControlClick: function () {43 var isClick false;44 for (var i 0; i this.Controls.length; i) {45 var c this.Controls[i];46 var postion DdZGame.Statics.MousePostion;47 if (c.onClick) {48 if (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;51 break;52 }53 }54 }55 if (!isClick) {56 for (var i 0; i this.myPokers.length; i) {57 var c this.myPokers[i];58 var postion DdZGame.Statics.MousePostion;59 if (c.onClick) {60 if (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;63 break;64 }65 }66 }67 }68 },69 loadImages: function (callback) {70 var loadedNums 0;71 var totalNums this.Res.Images.length - 1;72 this.Controls [];73 $.each(this.Res.Images, $.proxy(function (i, o) {74 if (!o.path) {75 return true;76 }77 o.data new Image();78 o.data.src o.path;79 o.data.onload $.proxy(function () {80 if (o.type 17) {81 this.allPokers.push(o);82 }83 else84 this.Controls.push(o);85 86 87 loadedNums;88 if (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) {96 if (!o.visible)97 return true;98 if (o.type 62) {99 var x 0;
100 for (var i 0; i 54 - DdZGame.Statics.DealedNums ; i) {
101 if (i 0) x o.x;
102 this.cxt.drawImage(o.data, o.x, o.y, o.w, o.h);
103 o.x;
104 }
105 o.x x;
106 }
107 else if (!o.isText) {
108 this.cxt.drawImage(o.data, o.x, o.y, o.w, o.h);
109 }
110 if (o.type 63) {
111 this.Lbl.setText(o.text, { x: o.textX, y: o.textY });
112
113
114
115 if (!o.onClick)
116 o.onClick $.proxy(function () {
117 o.onClick null;
118 o.visible false;
119 this.drawImage();
120 this.Dealing();
121 }, this);
122 }
123
124 if (o.type 66) {
125 this.Lbl.setText(o.text, { x: o.x, y: o.y });
126 }
127 }, this));
128
129
130 /*克隆*/
131 var copyLeftPokers this.leftPokers.slice();
132 var copyRightPokers this.rightPokers.slice();
133 var copyMyPokers this.myPokers.slice();
134 var copyLastPokers this.LastPokers.slice();
135
136 var isDealEndLeft false;
137 var isDealEndRight false;
138 var isDealEndMy false;
139 var isDealEndLast false;
140
141 var beiMain $.grep(this.Res.Images, $.proxy(function (o, i) { return o.type 62; }, this))[0];
142 var DrawPokers function (arry, direction, isBeiMian, identiy, axis) {
143 if (arry arry.length 0) {
144 var o arry[0];
145 var x 0, y 0;
146
147
148
149
150
151
152
153
154
155
156
157
158
159 if (!DdZGame.Statics[direction]) {
160 DdZGame.Statics[direction] this[direction];
161 }
162
163 if (!o.x) {
164 x DdZGame.Statics[direction].x;
165 y DdZGame.Statics[direction].y;
166
167 o.x this[direction].x;
168 o.y this[direction].y;
169 }
170 else {
171 x o.x;
172 y o.y;
173 }
174
175
176 if (!o.visible) {
177 return true;
178 }
179
180
181
182 o.w 18;
183 o.h 129;
184 if (arry.length 1) {
185 o.w 105;
186 o.h 150;
187 }
188
189
190
191
192
193
194
195 var img o.data;
196 if (isBeiMian) {
197 img beiMain.data;
198 }
199 else if (direction myPannel) {
200 o.onClick $.proxy(function () {
201 if (!this.isStart)
202 return;
203 if (!o.isPlay) {
204 o.isPlay true;
205 o.y - 30;
206 }
207 else {
208 o.isPlay false;
209 o.y 30;
210 }
211
212 DdZGame.Statics.DealTime 0;
213 this.drawImage();
214 }, this);
215 }
216 this.cxt.drawImage(img, x, y);
217 DdZGame.Statics[direction][axis] identiy;
218
219 arry.splice(0, 1);
220 if (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);
224 else
225 DrawPokers.call(this, arry, direction, isBeiMian, identiy, axis);
226 }
227 else if (DdZGame.Statics[direction handle] || DdZGame.Statics.DealTime 0) {
228 clearTimeout(DdZGame.Statics[direction handle]);
229
230
231 if (direction leftPannel copyLeftPokers.length 0) {
232 isDealEndLeft true;
233 }
234 if (direction rightPannel copyRightPokers.length 0) {
235 isDealEndRight true;
236 }
237 if (direction myPannel copyMyPokers.length 0) {
238 isDealEndMy true;
239 }
240 if (direction lastPannel copyLastPokers.length 0) {
241 isDealEndLast true;
242 }
243 if (isDealEndLeft isDealEndRight isDealEndMy isDealEndLast) {
244 /*发牌完毕*/
245 /*抢地主*/
246 if (callback)
247 callback();
248 }
249 }
250 };
251
252
253 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);
256
257 DrawPokers.call(this, copyLastPokers, lastPannel, isUnVisibleLast, 126, x);
258 },
259 init: function () {
260 this.loadImages(this.drawImage);
261 },
262 Dealing: function () {//发牌
263 this.leftPannel { x: 5, y: 18 };
264 this.rightPannel { x: 691, y: 18 };
265 this.myPannel { x: 198, y: 330 };
266 this.lastPannel { x: 243, y: 5 };
267
268
269 if (DdZGame.Statics.DealedNums 51) { //发牌完毕
270
271 $.each(this.allPokers, $.proxy(function (i, o) {
272 o.visible true;
273 this.LastPokers.push(o);
274 }, this));
275
276
277 this.myPokers.sort(function (a, b) {
278 if (a.type ! b.type)
279 return b.type - a.type;
280 return b.se - a.se;
281 });
282 $.grep(this.Res.Images, $.proxy(function (o, i) { return o.type 62; }, this))[0].visible false;
283 this.drawImage($.proxy(function () { this.GetLander(); }, this), true);
284
285 }
286 else {
287 /*1、left*/
288 var index Math.floor(Math.random() * (this.allPokers.length - 1) 0);
289 var c this.allPokers.splice(index, 1);
290 c[0].visible true;
291 this.leftPokers.push(c[0]);
292 DdZGame.Statics.DealedNums;
293
294 /*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;
298 this.rightPokers.push(c[0]);
299 DdZGame.Statics.DealedNums;
300
301 index Math.floor(Math.random() * (this.allPokers.length - 1) 0);
302 c this.allPokers.splice(index, 1);
303 c[0].visible true;
304 this.myPokers.push(c[0]);
305 DdZGame.Statics.DealedNums;
306
307 this.Dealing();
308 }
309 },
310 GetLander: function (firstGet, minScore, curScore) {
311 /*随机出谁先叫地主*/
312
313 //if (curScore !this.isGetLander[1] !this.isGetLander[2] !this.isGetLander[3]) {
314 // //**Game Over !
315 // alert(无人抢地主);
316 // return;
317 //}
318
319
320 var postion { 1: { y: 100, x: 640 }, 3: { y: 100, x: 126 }, 2: { x: 216, y: 297 } };
321 if (!curScore) {
322 if (!minScore)
323 minScore 1;
324 if (!firstGet)
325 firstGet Math.floor(Math.random() * (3 - 1 1) 1);
326 if (firstGet 1 || firstGet 3) { //电脑抢地主
327 if (this.isGetLander[firstGet] -1 || this.isGetLander[firstGet]) {
328 $.each(this.Controls, $.proxy(function (i, o) {
329 if (o.Lander) {
330 o.visible false;
331 }
332 }, this));
333
334 var max 0;
335 if (this.isGetLander[1] this.isGetLander[2]) {
336 max this.isGetLander[1];
337 this.Lander 1;
338 }
339 else {
340 max this.isGetLander[2];
341 this.Lander 2;
342 }
343 if (max this.isGetLander[3]) {
344 max this.isGetLander[3];
345 this.Lander 3;
346 }
347 if (max 0) {
348 alert(Game Over !);
349 return;
350 }
351
352 var txt max 分;
353 var t {};
354 var tObj $.grep(this.Res.Images, function (o, i) { return o.type 66; })[0];
355 $.extend(t, tObj);//复制对象
356 if (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;
363 this.Controls.push(t);
364
365
366
367 //this.drawImage($.proxy(function () {
368
369 // this.FanDiPai(this.Lander);
370 //}, this));
371 this.FanDiPai(this.Lander);
372 return;
373 }
374 console.log(电脑抢地主);
375 this.CurScore Math.floor(Math.random() * (4 - minScore 1) minScore);
376
377 this.isGetLander[firstGet] this.CurScore 4 ? -1 : this.CurScore;
378
379 var txt this.CurScore 分;
380 var t {};
381 var tObj $.grep(this.Res.Images, function (o, i) { return o.type 66; })[0];
382 $.extend(t, tObj);//复制对象
383 if (this.CurScore 4) {
384 txt 不抢;
385 }
386
387 t.text txt;
388 t.x postion[firstGet].x;
389 t.y postion[firstGet].y;
390 t.visible true;
391
392 this.Controls.push(t);
393
394 if (this.CurScore 3) {
395 this.Lander firstGet;
396 //DdZGame.Statics.IsGetLander true;
397 //DdZGame.Statics.DealTime 0;
398
399 var dz {};
400 $.extend(dz, tObj);//复制对象
401 dz.text 地主;
402 dz.x t.x 30;
403 dz.y t.y;
404 dz.visible true;
405
406 this.Controls.push(dz);
407
408 //this.drawImage($.proxy(function () { this.Play(this.Lander, 电脑地主); }, this));//电脑抢到地主优先出牌
409 this.FanDiPai(this.Lander);
410 return;
411 }
412 else {
413 if (this.CurScore 4) {
414 var test abcdefg;
415 }
416 var nextGet firstGet 1 ? 2 : 1;
417 minScore this.CurScore 4 ? minScore : this.CurScore 1;
418 this.CurScore this.CurScore 4 ? 0 : this.CurScore;
419
420
421 DdZGame.Statics.DealTime 0;
422 this.drawImage($.proxy(function () { this.GetLander(nextGet, minScore); }, this), true);//电脑抢到地主优先出牌
423 return;
424 }
425 }
426 }
427 if (curScore) {
428 /*代码写的很垃圾,这点没用面向对象*/
429 /*My已经叫过地主按钮需要隐藏*/
430 $.each(this.Controls, $.proxy(function (i, o) {
431 if (o.Lander) {
432 o.visible false;
433 }
434 }, this));
435
436 this.CurScore curScore;
437 var txt this.CurScore 分;
438 var t {};
439 var tObj $.grep(this.Res.Images, function (o, i) { return o.type 66; })[0];
440 $.extend(t, tObj);//复制对象
441 if (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;
448 this.Controls.push(t);
449
450 this.isGetLander[2] curScore 4 ? -1 : curScore;
451
452 if (this.CurScore 3 || (this.isGetLander[1] this.isGetLander[3] this.CurScore ! 4)) {
453 this.Lander 2;
454 //DdZGame.Statics.IsGetLander true;
455 //DdZGame.Statics.DealTime 0;
456
457 var dz {};
458 $.extend(dz, tObj);//复制对象
459 dz.text 地主;
460 dz.x t.x 50;
461 dz.y t.y;
462 dz.visible true;
463
464 this.Controls.push(dz);
465
466 //this.drawImage($.proxy(function () { this.Play(this.Lander, 我是地主); }, this), false);//电脑抢到地主优先出牌
467 this.FanDiPai(this.Lander);
468 return;
469 }
470 else {
471 minScore this.CurScore 4 ? minScore : this.CurScore 1;
472 this.CurScore this.CurScore 4 ? 0 : this.CurScore;
473 if (!this.isGetLander[3]) {
474 DdZGame.Statics.DealTime 0;
475 this.drawImage($.proxy(function () { this.GetLander(3, minScore) }, this), true);
476 return;
477 }
478 else { //已经转了一圈,则比较抢地主的分数大小
479 var max 0;
480 if (this.isGetLander[1] this.isGetLander[2]) {
481 max this.isGetLander[1];
482 this.Lander 1;
483 }
484 else {
485 max this.isGetLander[2];
486 this.Lander 2;
487 }
488 if (max this.isGetLander[3]) {
489 max this.isGetLander[3];
490 this.Lander 3;
491 }
492 if (max 0) {
493 alert(Game Over !);
494 return;
495 }
496
497 var txt 地主;
498 var t {};
499 var 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;
504 if (this.Lander ! 2) {
505 t.x 30;
506 }
507 else {
508 t.x 50;
509 }
510 t.visible true;
511 this.Controls.push(t);
512
513
514 //DdZGame.Statics.DealTime 0;
515 //this.drawImage($.proxy(function () { this.Play(this.Lander, 抢地主啊); }, this), false);
516 this.FanDiPai(this.Lander);
517 return;
518 }
519 }
520 }
521 else if (this.isGetLander[2] -1 || this.isGetLander[2]) {
522 $.each(this.Controls, $.proxy(function (i, o) {
523 if (o.Lander) {
524 o.visible false;
525 }
526 }, this));
527
528 var max 0;
529 if (this.isGetLander[1] this.isGetLander[2]) {
530 max this.isGetLander[1];
531 this.Lander 1;
532 }
533 else {
534 max this.isGetLander[2];
535 this.Lander 2;
536 }
537 if (max this.isGetLander[3]) {
538 max this.isGetLander[3];
539 this.Lander 3;
540 }
541 if (max 0) {
542 alert(Game Over !);
543 return;
544 }
545
546 var txt max 分;
547 var t {};
548 var tObj $.grep(this.Res.Images, function (o, i) { return o.type 66; })[0];
549 $.extend(t, tObj);//复制对象
550 if (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;
557 this.Controls.push(t);
558
559
560 //DdZGame.Statics.DealTime 0;
561 //this.drawImage($.proxy(function () { this.Play(this.Lander, 抢地主啊); }, this), false);
562 this.FanDiPai(this.Lander);
563 return;
564 }
565 //if (DdZGame.Statics.IsGetLander) {
566 // return;
567 //}
568 //DdZGame.Statics.IsGetLander true;//是否在抢地主
569 console.log(我抢地主);
570 var btnObj $.grep(this.Res.Images, $.proxy(function (o, i) {
571 return o.type 63;
572 }, this))[0];
573 if (!this.CurScore) {
574 this.CurScore 0;
575 }
576 var txtX 0;
577 for (var i 1; i 3; i) {
578 if (i this.CurScore) {
579 var 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) { return function () { obj.GetLander(3, i 1, i); }; })(i, this)
592 DdZGame.Statics.DealTime 0;
593 this.Controls.push(btn);
594 this.myBtnPostion.x btn.w 10;
595 }
596 }
597 if (DdZGame.Statics.DealTime 0) {
598 var 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);
611 this.Controls.push(btn);
612 this.drawImage(null, true);
613 }
614 },
615 FanDiPai: function (lander) {//翻底牌
616 DdZGame.Statics.DealTime 0;
617 var p ;
618 if (lander 1) {
619 p rightPokers;
620 }
621 else if (lander 2) {
622 p myPokers;
623 }
624 else if (lander 3) {
625 p leftPokers;
626 }
627 /*谁抢到地主,底牌归谁*/
628 $.each(this.LastPokers, $.proxy(function (i, o) {
629 var c {};
630 $.extend(c, o);
631 c.x null;
632 c.y null;
633 this[p].push(c);
634 test c.path;
635 }, this));
636 if (lander 2) {
637 this.myPokers.sort(function (a, b) {
638 a.x null;
639 a.y null;
640 b.x null;
641 b.y null;
642 if (a.type ! b.type)
643 return b.type - a.type;
644 return b.se - a.se;
645 });
646 this.myPannel { x: 198, y: 330 };
647 DdZGame.Statics[myPannel] null;
648 }
649 this.drawImage($.proxy(function () { this.isStart true; this.Play(lander, 是地主啊); }, this), false);
650 },
651 Play: function (lander, msg) {//出牌
652 //alert();
653 }
654 }); 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 这个是抢地主谁先抢地主是随机的如果是先随机到电脑抢地主那抢地主的分数也是随机的。 ...................................未完待续 转载于:https://www.cnblogs.com/ChengPuYuan/p/4311772.html
