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);
}
