js实现扑克牌游戏

最新推荐文章于 2024-02-08 09:27:17 发布
最新推荐文章于 2024-02-08 09:27:17 发布
阅读量749 收藏 5
点赞数
分类专栏： Javascript 文章标签： javascript 游戏 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62008199/article/details/123468700
版权

js实现扑克牌游戏

实现有三位玩家各执一方，点击中间出牌按钮随机三方牌和三张底牌

在这里插入图片描述

html代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>扑克牌，发牌器</title>
    <style>
        body {
            user-select: none;
        }
        ul{
            margin: 0;
        }
        #main {
            width: 700px;
            height: 750px;
            border: 1px solid;
            margin: auto;
        }

        #top {
            width: 100%;
            height: 100px;
            /* background-color: aqua; */
            
        }
        ul.top{
            display: flex;
            margin-left: 24px;
        }
        #din{
            width: 300px;
            height: 100%;
            /* background-color: royalblue; */
            margin: auto;
        }
        #center {
            width: 100%;
            height: 450px;
            /* background-color: aquamarine; */
            display: flex;
            overflow: hidden;
        }

        #left {
            width: 200px;
            height: 100%;
            /* background-color: coral; */
            display: flex;
        }

        #left_l {
            width: 70px;
            height: 100%;
            display: flex;
            align-items: center;
        }

        #left_l>p {
            width: 70px;
            display: inline-block;
            height: 70px;
            background-color: red;
            border-radius: 50%;
            text-align: center;
            line-height: 70px;
        }

        /* 右边排的位置 */
        #left_r {
            width: 130px;
            height: 100%;
            display: flex;
            flex-direction: column;
            /* background-color: cornflowerblue; */
        }

        #cen {
            width: 300px;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            /* background-color: rgb(155, 141, 137); */
        }

        #btn {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            text-align: center;
            line-height: 150px;
            font-size: 25px;
            background-color: red;
        }

        #right {
            width: 200px;
            height: 100%;
            display: flex;
            /* background-color: coral; */
        }

        /* 左边排的位置 */
        #right_r {
            width: 70px;
            height: 100%;
            display: flex;
            align-items: center;
        }

        #right_r>p {
            width: 70px;
            display: inline-block;
            height: 70px;
            background-color: red;
            border-radius: 50%;
            text-align: center;
            line-height: 70px;
        }

        #right_l {
            width: 130px;
            height: 100%;
            /* background-color: cornflowerblue; */
        }

        #lower {
            width: 100%;
            height: 200px;
           
            /* background-color: cadetblue; */
        }
         /* 下边排的位置 */
         #lower_r {
            width: 100%;
            height: 70px;
           text-align: center;
        }

        #lower_r>p {
            width: 70px;
            display: inline-block;
            height: 70px;
            background-color: red;
            border-radius: 50%;
            text-align: center;
            line-height: 70px;
            margin: 0;
        }

        #lower_l {
            width: 100%;
            height: 130px;
            /* background-color: cornflowerblue; */
        }
        img{
            width: 60px;
            height: 80px;
            background-size: 100%;
        }
       ul{
           list-style: none;
       }
       ul.left>li:not(li:nth-of-type(1)){
           margin-top: -63px;
       }
       ul.right>li:not(li:nth-of-type(1)){
           margin-top: -63px;
       }
       ul.lower{
           display: flex;
       }
       ul.lower>li:not(li:nth-of-type(1)){
           margin-left: -25px;
       }
    </style>
</head>

