html5 canvas 扑克牌游戏开发探索

最新推荐文章于 2024-05-16 02:28:14 发布
最新推荐文章于 2024-05-16 02:28:14 发布
阅读量3.6k 收藏 2
点赞数 1
分类专栏： html5五十开项目 文章标签： html5扑克游戏 canvas扑克游戏 游戏 游戏开发 源码
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tx101q/article/details/54808733
版权

最近想做个网页版扑克牌游戏，于是就开始探索最后实现如下效果

html5源码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>510k</title>
    <script src="./superMaker.js"></script>
    <script type="text/javascript"  >

        /**
         * 定义一副牌，数组存放
         * @type {Array}
         */
        var p=new Array();
        var szp=new Array();//分配到手中的扑克
        var img=new Image();
        img.src="b.jpg";//舞台背景
        new Stage(800,600,"stage",img);
        var scan=new Scane();
        scan.playflag=true;
        scan.frame="1";
        scan.nextframe="2";
        scan.loopflag=true;

        var p4 = new player("img");
        p4.img = new Image();
        p4.img.src = "puke/0.jpg";
        p4.x =680;
        p4.y = 200;
        p4.w = 59;
        p4.h = 90;
        p4.edit=true;
        p4.mousedown=function(){
            p4.ckg=true;
            if(p4.ckg){
                p4.w=50;
                p4.h=80;

            }
        }
        p4.mouseup=function(){
            p4.ckg=false;
            if(!p4.ckg){
                p4.w=59;
                p4.h=90;

            }

        }
        scan.add(p4);
        var p5 = new player("img");
        p5.img = new Image();
        p5.img.src = "puke/pass.jpg";
        p5.x =680;
        p5.y = 100;
        p5.w = 59;
        p5.h = 90;
        p5.edit=true;
        p5.mousedown=function(){
         p5.ckg=true;
            if(p5.ckg){
                p5.w=50;
                p5.h=80;

            }

        }
        p5.mouseup=function(){
            p5.ckg=false;
            if(!p5.ckg){
                p5.w=59;
                p5.h=90;

            }


        }
        scan.add(p5);

        /**
         * 定义扑克牌
         * @param a
         * @param b
         * @param c
         */
        function pei(a,b,c){
            this.huase=a;
            this.value=b;
            this.val=c;
            this.src="";
            this.player=new player("img");
        }

        /*
        * 定义一副扑克
        *
        * */
        function zhupai(){
            var p1=new pei("大红","大王",100);
            p1.src="./puke/1.jpg";

            var p2=new pei("大黑","小王",99);
            p2.src="./puke/2.jpg";
            p.push(p1);
            p.push(p2);
            var s=["3","4","5","6","7","8","9","10","J","Q","K","A","2"];
            for(var j=0;j<4;j++) {
                for (var i = 0; i < 13; i++) {
                   if(j==0) {
                       var pp = new pei("黑桃", s[i], (i+3));
                       pp.src="./puke/"+(i+3)+".jpg";
                       p.push(pp);
                   }
                    if(j==1) {
                        var pp = new pei("红桃", s[ i], (i+3));
                        pp.src="./puke/"+(16+i)+".jpg";
                        p.push(pp);
                    }

                    if(j==2) {
                        var pp = new pei("梅花", s[ i], (i+3));
                        pp.src="./puke/"+(29+i)+".jpg";
                        p.push(pp);
                    }
                    if(j==3) {
                        var pp = new pei("方块", s[ i],(i+3));
                        pp.src="./puke/"+(42+i)+".jpg";
                        p.push(pp);
                    }
                }

            }
            console.log(p);

        }



        /**
         * 向舞台台添加扑克
         */
        function addpuke(){
            for(var i=0;i<szp.length;i++){
                szp[i].player.img=new Image();
                szp[i].player.img.src=szp[i].src;
                szp[i].player.ckg=false;
                szp[i].player.edit=true;
                szp[i].player.x =10+i*55;
                szp[i].player.y = 350;
                szp[i].player.w = 49;
                szp[i].player.h = 80;
                szp[i].player.mousedown=function() {
                    this.ckg ? this.ckg = false : this.ckg = true;
                    if (this.ckg) {
                        this.y = 300;
                    } else {
                        this.y = 350;
                    }
                }
                scan.add(szp[i].player);

            }
        }

       /**
        *
        * 分配扑克
        */
        function fp(){
            var i=0;
            while(i<13) {
             var pa = Math.floor(Math.random() * 54);
              var d = p[pa];
               if (szp.find(d) ==null) {
                szp.add(d);
                i++;
             }
                }
            sort();
               for(var k in szp) {
                  console.log("hhhh" + szp[k].huase+szp[k].value+szp[k].val);
                }
            }


        /**
         * 扑克排序
         */
        function sort(){
            for(var i=0;i<szp.length;i++){
              for(var j=0;j<szp.length-1;j++) {
               var max=szp[j].val;
                var zy=null;
                if ((max - szp[j + 1].val) > 0) {
                zy = szp[j];
                szp[j] = szp[j + 1];
                szp[j + 1] = zy;
                }
              }
          }
             //    console.log(szp);
         }





        function init() {
            zhupai();
            fp();
            addpuke();
        }


        init();





        document.addEventListener("mousedown",function(e){
            if(scaneArray.length>0) {
                for (var ks in scaneArray) {
                    if (scaneArray[ks].playflag == true && scaneArray[ks].layer.array.length > 0) {
                        for (var kp in scaneArray[ks].layer.array) {
                            if (scaneArray[ks].layer.array[kp].edit) {
                                scaneArray[ks].layer.array[kp].hitx = getMousePos(canvas, e).x;
                                scaneArray[ks].layer.array[kp].hity = getMousePos(canvas, e).y;
                                scaneArray[ks].layer.top(scaneArray[ks].layer.array[kp]);
                                if (scaneArray[ks].layer.array[kp].editflag) {
                                      scaneArray[ks].layer.array[kp].mousedown(e);


                                }
                            }

                        }
                    }
                }}
        });


        document.addEventListener("mousemove",function(e){
            if(scaneArray.length>0) {
                for (var ks in scaneArray) {

                    if (scaneArray[ks].playflag == true && scaneArray[ks].layer.array.length > 0) {
                        for (var kp in scaneArray[ks].layer.array) {
                            if (scaneArray[ks].layer.array[kp].edit) {
                                scaneArray[ks].layer.array[kp].hitx = getMousePos(canvas, e).x;
                                scaneArray[ks].layer.array[kp].hity = getMousePos(canvas, e).y;
                                if (scaneArray[ks].layer.array[kp].editflag) {
                                    scaneArray[ks].layer.array[kp].mousemove(e);
                                }
                            }
                        }

                    }
                }
            }
        });



        document.addEventListener("mouseup",function(e){
            if(scaneArray.length>0) {
                for (var ks in scaneArray) {

                    if (scaneArray[ks].playflag == true && scaneArray[ks].layer.array.length > 0) {
                        for (var kp in scaneArray[ks].layer.array) {
                            if (scaneArray[ks].layer.array[kp].edit) {
                                scaneArray[ks].layer.array[kp].hitx = getMousePos(canvas, e).x;
                                scaneArray[ks].layer.array[kp].hity = getMousePos(canvas, e).y;
                                if (scaneArray[ks].layer.array[kp].editflag) {
                                    scaneArray[ks].layer.array[kp].mouseup(e);
                                }
                            }
                        }

                    }
                }
            }
        });




    </script>
