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

最新推荐文章于 2022-12-05 18:34:23 发布

chenzai1946

最新推荐文章于 2022-12-05 18:34:23 发布

阅读量1k

点赞数

原文链接：https://my.oschina.net/Tsybius2014/blog/738516

版权

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

Poker.js下载地址：https://github.com/Tairraos/Poker.JS

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

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

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

html代码如下：

<html>
  <head>
    <title>Poker.js测试</title>
  </head>
  <body>
    <div id="container">
      &nbsp;
    </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纸牌游戏发牌

html代码如下：

<html>
  <head>
    <title>Poker.js测试</title>
  </head>
  <body bgcolor="green">
    <div id="container">
      &nbsp;
    </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

chenzai1946

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用Poker.js在html页面上绘制扑克牌

今天研究了下Poker.js，Poker.js是通过扩展HTML5 Canvas实现的画扑克牌的JS库。 Poker.js下载地址：https://github.com/Tairraos/Poker.JS 如要使用Poker.js，从github下载代码后，直接引用release目录下的p...
复制链接

扫一扫