<body>
    <div id="main">
        <div id="top">
            <div id="din">
                <ul class="top">
                    <li><img src="" ></li>
                    <li><img src="" ></li>
                    <li><img src="" ></li>
                </ul>
            </div>
        </div>      
        <div id="center">
            <div id="left">
                <div id="left_l">
                    <p>玩家1</p>
                </div>
                <div id="left_r">
                    <ul class="left">
                        <li><img src="" ></li>
                        <li><img src="" ></li>
                        <li><img src="" ></li>
                        <li><img src="" ></li>
                        <li><img src="" ></li>
                        <li><img src="" ></li>
                        <li><img src="" ></li>
                        <li><img src="" ></li>
                        <li><img src="" ></li>
                        <li><img src="" ></li>
                        <li><img src="" ></li>
                        <li><img src="" ></li>
                        <li><img src="" ></li>
                        <li><img src="" ></li>
                        <li><img src="" ></li>
                        <li><img src="" ></li>
                        <li><img src="" ></li>
                    </ul>
                </div>
            </div>
            <div id="cen">
                <div id="btn">发牌</div>
            </div>
            <div id="right">
                <div id="right_l">
                    <ul class="right">
                        <li><img src="" ></li>
                        <li><img src="" ></li>
                        <li><img src="" ></li>
                        <li><img src="" ></li>
                        <li><img src="" ></li>
                        <li><img src="" ></li>
                        <li><img src="" ></li>
                        <li><img src="" ></li>
                        <li><img src="" ></li>
                        <li><img src="" ></li>
                        <li><img src="" ></li>
                        <li><img src="" ></li>
                        <li><img src="" ></li>
                        <li><img src="" ></li>
                        <li><img src="" ></li>
                        <li><img src="" ></li>
                        <li><img src="" ></li>
                    </ul>
                </div>
                <div id="right_r">
                    <p>玩家2</p>
                </div>
            </div>
        </div>
        <div id="lower">
            <div id="lower_l">
                <ul class="lower">
                    <li><img src="" ></li>
                    <li><img src="" ></li>
                    <li><img src="" ></li>
                    <li><img src="" ></li>
                    <li><img src="" ></li>
                    <li><img src="" ></li>
                    <li><img src="" ></li>
                    <li><img src="" ></li>
                    <li><img src="" ></li>
                    <li><img src="" ></li>
                    <li><img src="" ></li>
                    <li><img src="" ></li>
                    <li><img src="" ></li>
                    <li><img src="" ></li>
                    <li><img src="" ></li>
                    <li><img src="" ></li>
                    <li><img src="" ></li>
                </ul>
            </div>
            <div id="lower_r">
                <p>玩家3</p>
            </div>
        </div>
    </div>
    <script src="./index5.js"></script>
</body>

</html>
js代码
function puka() {

    //总的集合
    let setAll = new Set();
    for (let i = 3; i <= 15; i++) {
        for (let j = 1; j <= 4; j++) {
            setAll.add(`${i}.${j}`);
        }
    }
    setAll.add(`16.1`).add(`17.1`);
    let setTwo1 = addTwo(17, setAll);
    let setTwo2 = addTwo(17, setAll);
    let setTwo4 = addTwo(3, setAll);
    // console.log(setTwo1,setTwo2,setAll,setTwo4,);
    setTwo1 = [...setTwo1].sort((a, b) => a - b).join(" ").split(".").join("_").split(" ");
    setTwo2 = [...setTwo2].sort((a, b) => a - b).join(" ").split(".").join("_").split(" ");
    setAll = [...setAll].sort((a, b) => a - b).join(" ").split(".").join("_").split(" ");
    setTwo4 = [...setTwo4].sort((a, b) => a - b).join(" ").split(".").join("_").split(" ");

    console.log(setTwo1, setTwo2, setAll, setTwo4);

    let top = document.querySelectorAll(".top>li>img");
    let left = document.querySelectorAll(".left>li>img");
    let right = document.querySelectorAll(".right>li>img");
    let lower = document.querySelectorAll(".lower>li>img");
    console.log(top, left, right, lower);
    foo(top, setTwo4);
    foo(left, setTwo2);
    foo(right, setTwo1);
    foo(lower, setAll);

}


function main() {
    puka();
    document.getElementById("btn").onclick = puka;
}

main();



//点击事件
//封装函数
function foo(arr, imgs) {
    for (let i = 0; i < arr.length; i++) {
        arr[i].src = `./puke/${imgs[i]}.jpg`;

    }
}

//三玩家的集合
function addTwo(num, setAll) {
    let setTwo = new Set();
    let str;
    for (let i = 0; i < num; i++) {
        let front = rand(17, 1);
        if (front == 16 || front == 17) {
            str = `${front}.1`;
            // setAll.delete(str);
            if (setAll.delete(str)) {
                setTwo.add(str);
            } else {
                i--;
            }
        } else {
            str = `${front}.${rand(4, 1)}`;
            // setAll.delete(str);
            if (setAll.delete(str)) {
                setTwo.add(str);
            } else {
                i--;
            }
        }

    }
    return setTwo;
}