</head>

<body bgcolor="gray" style="text-align: center">

<h1 style="color:snow">五十K争霸赛</h1>
<div style="text-align: center;" id="stage"></div>

</body>
</html>
这只是一个不完整的客户端，以后会把完整的客户端和服务端都上传上来！


101tx
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DragAndDrop-Game:一个简单的拖放游戏，展示HTML 5中的拖放功能
05-08
拖放游戏 一个简单的“拖放”游戏，展示HTML5中的拖放功能。 客户端是使用HTML，CSS和Javascript实现的。 服务器端是使用Javascript和Perl实现的。 项目演示： : 该项目已部署在本地服务器（XAMPP）上。 配置XAMPP的步骤（Windows） 1）从XAMPP控制面板启动Apache服务器和MYSQL数据库。 2）在您的本地主机myphpadmin中创建一个数据库（名称：项目）。 在数据库内部创建三个表（franklin，michael，trevor）。 在每个表中，创建两个属性，ID（数据类型：Varchar，长度：20）和项目列表（数据类型：文本） 3）下载存储库，转到c：/ xampp / htdocs /，创建一个文件夹（项目），然后将所有文件以及图像文件夹放入其中。 4）下载草莓perl，转到C：\ Strawberry \ c
HTML5作业(二)-----扑克牌拖放小游戏
无边热爱，来日方长
11-07 393
HTML5作业(2)-----扑克牌拖放小游戏
使用JS和Canvas做一个html5小游戏_html canvas用javascript制作一款网页游戏(1)
最新发布
2401_84976170的博客
05-16 854
这是游戏的截图：1.有计算抓住的怪物的数量2.有背景，英雄，怪物。
HTML5 实现扑克翻牌游戏
不断学习，不断进步，提高自己
07-11 3312
扑克翻牌游戏就是桌面24张牌，玩家翻到两张相同扑克牌则消去，如果时间2分钟到了，仍然没有成功则游戏失败。
html编写扑克牌游戏,用js编写扑克牌小游戏
weixin_35039018的博客
06-01 1376
金扑克游戏/*by riverhttp://www.rednetcn.com2006-3-26*/var cards="0,a1,a2,a3,a4,a5,a6,a7,a8,a9,a10,a11,a12,a13,b1,b2,b3,b4,b5,b6,b7,b8,b9,b10,b11,b12,b13,c1,c2,c3,c4,c5,c6,c7,c8,c9,c10,c11,c12,c13,d1,d2,d3,...
基于 HTML+CSS+JS 的纸牌记忆游戏源码
04-06
使用 JavaScript 构建纸牌记忆游戏源码。同时我们又学了一些知识，如：animation-duration 属性、`visibility` 属性和 `animation-timing-function` 属性等。
HTML5 canvas扑克牌花式洗牌动画
05-01
在这个“HTML5 canvas扑克牌花式洗牌动画”实例中，我们主要探讨的是如何利用canvas元素和JavaScript（配合jQuery库）来实现扑克牌的发牌和洗牌效果。 首先，我们需要了解canvas的基本概念。HTML5 canvas是一个矩形...
HTML5 canvas扑克牌花式洗牌动画.zip
05-14
这个"HTML5 canvas扑克牌花式洗牌动画"项目，显然是利用HTML5 Canvas的强大功能来创建一个互动的、视觉效果丰富的扑克牌洗牌动画。以下是对这个主题的详细讲解： 1. **HTML5 Canvas基础**： - HTML5 Canvas是一个...
html5 canvas花式扑克牌动画特效
09-08
在这个“html5 canvas花式扑克牌动画特效”项目中，我们将深入探讨Canvas API如何被用来实现这样的视觉效果。 首先，Canvas API是HTML5标准的一部分，它通过JavaScript提供了画布上的绘图功能。开发者可以使用各种...
HTML5 canvas扑克牌花式洗牌动画特效代码
03-20
在这个场景中，我们讨论的是一个利用HTML5 Canvas实现的扑克牌花式洗牌动画特效代码。这个特效是通过JavaScript库jQuery 1.10.2版本来辅助完成的。 首先，Canvas元素是HTML5中的一个核心特性，它提供了一个二维的...
HTML实验三： 扑克牌拖放小游戏。
weixin_59267622的博客
10-24 687
设计一款扑克牌拖放小游戏。在网页中插入A框和B框。要求用户拖动从A框拖动5张连续的扑克牌至B框，完成游戏。
德州扑克源码java-poker:德州扑克游戏H5+Golang
05-21
德州扑克源码 java webpoker a poker game use phaser framework
HTML翻牌小游戏代码
05-01
HTML翻牌小游戏代码，能选择难度，游戏规则:翻开两个格子，如果图案一致则配对，将其挑出，如果图案不一致则盖回去，直到所有格子都配对完成，游戏结束。
js扑克牌翻牌配对网页小游戏代码
06-11
一款考验记忆力的js扑克牌翻牌配对网页小游戏代码，玩法：连续点击翻开两张扑克牌，相同则配对成功，直到所以扑克牌都配对成功，你就胜利啦。
HTML5纸牌接龙小游戏.zip
07-04
HTML5纸牌接龙小游戏基于jquery.1.10.2.min.js制作，网页小游戏，鼠标点击操作。
多人在线扑克游戏源码带服务端完整版
chenli03的专栏
05-22 6540
这个项目是在多人在线扑克游戏源码带服务端完整版，本项目源码是一套网络版的扑克牌项目源码，带服务器端源码，服务器端也是用java做的，打开游戏以后需要配置IP服务器端的IP和端口，服务端默认监听9999端口，客户端ip填写10.0.2.2，端口信息不用管直接点连接就可以连接到电脑上的服务端。项目源码注释比较丰富，可以研究一下里面的算法之类的。搭建这个服务端环境废了我半天劲，不知道是不是我运行的方法不
C++开发网络版斗地主游戏，附完整源码
07-23 5429
单机版斗地主扑克牌游戏。这款游戏拥有强大的AI以及智能的提示功能。玩家的对手是高度智能的电脑玩家，其特点是智能的提示机制和免费获得实用的记牌器功能，玩家不用记所出的牌。此外，此款游戏还拥有精美的界面，动感的音乐，简单的操作，为斗地主玩家提供了流畅而有节奏的游戏感觉。主要规则为你是固定的地主,其他三家打你一家,你比其他三家都多8张牌，其他三家任意一家走完就算你输,你最先走完才算赢。 VC++ ...
html5扑克牌游戏源码,【web】纯JavaScript实现window经典纸牌游戏
热门推荐
weixin_33111267的博客
05-31 1万+
[JavaScript] 纯文本查看 复制代码// 循环遍历将poker图片添加到数组中var pokersList = [];var flower = 0;for (var i = 1; i <= 52; i++) {var poker = new Image();poker.src = "img/" + i + ".jpg"poker.setAttribute("data-i",i-fl...
html扑克牌展开,HTML5 canvas扑克牌花式洗牌动画
05-24
展开扑克牌的 HTML 代码如下： ```html <div class="card"> <div class="card-face front"></div> <div class="card-face back"></div> </div> ``` 其中，`.card` 是扑克牌的容器，`.front` 和 `.back` 是扑克牌的正反面。 通过 CSS 样式设置 `.card` 的宽高、边框、背景色等属性，以及 `.front` 和 `.back` 的背景图案，就可以实现扑克牌的展开效果。 至于 HTML5 canvas 扑克牌花式洗牌动画，需要使用 canvas 的绘图 API 实现。具体的实现过程比较复杂，需要涉及到 canvas 的基本操作、动画效果、事件处理等内容。以下是一个简单的示例： ```html <canvas id="canvas"></canvas> ``` ```javascript const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const width = canvas.width = window.innerWidth; const height = canvas.height = window.innerHeight; const cards = []; // 加载扑克牌的图片资源 const cardImages = []; for (let i = 0; i < 52; i++) { const img = new Image(); img.src = `cards/${i}.png`; cardImages.push(img); } // 创建扑克牌对象 class Card { constructor(image, x, y) { this.image = image; this.x = x; this.y = y; this.angle = 0; this.spin = 0; this.targetAngle = 0; this.targetX = 0; this.targetY = 0; this.isMoving = false; } draw() { ctx.save(); ctx.translate(this.x, this.y); ctx.rotate(this.angle); ctx.drawImage(this.image, -50, -75, 100, 150); ctx.restore(); } update() { if (this.isMoving) { const dx = this.targetX - this.x; const dy = this.targetY - this.y; const distance = Math.sqrt(dx * dx + dy * dy); if (distance < 1) { this.isMoving = false; this.x = this.targetX; this.y = this.targetY; this.angle = this.targetAngle; } else { const speed = 5; const angle = Math.atan2(dy, dx); this.x += Math.cos(angle) * speed; this.y += Math.sin(angle) * speed; this.angle += this.spin * speed; } } } moveTo(x, y, angle, spin) { this.isMoving = true; this.targetX = x; this.targetY = y; this.targetAngle = angle; this.spin = spin; } } // 初始化扑克牌 for (let i = 0; i < 52; i++) { const x = width / 2 + Math.random() * 200 - 100; const y = height / 2 + Math.random() * 200 - 100; const card = new Card(cardImages[i], x, y); cards.push(card); } // 动画循环 function loop() { ctx.clearRect(0, 0, width, height); for (let i = 0; i < cards.length; i++) { cards[i].update(); cards[i].draw(); } requestAnimationFrame(loop); } // 点击画布，触发洗牌动画 canvas.addEventListener('click', () => { let delay = 0; for (let i = 0; i < cards.length; i++) { const card = cards[i]; const x = width / 2 + Math.random() * 200 - 100; const y = height / 2 + Math.random() * 200 - 100; const angle = Math.random() * Math.PI * 2; const spin = Math.random() - 0.5; setTimeout(() => { card.moveTo(x, y, angle, spin); }, delay); delay += 10; } }); // 开始动画循环 loop(); ``` 以上代码实现了一个简单的扑克牌洗牌动画。具体效果可以参考以下链接： [HTML5 扑克牌花式洗牌动画](https://www.zhangxinxu.com/study/201712/html5-poker-canvas-shuffle-animation.html)

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值