Html5 Doudizhu échecs et configuration des cartes Canvas pour réaliser l'analyse du code du jeu Doudizhu

Maintenant, après avoir lu h5.zhengtuwl.comhtml5 et les connaissances liées au canevas et la démo de Doudizhu, j'ai essayé d'écrire un Doudizhu en utilisant les matériaux de la démo. Le code n'a pas été bien refactorisé. J'apprécie vos conseils.

Pas grand chose à dire, expliquons-le étape par étape

Il n'y a qu'un seul fichier common.js

Classe de ressources

var Resource = Class.create();
$.extend(Resource.prototype, {
   initialize : function () { },
   Images : [
       { chemin : 'img/ bg1.png', x : 0, y : 0, w : 800, h : 480, données : null, type : 61, visible : vrai },
       { chemin : 'img/BeiMian.jpg', x : 320, y : 5, w : 100, h : 121, données : null, type : 62, visible : true },
       { chemin : 'img/btn.jpg', x : 300, y : 281, w : 140, h : 50, données : null, tapez : 63, visible : vrai, texte : '开始', textX : 366, textY : 310 },
       { x : 0, y : 0, tapez : 66, isText : true, visible : false },
       { chemin : 'img/1.jpg', données : null, type : 16, visible : false },
       { chemin : 'img/2.jpg', data : null, tapez : 17, visible : false },
       { chemin : 'img/3.jpg', data : null, tapez : 3, visible : false, se: 1 },
        { chemin : 'img/4.jpg', données : null, tapez : 4, visible : false, se : 1 },
       { chemin : 'img/5.jpg', données : null, tapez : 5, visible : false , se : 1 },
       { chemin : 'img/6.jpg', données : null, type : 6, visible : faux, se: 1 },
       { chemin : 'img/7.jpg' , données : null, type : 7, visible : faux, se : 1 },
       { chemin : 'img/8.jpg', données : null, type : 8, visible : faux, se : 1 },
       { chemin : 'img/9.jpg', données : null, tapez : 9, visible : false, se : 1 },
       { chemin : 'img/10.jpg', données : null, tapez : 10, visible : faux, se : 1 },
       { chemin : 'img/11.jpg', données : null, type : 11, visible : faux, se : 1 },
        { chemin : 'img /12.jpg', données : null, tapez : 12, visible : false, se : 1 },
       { chemin : 'img/13.jpg', données : null, tapez : 13, visible : false, se : 1 },
       { chemin : 'img/14.jpg', données : null, type : 14, visible : faux, se : 1 },
       { chemin : 'img/15.jpg', données : null, tapez : 15, visible : false, se: 1 },
       { chemin : 'img/16.jpg', données : null, tapez : 3, visible : false, se: 4 },
{ chemin : 'img/17.jpg', données : null, type : 4, visible : false, se : 4 },
       { chemin : 'img/18.jpg', données : null, type : 5, visible : faux, se : 4 },
       { chemin : 'img/19.jpg', données : null, tapez : 6, visible : faux, se: 4 },
       { chemin : 'img/20 .jpg', données : null, type : 7, visible : false, se : 4 },
       { chemin : 'img/21.jpg', données : null, type : 8, visible : false, se : 4 },
       { chemin : 'img/22.jpg', données : null, type : 9, visible : false, se : 4 },
       { chemin : 'img/23.jpg', données : null , tapez : 10, visible : false, se: 4 },
       { chemin : 'img/24.jpg', données : null, tapez : 11, visible : false, se: 4 },
       { chemin : 'img/25.jpg', données : null, tapez : 12, visible : false, se: 4 },
       { chemin : 'img/26.jpg', données : null, tapez : 13, visible : false, se : 4 },
       { chemin : 'img/27.jpg', données : null, type : 14, visible : false, se: 4 },
       { chemin : 'img/28.jpg ', données : null, type : 15, visible : faux, se : 4 },
       { chemin : 'img/29.jpg', données : null, type : 3, visible : faux, se : 3 },
       { chemin : 'img/30.jpg', données : null, tapez : 4, visible : false, se : 3 },
       { chemin : 'img/31.jpg', données : null, tapez : 5, visible : faux, se : 3 },
       { chemin : 'img/32.jpg', données : null, type : 6, visible : faux, se : 3 },
       { chemin : ' img/33.jpg', données : null, tapez : 7, visible : faux, se : 3 },
       { chemin : 'img/34.jpg', données : null, tapez : 8, visible : faux, se : 3 },
       { chemin : 'img/35.jpg', données : null, type : 9, visible : faux, se: 3 },
       { chemin : 'img/36.jpg', data : null, tapez : 10, visible : false, se : 3 },
       { chemin : 'img/37.jpg', data : null, tapez : 11, visible : false, se: 3 },
       { chemin : 'img/38.jpg', données : null, type : 12, visible : false, se : 3 },
       { chemin : 'img/39.jpg', données : null, type : 13 , visible : faux, se : 3 },
       { chemin : 'img/40.jpg', données : null, type : 14, visible : faux, se : 3 },
       { chemin : 'img/41.jpg', données : null, type : 15, visible : false, se : 3 },
       { chemin : 'img/42.jpg', données : null, type : 3, visible : faux, se : 2 },
       { chemin : 'img/43.jpg', données : null, type : 4, visible : faux, se: 2 },
       { chemin : 'img/44 .jpg', données : null, type : 5, visible : false, se : 2 },
       { chemin : 'img/45.jpg', données : null, type : 6, visible : false, se : 2 },
       { chemin : 'img/46.jpg', données : null, type : 7, visible : false, se : 2 },
       { chemin : 'img/47.jpg', données : null , tapez : 8, visible : false, se : 2 },
       { chemin : 'img/48.jpg', données : null, tapez : 9, visible : false, se: 2 },
        { chemin : 'img/49.jpg', données : null, tapez : 10, visible : false, se: 2 },
       { chemin : 'img/50.jpg', données : null, tapez : 11, visible : false, se : 2 },
       { chemin : 'img/51.jpg', données : null, type : 12, visible : false, se: 2 },
       { chemin : 'img/52.jpg ', données : null, type : 13, visible : faux, se : 2 },
       { chemin : 'img/53.jpg', données : null, type : 14, visible : faux, se : 2 },
       { chemin : 'img/54.jpg', données : null, type : 15, visible : faux, se : 2 }
   ]
});

