使用Poker.js在html页面上绘制扑克牌

超、凢脫俗 2022-10-02 03:59 190阅读 0赞

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][]

今天研究了下Poker.js，Poker.js是通过扩展HTML5 Canvas实现的画扑克牌的JS库。

Poker.js下载地址：[https://github.com/Tairraos/Poker.JS][https_github.com_Tairraos_Poker.JS]

如要使用Poker.js，从github下载代码后，直接引用release目录下的poker.min.js即可。

以下代码使用Chrome浏览器运行，Chrome浏览器版本号为：52.0.2743.116 m

### **测试代码1：在随机位置放置随机大小的54张纸牌** ###

![220835_ZKCW_1425762.png][]

html代码如下：

<html>
      <head>
        <title>Poker.js测试</title>
      </head>
      <body>
        <div id="container">
           
        </div>
      </body>
      <script src="./poker.min.js"></script>
      <script>
    
        if (window.Poker) {
    
            var container = document.getElementById('container');
            var domCanvas = document.createElement('canvas');
            var canvas = domCanvas.getContext('2d');
            var param = {};
            container.appendChild(domCanvas);
    
            var min_w = 0;
            var max_w = 1000;
            var min_h = 0;
            var max_h = 400;
            var min_size = 50;
            var max_size = 200;
    
            domCanvas.height = max_h + 200;
            domCanvas.width = max_w + 200;
    
            function getRandom(left, right) {
                return Math.floor(Math.random() * (right - left) + left);
            }
            
            var suits = ['hearts', 'diamonds', 'spades', 'clubs'];
            var points = ['a', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'j', 'q', 'k'];
            
            //随机生成52张牌
            for (var i in suits) {
                for (var j in points) {
                    var w = getRandom(min_w, max_w);
                    var h = getRandom(min_h, max_h);
                    var size = getRandom(min_size, max_size);
                    canvas.drawPokerCard(w, h, size, suits[i], points[j]);
                }
            }
    
            //小王
            var w1 = getRandom(min_w, max_w);
            var h1 = getRandom(min_h, max_h);
            var size1 = getRandom(min_size, max_size);
            canvas.drawPokerCard(w1, h1, size1, 'spades', 'joker');
    
            //大王
            var w2 = getRandom(min_w, max_w);
            var h2 = getRandom(min_h, max_h);
            var size2 = getRandom(min_size, max_size);
            canvas.drawPokerCard(w2, h2, size2, 'hearts', 'joker');
    
        } else {
            document.body.innerHTML = 'This browser does not support canvas.';
        }
    
      </script>
    </html>

### **测试代码2：模拟Windows纸牌游戏发牌** ###

![220852_1c4H_1425762.png][]

html代码如下：

<html>
      <head>
        <title>Poker.js测试</title>
      </head>
      <body bgcolor="green">
        <div id="container">
           
        </div>
      </body>
      <script src="./poker.min.js"></script>
      <script>
    
        if (window.Poker) {
    
            var container = document.getElementById('container');
            var domCanvas = document.createElement('canvas');
            var canvas = domCanvas.getContext('2d');
            var param = {};
            container.appendChild(domCanvas);
    
            domCanvas.height = 600;
            domCanvas.width = 1000;
    
            function getRandom(left, right) {
                return Math.floor(Math.random() * (right - left) + left);
            }
    
            var suits = ['hearts', 'diamonds', 'spades', 'clubs'];
            var points = ['a', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'j', 'q', 'k'];
            
            //绘制左上角牌堆
            for (var i = 0; i < 3; i++) {
                canvas.drawPokerBack(300 - 120 + i * 5, 80, 120, '#5C72C2', '#2B4299');
            }
            
            //绘制背面向上的牌
            for (var i = 0; i < 6; i++) {
                for (var j = 0; j <= i; j++) {
                    canvas.drawPokerBack(300 + i * 120, 220 + j * 10, 120, '#5C72C2', '#2B4299');
                }
            }
    
            //绘制明牌（不能重复）
            var cards = [];
            for (var i = 0; i < 7; i++) {
                var isLegal = true;
                var suit;
                var point;
                do {
                    suit = getRandom(0, 4);
                    point = getRandom(0, 13);
                    for (var j = 0; j < i; j++) {
                        if (cards[j][0] == suit && cards[j][1] == point) {
                            isLegal = false;
                        }
                    }
                } while (!isLegal);
                cards[i] = [suits[suit], points[point]];
                canvas.drawPokerCard(300 - 120 + i * 120, 220 + j * 10, 120, cards[i][0], cards[i][1]);
            }
    
            //绘制右上角四个置牌点
            canvas.strokeStyle='#FFFFFF';
            canvas.lineWidth=5;
            canvas.strokeRect(545, 80, 80, 110);
            canvas.strokeRect(545 + 120, 80, 80, 110);
            canvas.strokeRect(545 + 120 * 2, 80, 80, 110);
            canvas.strokeRect(545 + 120 * 3, 80, 80, 110);
    
        } else {
            document.body.innerHTML = 'This browser does not support canvas.';
        }
    
      </script>
    </html>

**END**

转载于:https://my.oschina.net/Tsybius2014/blog/738516

[2019_Python_]: https://my.oschina.net/u/2663968/blog/3061697
[hot3.png]: /images/20220113/3e7ebc6c28544c568bcbcc1644e3aaf5.png
[https_github.com_Tairraos_Poker.JS]: https://github.com/Tairraos/Poker.JS
[220835_ZKCW_1425762.png]: /images/20220113/8880b043e6e5453d8da4b6ffb15c2c2e.png
[220852_1c4H_1425762.png]: /images/20220113/66d487efe0b9485fb5fd1efa6ba3003b.png