Exemple d'analyse de code de Html5 Canvas pour implémenter le jeu Doudizhu

Maintenant que j'ai lu les connaissances liées au HTML5 et au canvas 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 ça étape par étape

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

1 .Classe de ressources

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

Resource.Images est un ensemble de matériaux (plusieurs boutons, texte, 54 cartes, images de fond, etc.), vous pouvez télécharger la démo pour avoir un look
2. La classe Labels est utilisée pour dessiner du texte sur le canevas Canvas, comme le texte des boutons. Pour des connaissances connexes, veuillez consulter le didacticiel sur le canevas

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

La méthode setText de cette classe est principalement basée. sur la police définie, la taille de la police et la couleur de la police. Dans Canvas Pour dessiner du texte, this.cxt est le contexte du canevas (le nom est différent dans chaque didacticiel). est de définir la taille de la police, le style, etc., this.cxt.fillStyle = '#000000'; Ceci

est de définir la couleur de la police, this.cxt.textAlign = 'center'; définissez l'alignement de la police, this.cxt.fillText(text, postion.x, postion.y ); Ceci permet de commencer à dessiner du texte sur le canevas, postion.x, postion.y sont respectivement la coordonnée x et la coordonnée y.

3. Catégorie de jeu DdZGame, la fonction principale est d'initialiser les propriétaires, de distribuer des cartes, de récupérer les propriétaires, etc. Les cartes ne sont pas terminées pour continuer, mises à jour de suivi

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 == &#39;myPannel&#39;) {
                    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 + &#39;handle&#39;] = 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 + &#39;handle&#39;] || DdZGame.Statics.DealTime == 0) {
                clearTimeout(DdZGame.Statics[direction + &#39;handle&#39;]);


                if (direction == &#39;leftPannel&#39; && copyLeftPokers.length == 0) {
                    isDealEndLeft = true;
                }
                if (direction == &#39;rightPannel&#39; && copyRightPokers.length == 0) {
                    isDealEndRight = true;
                }
                if (direction == &#39;myPannel&#39; && copyMyPokers.length == 0) {
                    isDealEndMy = true;
                }
                if (direction == &#39;lastPannel&#39; && copyLastPokers.length == 0) {
                    isDealEndLast = true;
                }
                if (isDealEndLeft && isDealEndRight && isDealEndMy && isDealEndLast) {
                    /*发牌完毕*/
                    /*抢地主*/
                    if (callback)
                        callback();
                }
            }
        };


        DrawPokers.call(this, copyLeftPokers, &#39;leftPannel&#39;, true, 26, &#39;y&#39;);
        DrawPokers.call(this, copyRightPokers, &#39;rightPannel&#39;, true, 26, &#39;y&#39;);
        DrawPokers.call(this, copyMyPokers, &#39;myPannel&#39;, false, 19, &#39;x&#39;);

        DrawPokers.call(this, copyLastPokers, &#39;lastPannel&#39;, isUnVisibleLast, 126, &#39;x&#39;);
    },
    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(&#39;无人抢地主&#39;);
        //    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(&#39;Game Over !&#39;);
                        return;
                    }

                    var txt = max + &#39;分&#39;;
                    var t = {};
                    var tObj = $.grep(this.Res.Images, function (o, i) { return o.type == 66; })[0];
                    $.extend(t, tObj);//复制对象
                    if (this.CurScore == 4) {
                        txt = &#39;不抢&#39;;
                    }
                    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(&#39;电脑抢地主&#39;);
                this.CurScore = Math.floor(Math.random() * (4 - minScore + 1) + minScore);

                this.isGetLander[firstGet] = this.CurScore == 4 ? -1 : this.CurScore;

                var txt = this.CurScore + &#39;分&#39;;
                var t = {};
                var tObj = $.grep(this.Res.Images, function (o, i) { return o.type == 66; })[0];
                $.extend(t, tObj);//复制对象
                if (this.CurScore == 4) {
                    txt = &#39;不抢&#39;;
                }

                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 = &#39;地主&#39;;
                    dz.x = t.x + 30;
                    dz.y = t.y;
                    dz.visible = true;

                    this.Controls.push(dz);

                    //this.drawImage($.proxy(function () { this.Play(this.Lander, &#39;电脑地主&#39;); }, this));//电脑抢到地主优先出牌
                    this.FanDiPai(this.Lander);
                    return;
                }
                else {
                    if (this.CurScore == 4) {
                        var test = &#39;abcdefg&#39;;
                    }
                    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 + &#39;分&#39;;
            var t = {};
            var tObj = $.grep(this.Res.Images, function (o, i) { return o.type == 66; })[0];
            $.extend(t, tObj);//复制对象
            if (this.CurScore == 4) {
                txt = &#39;不抢&#39;;
            }
            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 = &#39;地主&#39;;
                dz.x = t.x + 50;
                dz.y = t.y;
                dz.visible = true;

                this.Controls.push(dz);

                //this.drawImage($.proxy(function () { this.Play(this.Lander, &#39;我是地主&#39;); }, 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(&#39;Game Over !&#39;);
                        return;
                    }

                    var txt = &#39;地主&#39;;
                    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, &#39;抢地主啊&#39;); }, 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(&#39;Game Over !&#39;);
                return;
            }

            var txt = max + &#39;分&#39;;
            var t = {};
            var tObj = $.grep(this.Res.Images, function (o, i) { return o.type == 66; })[0];
            $.extend(t, tObj);//复制对象
            if (this.CurScore == 4) {
                txt = &#39;不抢&#39;;
            }
            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, &#39;抢地主啊&#39;); }, this), false);
            this.FanDiPai(this.Lander);
            return;
        }
        //if (DdZGame.Statics.IsGetLander) {
        //    return;
        //}
        //DdZGame.Statics.IsGetLander = true;//是否在抢地主
        console.log(&#39;我抢地主&#39;);
        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 + &#39;分&#39;;
                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 = &#39;不抢&#39;;
            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 = &#39;&#39;;
        if (lander == 1) {
            p = &#39;rightPokers&#39;;
        }
        else if (lander == 2) {
            p = &#39;myPokers&#39;;
        }
        else if (lander == 3) {
            p = &#39;leftPokers&#39;;
        }
        /*谁抢到地主,底牌归谁*/
        $.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[&#39;myPannel&#39;] = null;
        }
        this.drawImage($.proxy(function () { this.isStart = true; this.Play(lander, &#39;是地主啊&#39;); }, this), false);
    },
    Play: function (lander, msg) {//出牌
        //alert(&#39;&#39;);
    }
});

Afficher le code

initialiser : Cette fonction est une constructeur qui initialise certaines StartVariable.

initEvt ici sert à initialiser l'événement canvas. L'événement de clic sur toile n'est pas comme svg, car le canevas est dessiné image par image et chaque élément qu'il contient ne peut pas être vu dans le dom html javascript. Bien sûr, il est impossible d'obtenir un élément dans le canevas. Alors, comment est géré l'événement click de l'élément canevas ?

Définissez d'abord l'événement du canevas, puis définissez pour obtenir les coordonnées de la souris, puis calculez les coordonnées relatives dans le canevas. Parce que chaque élément a également ses propres coordonnées, largeur et hauteur, vous pouvez en juger. en fonction de ces coordonnées. Si la coordonnée se trouve dans un élément.

onControlClick : Cette fonction est basée sur les coordonnées calculées ci-dessus pour déterminer dans quel élément se trouvent les coordonnées si elle se trouve dans l'élément et que la fonction onclick est définie (remarque : c'est le cas. pas vraiment L'événement element est juste une fonction de l'attribut objet ), puis appelle la fonction onclick pour exécuter le code correspondant.

loadImages : Il s'agit de charger toutes les images. Une fois les images chargées, il commence à dessiner les éléments initiaux sur le canevas.

init : Cette fonction appelle la fonction loadImages, puis une fois toutes les images chargées, la fonction de rappel est appelée pour dessiner l'élément initial sur le canevas

Distribution : Il s'agit d'une distribution de cartes, et les cartes de chaque côté sont aléatoires si (DdZGame.Statics.DealedNums >= 51) Après que 51 cartes soient distribuées, il n'y a que 3 trous. cartes restantes, puis piochez ces 51 cartes et 3 cartes fermées sur la toile

GetLander : Il s'agit de saisir le propriétaire foncier en premier, si c'est aléatoire pour l'ordinateur d'attraper le propriétaire foncier. Premièrement, le score pour attraper le propriétaire foncier est également aléatoire.

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!