Doudizhu ゲームを実装するための HTML5 Canvas のサンプルコード分析

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 } ] });

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); } });

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(''); } });