Beispielcode-Analyse von Html5 Canvas zur Implementierung des Doudizhu-Spiels

Nachdem ich HTML5- und Canvas-bezogenes Wissen sowie die Demo von Doudizhu gelesen habe, habe ich versucht, ein Doudizhu mit den Materialien auf der Demo zu schreiben. Ich begrüße Ihren Rat.

Da gibt es nicht viel zu sagen, erklären wir es Schritt für Schritt

Es gibt nur eine common.js-Datei

1 . Ressourcenklasse

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 ist eine Reihe von Materialien (mehrere Schaltflächen, Text, 54 Karten, Hintergrundbilder usw.), Sie können die Demo herunterladen, um eine zu erhalten Look
2. Die Labels-Klasse wird zum Zeichnen von Text auf der Canvas-Leinwand verwendet, z. B. Schaltflächentext. Weitere Informationen finden Sie im Canvas-Tutorial.

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

Die Methode setText basiert hauptsächlich auf dieser Klasse Auf der eingestellten Schriftart, Schriftgröße und Schriftfarbe ist this.cxt der Canvas-Kontext (der Name ist in jedem Tutorial unterschiedlich). Erstens: this.cxt.font = 'bold 20px serif'; dient zum Festlegen der Schriftgröße, des Stils usw., this.cxt.fillStyle = '#000000'; Dies dient zum Festlegen der Schriftfarbe, this.cxt.textAlign = 'center'; Legen Sie die Schriftartausrichtung fest, this.cxt.fillText(text, postion.x, postion.y ); Hiermit wird mit dem Zeichnen von Text auf der Leinwand begonnen. postion.x, postion.y sind die x-Koordinate bzw. die y-Koordinate.

3. DdZGame-Spielkategorie, die Hauptfunktion besteht darin, Vermieter zu initialisieren, Karten auszugeben, Vermieter zu schnappen usw. Die Karten sind noch nicht fertig, um fortgeführt zu werden, Folgeaktualisierungen

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

Code anzeigen

initialisieren

: Diese Funktion ist ein Konstruktor , der einige StartVariablen initialisiert. initEvt dient hier dazu, das Canvas-Klickereignis zu initialisieren, da die Leinwand Frame für Frame gezeichnet wird und nicht jedes Element darin im HTML-Dom sichtbar ist

Natürlich ist es unmöglich, ein Element im Canvas zu erhalten. Wie wird also das Klickereignis des Canvas-Elements behandelt?

Definieren Sie zuerst das Ereignis der Leinwand, definieren Sie dann, um die Koordinaten der Maus zu erhalten, und berechnen Sie dann die relativen Koordinaten in der Leinwand. Da jedes Element auch seine eigenen Koordinaten, Breite und Höhe hat, können Sie dies beurteilen basierend auf diesen Koordinaten. Ob die Koordinate innerhalb eines Elements liegt.

onControlClick

: Diese Funktion basiert auf den oben berechneten Koordinaten, um zu bestimmen, in welchem ​​Element sich die Koordinaten befinden. Wenn es innerhalb des Elements liegt und die Onclick-Funktion definiert ist (Hinweis: Dies ist nicht wirklich Das Elementereignis ist nur eine Funktion des Objekts

Attribut ) und ruft dann die Onclick-Funktion auf, um den entsprechenden Code auszuführen. loadImages

: Hiermit werden alle Bilder geladen. Nachdem die Bilder geladen wurden, werden die ersten Elemente auf die Leinwand gezeichnet.

init

: Diese Funktion ruft die Funktion „loadImages“ auf. Nachdem alle Bilder geladen wurden, wird die

Rückruffunktion aufgerufen, um das erste Element auf der Leinwand zu zeichnen Austeilen

: Dies ist ein Kartenausteilen, und die Karten jeder Seite sind zufällig, wenn (DdZGame.Statics.DealedNums >= 51) Nachdem 51 Karten ausgeteilt wurden, gibt es nur noch 3 Löcher Karten übrig, und dann ziehen Sie diese 51 Karten und 3 Hole Cards auf die Leinwand

GetLander: Wer zuerst den Grundbesitzer schnappt, ist für den Computer zufällig Erstens ist die Punktzahl für die Ergreifung des Grundbesitzers ebenfalls zufällig.

Das obige ist der detaillierte Inhalt vonBeispielcode-Analyse von Html5 Canvas zur Implementierung des Doudizhu-Spiels. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!