Ressource .Images是素材数组(几个按钮，文本，54张牌,背景图片等),大家可以下载demo看看 
2、Lables类,在Canvas画布上画文本的,比如按钮文字,相关知识请看canvas教程

var Labels = Class.create();
$.extend(Labels.prototype, {
   initialize : function (cxt) {
       this.cxt = cxt;
    },
   setText : function (texte, position) {
       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';是设置字体对齐这个是开始在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; je &Lt ; 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;
                  pause ;
               }
           }
       }
       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 position.x <= c.x + c.w && postion.y >= c.y && postion.y <= c.y + c.h) {
                       c.onClick();
                       isClick = true;
                    pause;
                   }
                }
           }
         }
   },
   loadImages: function (callback) {
       varloadedNums = 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 () {
              si (o .type <= 17) {
                   this.allPokers.push(o);
               }
               else
                 this.Controls.push(o);


            loadedNums++;
               if (loadedNums >= totalNums ) {
                   callback.call(this);
               },
       }, this));
   },
  drawImage : fonction (rappel, isUnVisibleLast) { //isVisibleLast 是否让底牌不可见
       $.each(this.Controls, $.proxy(function (i, o) {
           if (!o.visible)
              return true;
           si (o.type == 62) {
               var x = 0;
               pour (var i = 0; i < 54 - DdZGame.Statics.DealedNums ; i++) {
                 si (je == 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.draw Image();
                       this.Dealing();
                   }, this);
           }

           if (o.type == 66) {
               this.Lbl.setText(o.text, { x: o.x, y o: .y }); < .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, identité, axis) {
           if (arry && arry.length > 0) {
               var o = arry [0];
               var x = 0, y = 0;


               if (!DdZGame.Statics[direction]) {
                   DdZGame.Statics[direction] = cette[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] += identité;

               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);
           }
          sinon si (DdZGame.Statics[direction + 'poignée'] || DdZGame.Statics.DealTime == 0) {
               clearTimeout(DdZGame.Statics[direction + 'poignée']);


              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 (rappel)
                       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);
    },
   Traitement : 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 = .étage (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 : fonction (firstGet , minScore, curScore) {
                                                                                                                                                                  / Isgetlander [3]) {
// // ** Game over !
// Alerte ("Personne n'attrape le propriétaire"); > // retour ;
//}
🎜>
var position = { 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) { //L'ordinateur récupère le propriétaire foncier
if (this.isGetLander[firstGet] == ​​-1 || this.isGetLander[firstGet]) {
                                                                                                                                     visible = faux ;
                                                                                                                                 , this));

var max = 0;
if (this.isG etLander[1 ] > this.isGetLander[2]) {
max = this.isGetLander[1];
                         this.Lander = 1;                                                max = this.isGetLander[2];
this.Lander = 2;
}
if (max < this.isgetlander [3]) {
max = this.isgetlander [3];
this.lander = 3;
if ( max == 0) {                                                                                                                                        var t = {};
            var tObj = $.grep(this .Res.Images, function (o, i) { return o .type == 66; })[0];
                     $.extend(t, tObj);//Copier l'objet
                                                                                  == 4) {
                  t.text = txt;        t.x = position[this .Lander].x;
            t.y = position[this .Lander].y;
                  t.visible = true;                   //this.drawImage($.proxy(function () {

                   //    this.FanDiPai(this.Lander);
                   //}, this));
                 ceci.FanDiPai(ce .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, fonction (o, i) { return o.type == 66; })[0];
               $.extend(t, tObj);//复制对象
               if (this.CurScore == 4) {
                   txt = '不抢';
               }

               t.text = txt;
               t.x = 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 ($. ), vrai);//电脑抢到地主优先出牌
                   return;
               }
           }
        }
       if (curScore) {
           /*代码写的很垃圾,这点没用面向对象*/
/*Mon a appelé le propriétaire, le bouton doit être masqué*/
                                                                                                                                                                                                                             . visible = false;
}
}, this));

this.CurScore = curScore;
var txt = this.CurScore + 'point';
var t = { };
var tObj = $.grep(this.Res.Images, function (o, i) { return o.type = = 66; })[0];
var tObj = $.extend(t, tObj) ;//Copier l'objet
if (this.CurScore == 4) {
txt = 'Pas de saisie' ;
}
t.text = txt;
        t.x = position[2] .x;
t.y = position[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);//Copier l'objet
              dz.text = 'Landlord';
            dz .x = t.x + 50;
            dz.y = t.y;
dz.visible = true;

this.Controls.push(dz);

//this. drawImage($.proxy(function () { this.Play(this.Lander, 'I am the landlord' ); }, this), false);//L'ordinateur attrape le propriétaire et joue la carte en premier
this .FanDiPai(this.Lander);
return;
}
else {
minScore = this.CurScore == 4 0 : this.CurScore;
if (!this.isGetLander[ 3]) {
                                                                                                                                 retour ;
                                        
                                                                                                                                                                                                                                                                                                 ]) {< T> max = this.isgetlander [1];
this.lander = 1
}
Else {<🎜; > max = this.isgetlander [2];
                                                                                                                                                                                                                       parce que                       this.Lander = 3;
                                   if (max == 0) {
                       alert('Game Over !');
                    retour;
                   }

                   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 = position[this.Lander].x;
                   t.y = position[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(fonction () { this.Play(this.Lander, '抢地主啊'); }, this), false);
                   this.FanDiPai(this.Lander);
                   return;
               }
           }
     }
       sinon si (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;

           }
           si ( 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);//复制对象
           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;
       pour (var i = 1; i <= 3; i++) {
        si (i > this.CurScore) {
               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 = (fonction (i, obj) { return function () { obj.GetLander(3, i + 1, i); } ; })(je, ceci)
               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 = vrai;
btn.onClick = $.proxy(function () { this.GetLander(3, minScore, 4); }, this);
           this.Controls.push(btn);
           this.drawImage(null, true );
       }
     si ( lander == 1) {
           p = 'rightPokers';
       >
       else if (lander == 2) {
           p = 'myPokers';
       >            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;
               by = 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 : fonction (lander, msg) {//出牌
//alert('');
   }
});

Afficher le code

initialize：这个函数是构造函数，初始化一些起始变量。

initEvt这个里是初始化canvas事件,canvas点击事件不像svg那样，因为canvas是一帧一帧画上去的，html dom里是看不到里面的每个元素，javascript自然也无法获取到canvas里的某个元素,那canvas元素点击事件是怎么处理的了？

首先定义下Canvas这个画布的事件，然后定义获取鼠标的坐标，再算出在canvas相对坐标，因为每个元素也都有自己的坐标和宽高，所以可以根据这个坐标判断这个坐标是否在某个元素内。

onControlClick：这个函数是根据上面算出的坐标，判断此坐标在哪个元素内，如果在元素内，并且定义了onclick函数(注:此处并不是真正的元素事件，只是对象的一个函数属性),然后调用onclick函数，执行相应的代码。

loadImages：这个是加载所有图片，图片加载完成之后，就开始在canvas上画初始的元素。

init：这Les téléchargements de LoadImages ont été effectués.之后，调用回调函数，在canvas上画初始的元素

Dealing ：这个是发牌，每方的牌都是随机的，if(DdZGame.Stat ics.DealedNums >= 51) et 51 GetLander ：这个是抢地主，谁先抢地主是随机的，如果是先随机到电脑抢地主，那抢地主的分数也是随机的。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!