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

HTML5 と canvas 関連の知識と Doudizhu のデモを読んだ後、デモの資料を使用して Doudizhu を作成しようとしましたが、コードがうまくリファクタリングされませんでした。

あまり言うことはありませんので、順を追って説明しましょう

common.js ファイルは 1 つだけです

1. リソース クラス

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 はマテリアルの配列です (いくつかのボタン、テキスト、54 枚のカード、背景画像など)、デモをダウンロードしてご覧ください。2. ボタン テキストなどのテキストをキャンバス キャンバスに描画するラベル クラス。関連する知識については、キャンバス チュートリアルを参照してください。

var Labels = Class.create();
$.extend(Labels.prototype, {
    initialize: function (cxt) {
        this.cxt = cxt;
    },
    setText: function (text, postion) {
        this.cxt.font = 'bold 20px serif';
        this.cxt.fillStyle = '#000000';
        this.cxt.textAlign = 'center';
        this.cxt.fillText(text, postion.x, postion.y);
    }
});

このクラスのsetTextメソッドは主にCanvas上にフォント、フォントサイズ、フォントカラーを設定し、テキストを描画するのをベースにしています（名前はチュートリアルごとに異なります）。 .font = 'bold 20px serif'; これは、フォントのサイズ、スタイルなどを設定します。 this.cxt.fillStyle = '#000000'; この

は、フォントの色を設定します。 this.cxt.textAlign = 'center '; これは、フォントの配置を設定します。 this.cxt.fillText(text , postion.x, postion.y); これは、キャンバス上にテキストの描画を開始します。それぞれコーディネートします。

3. DdZGame ゲーム カテゴリ、主な機能は家主の初期化、カードの配り、家主の取得などです。カードは継続するために完成していません。フォローアップ更新

var DdZGame = Class.create();
DdZGame.Statics = { DealedNums: 0, isLeftFirstDeal: true };
$.extend(DdZGame.prototype, {
    initialize: function () {
        DdZGame.Statics.IsGetLander = false;
        DdZGame.Statics.DealTime = 66;
        this.leftPokers = [];
        this.rightPokers = [];
        this.myPokers = [];
        this.LastPokers = [];//最后3张牌

        this.leftPlays = [];
        this.rightPlays = [];
        this.myPlays = [];

        this.myBtnPostion = { y: 245, x: 162 };

        this.isStart = false;

        this.Res = new Resource();

        this.allPokers = new Array();

        this.Lander = 0;//地主,1右边,2My,3左边
        this.isGetLander = {};
        this.GmCanvas = document.getElementById('gmCanvas');


        this.cxt = this.GmCanvas.getContext('2d');
        this.Lbl = new Labels(this.cxt);
        this.init();
        this.initEvt();
    },
    initEvt: function () {
        this.GmCanvas.onclick = $.proxy(function (e) {
            var box = this.GmCanvas.getBoundingClientRect();

            DdZGame.Statics.MousePostion = { x: e.pageX - box.left, y: e.pageY - box.top };
            this.onControlClick();
        }, this);
    },
    onControlClick: function () {
        var isClick = false;
        for (var i = 0; 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;);
    }
});

コードを表示

initialize

: これ 関数は、いくつかの開始変数を初期化するコンストラクターです。 initEvt キャンバスのクリックイベントは svg とは異なり、その中の各要素は HTML dom では見ることができず、当然

javascript

を取得できません。 Canvas 内の特定の要素について、Canvas 要素のクリック イベントはどのように処理されますか? 最初にキャンバスのイベントを定義し、次にマウスの座標を取得するように定義し、次にキャンバス内の相対座標を計算します。各要素も独自の座標、幅、高さを持っているため、座標が収まっているかどうかを判断できます。要素内のこれらの座標に基づく特定の位置。

onControlClick

: この関数は、上記で計算された座標に基づいて、その座標が要素内にある場合にその要素が決定され、onclick 関数が定義されています (注: これは実際の要素イベントではなく、単なるイベントです)。オブジェクト Attribute の関数) を呼び出し、onclick 関数を呼び出して対応するコードを実行します。

loadImages

: これは、すべての画像をロードします。画像がロードされた後、キャンバス上に初期要素の描画が開始されます。

init

: この関数は、loadImages 関数を呼び出し、すべての画像がロードされた後、コールバック関数を呼び出してキャンバス上に初期要素を描画します

Dealing

: これはカードを配ります、各パーティのカードはランダムです。 if (DdZGame.Statics.DealedNums >= 51) 51 枚のカードが配られた後、ホール カードは 3 枚だけ残り、これらの 51 枚のカードと 3 枚のホール カードがキャンバス上に描画されます。 GetLander: これは家主を掴みます。最初に家主を掴む人はランダムです。コンピューターが最初に家主をランダムに掴む場合、家主を掴むスコアもランダムです。

以上がDoudizhu ゲームを実装するための HTML5 Canvas のサンプルコード分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。