//获取随机数
function rand(max, min) {
    return Math.round(Math.random() * (max - min) + min);
}
想被带飞的鱼
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
翻扑克游戏_翻扑克牌游戏_
10-04
以下将详细介绍构建翻扑克牌游戏的关键知识点： 1. **游戏设计**：首先，你需要设计游戏的基本结构，包括游戏板的大小（如8x8、16x16等）、牌的数量、牌的图案以及消除规则。游戏板通常是正方形或者矩形网格，每个...
css实现上中下布局（上下固定，中间自适应）
闲云野鸟的博客
04-21 6309
先上效果图： 实现方法： 方法一： 这个最简单，利用css中vh单位和calc() 函数 使用场景： 页面布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width
【HTML+CSS】之CSS布局
qq_37086980的博客
08-06 388
常用布局方式 table 表格布局 float 浮动 + margin inline-block 布局 flexbox布局 1.flexbox 布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewp
CSS之布局系列--上中下布局(上下固定，中间自适应)--方法/实例
IT利刃出鞘的博客
11-28 7876
本文用示例介绍CSS三行布局的方案。 三行布局，即：上、中、下。有两种方案：1.上下固定，中间自适应；2.中间固定，上下自适应。本文介绍第1种方案。 两边固定，中间自适应，一共有如下几种方案： flex布局（推荐） 网格布局（grid) vh+calc() 表格布局（table）（不推荐） 绝对定位布局（不推荐） 上下固定，中间自适应，就意味着中间要占满。所以大部分方案中，其父元素都要设置：height: 100%
(div+css)上下固定中间自适应高度网页布局的实现
sosohotsummer的专栏
02-10 1637
html xmlns="http://www.w3.org/1999/xhtml"> head> meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> title>上下固定中间自适应高度布局title> style type="text/css">     html     {             m
软文推广页面
m0_73229744的博客
10-25 912
（1）标题分别使用和标签，其中h1表示一级标题，h2表示二级标题。 （2）标签分别应用了名称为“书法.ttf”的字体，并且添加文字阴影。 （3）.middle和.footer中的字体图标使用标签引起对应的class值来完成。 （4）在标签中定义HTML5和CSS3描述信息。
js扑克牌翻牌配对网页小游戏代码
06-01
在本项目中，我们讨论的是一个基于JavaScript的扑克牌翻牌配对的网页小游戏...以上就是关于"js扑克牌翻牌配对网页小游戏代码"的主要知识点。了解这些概念有助于理解项目的架构和工作原理，也为其他前端项目提供了基础。
基于jQuery实现扑克牌读心术游戏源码.zip
11-15
《基于jQuery实现扑克牌读心术游戏源码》是一款利用JavaScript库jQuery开发的互动小游戏，旨在展示前端技术在游戏开发中的应用。这个游戏的核心是通过用户的交互和JavaScript的动态计算，模拟一种“读心术”，让玩家...
翻扑克牌-微信小程序-项目源码
10-27
这是一个微信小程序项目源码，翻扑克牌游戏，可使用微信开发者工具选小程序打开，正常编译运行，请放心下载。 相关学习参考文章(https://blog.csdn.net/zs1028/article/details/134083333) 在此游戏能学到什么： -...
js小游戏扑克牌读心术
11-03
游戏可能采用了随机数生成、数组操作和条件判断等技术来实现扑克牌的选取与隐藏，同时利用HTML和CSS构建出直观的用户界面。玩家在游戏过程中可能会被引导进行一系列操作，如点击按钮、输入猜测，然后由JavaScript...
使用display: inline-block;遇到的问题及解决
weixin_30558305的博客
12-10 504
1、使用display: inline-block;布局div会使两个字div中间产生间隙，解决办法有多种: ①可以不换行的将两个div书写在一行，因为换行也会占dom文档流。 ②可以在父元素中加上font-size: 0;也能消除中间间隙。 2、有些时候两个使用display:inline-block;的两个子元素可能会出现上下错位的情况，也就是没有上上部对齐，发生这种问题的原因是inli...
上下定高 中间自适应_DivCSS布局实例：三行单列上下固定高度中间自适应
weixin_39638647的博客
12-20 188
示例代码 [www.mb5u.com]DivCSS布局实例：三行单列 上下固定高度 中间自适应* {margin:0;padding:0;}html,body,#box {height:100%;font:small/1.5 "宋体", serif;}body {text-align:center;}#box {text-align:left;background:#666;display:tab...
css布局------上下高度固定,中间高度自适应容器
weixin_30763397的博客
03-02 475
HTML <body> <div class="container"> <div class="header"></div> <div class="body"></div> <div class="footer"></div> </div></body>...
上下DIV固定,中间DIV自适应的HTML+CSS实现
m15188153014的博客
08-29 536
HTML: <div class='header'></div> <div class='middle_outer'> <div class='middle_inner'></div> </div> <div class='footer'></div> CSS: .header{ po...
css中如何实现上下自适应,css实现上下固定中间自适应布局
weixin_28844235的博客
08-04 641
html：1：使用定位实现：css：.top-center-bottom>div{position:absolute;}.top-center-bottom .top{top:0;height:100px;width:100%;background:red;}.top-center-bottom .bottom{bottom:0;height:100px;width:100%;backgro...
上下固定中间自适应布局
最新发布
华子Code1024前端菜鸟的博客
02-08 1326
上下固定中间自适应布局
使用display:inline-block会产生什么问题？解决方法？
Bliss_妍的博客
08-16 689
问题: 两个display：inline-block元素放到一起会产生一段空白。 产生空白的原因：元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据CSS中white-space属性的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度，所以inline-block的元素之间就出现了空隙。 解决办法： 1. 将子元素标签的结束符和下一个标签的开始符写在同一行或把所有子标签写在同一行
css实现上下固定中间自适应
weixin_45825917的博客
03-12 724
css
CSS中display属性的inline-block导致布局错位问题
梦凝哲雪
07-24 1116
当然也可以是使用浮动float 或者 弹性盒子flex 完成上述需求。发现核心问题是 inline-block 默认的对齐方式。
提供一个JavaScript的扑克牌游戏代码
09-11
### 回答1： 以下是一份简单的 JavaScript 扑克牌游戏代码： ``` // 定义花色和点数数组 const suits = ["♠️", "♣️", "♥️", "♦️"]; const values = ["A", "2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K"]; // 创建一副扑克牌 class Deck { constructor() { this.deck = []; for (let suit in suits) { for (let value in values) { this.deck.push(values[value] + " " + suits[suit]); } } } // 洗牌 shuffle() { let m = this.deck.length, t, i; while (m) { i = Math.floor(Math.random() * m--); t = this.deck[m]; this.deck[m] = this.deck[i]; this.deck[i] = t; } return this; } // 发牌 deal() { return this.deck.pop(); } } // 创建玩家 class Player { constructor(name) { this.name = name; this.hand = []; } draw(deck) { this.hand.push(deck.deal()); return this; } showHand() { console.log(this.name + "'s hand: " + this.hand.join(", ")); } } // 创建游戏 let deck1 = new Deck(); let player1 = new Player("Player 1"); let player2 = new Player("Player 2"); deck1.shuffle(); player1.draw(deck1).draw(deck1); player2.draw(deck1).draw(deck1); player1.showHand(); player2.showHand(); ``` 这是一个简单的 JavaScript 扑克牌游戏代码，它可以实现创建一副扑克牌，洗牌，发牌等功能。 ### 回答2： 以下是一个基于JavaScript的扑克牌游戏代码示例： ```javascript // 定义扑克牌花色和点数数组 const suits = ['♠', '♥', '♦', '♣']; const ranks = ['A', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K']; // 生成扑克牌的函数 function createDeck() { const deck = []; for (let suit of suits) { for (let rank of ranks) { deck.push({ suit, rank }); } } return deck; } // 洗牌函数 function shuffle(deck) { for (let i = deck.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [deck[i], deck[j]] = [deck[j], deck[i]]; } } // 发牌函数 function deal(deck, numPlayers, numCards) { const hands = Array.from({ length: numPlayers }, () => []); for (let i = 0; i < numCards; i++) { for (let j = 0; j < numPlayers; j++) { hands[j].push(deck.pop()); } } return hands; } // 示例用法 const deck = createDeck(); shuffle(deck); const hands = deal(deck, 4, 5); console.log(hands); ``` 这段代码定义了 `suit`（花色） 和 `rank`（点数）数组，通过 `createDeck` 函数生成一副完整的扑克牌。随后使用 `shuffle` 函数进行洗牌，并使用 `deal` 函数按照指定的玩家数量和发牌数量进行发牌。最后将发牌结果打印输出。 注意，这只是一个简单的扑克牌游戏代码示例，还有很多游戏规则和逻辑需要添加进去才能完成一个完整的游戏。 ### 回答3： 以下是一个简单的JavaScript扑克牌游戏代码示例： ```javascript // 创建一副扑克牌 function createDeck() { const suits = ['♠', '♣', '♦', '♥']; const ranks = ['A', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K']; const deck = []; for (let suit of suits) { for (let rank of ranks) { deck.push({ suit, rank }); } } return deck; } // 洗牌算法 function shuffle(deck) { for (let i = deck.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [deck[i], deck[j]] = [deck[j], deck[i]]; } return deck; } // 发牌 function deal(deck, numCards) { if (deck.length < numCards) { throw new Error("牌不够了"); } const hand = deck.slice(0, numCards); deck.splice(0, numCards); return hand; } // 使用示例 const deck = createDeck(); shuffle(deck); const hand = deal(deck, 5); console.log(hand); ``` 这个代码创建了一个扑克牌游戏的基本框架。`createDeck`函数用来创建一副扑克牌，`shuffle`函数使用洗牌算法对扑克牌进行洗牌操作，`deal`函数用来发牌。使用示例中，我们首先创建一副扑克牌，然后进行洗牌操作，最后发5张牌并输出到控制台。这只是一个简单示例，你可以根据自己的需求对代码进行扩展和修改。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值