Sample code analysis of Html5 Canvas to implement Doudizhu game

Now after reading about HTML5 and canvas related knowledge and the demo of Doudizhu, I tried to write a Doudizhu using the materials on the demo. The code was not refactored well. I welcome your advice.

Not much to say, let’s explain it step by step

There is only one common.js file

1. Resource class

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 is an array of materials (several buttons, text, 54 cards, background pictures, etc.), you can download the demo to see
2, Labels class , draw text on the Canvas canvas, such as button text. For related knowledge, please see the 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);
    }
});

The method setText of this class is mainly used to draw text on the Canvas based on the set font, font size, and font color. , this.cxt is the canvas context (the name is different in each tutorial), first this.cxt.font = 'bold 20px serif'; this is to set the font size, style, etc., this.cxt.fillStyle = '#000000 ';This

is to set the font color, this.cxt.textAlign = 'center';This is to set the font alignment, this.cxt.fillText(text, postion.x, postion.y);This is Start drawing text on the canvas, postion.x, postion.y are the x coordinate and y coordinate respectively.

3, DdZGame game category, the main function is to initialize Landlords, deal cards, grab Landlords, etc. The cards are not finished to be continued, subsequent updates

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

View Code

initialize: This function is the constructor function , which initializes some initialization variable.

initEvt This is to initialize the canvas event. The canvas click event is not like svg, because the canvas is drawn frame by frame, and each element inside cannot be seen in the html dom. javascript Naturally, it is impossible to obtain an element in the canvas. How is the click event of the canvas element handled?

First define the event of canvas, then define to get the coordinates of the mouse, and then calculate the relative coordinates in the canvas. Because each element also has its own coordinates, width and height, you can judge this based on these coordinates. Whether the coordinate is within an element.

onControlClick: This function is based on the coordinates calculated above to determine which element the coordinates are within. If it is within the element, and the onclick function is defined (note: this is not really The element event is just a function of the objectAttribute), and then the onclick function is called to execute the corresponding code.

loadImages: This is to load all images. After the images are loaded, it starts to draw the initial elements on the canvas.

init: This function is to call the loadImages function, and then after all images are loaded, call the callback function to draw the initial elements on the canvas

Dealing: This is a card deal, and the cards of each side are random. if (DdZGame.Statics.DealedNums >= 51) After 51 cards are dealt, there are only 3 hole cards left, and then Draw these 51 cards and 3 hole cards on the canvas

GetLander: This is to grab the landlord. Whoever grabs the landlord first is random. If it is random to the computer to grab the landlord first, the score for grabbing the landlord is also random. of.

The above is the detailed content of Sample code analysis of Html5 Canvas to implement Doudizhu game. For more information, please follow other related articles on the PHP Chinese website!