分享一个js写的欢乐斗地主页面，目前只能实现发牌洗牌等功能！希望大家相互学习，多多指点。
以下是完整代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#container {
900px;
height: 700px;
margin: 0 auto;
background: green;
display: flex;
flex-wrap: wrap;
}
#container>.player-left,
#container>.player-right {
150px;
height: 500px;
background: gray;
position: relative;
}
#container>.desktop {
600px;
height: 500px;
background-color:darkgreen;
}
#container>.desktop>.pokers {
position: absolute;
300px;
height: 100px;
/* background: lightcoral; */
top: 100px;
margin: 0 auto;
left: 0;
right: 0;
display: flex;
justify-content: space-around;
}
#container>.desktop>.btns {
position: absolute;
300px;
height: 100px;
/* background: lightcoral; */
top: 300px;
margin: 0 auto;
left: 0;
right: 0;
display: flex;
justify-content: space-around;
}
#container input {
100px;
height: 100px;
background: lightsalmon;
border-radius: 50%;
}
#container>.player-bottom {
900px;
height: 200px;
background: gray;
position: relative;
}
#container .poker {
70px;
position: absolute;
}
input {
outline: none;
border: 2px solid #ffffff;;
}
</style>
</head>
<body>
<div id="container">
<div class="player-left"></div>
<div class="desktop">
<div class="pokers"></div>
<div class="btns">
<input type="button" value="发牌">
<input type="button" value="洗牌" disabled>
</div>
</div>
<div class="player-right"></div>
<div class="player-bottom"></div>
</div>
<script src="../需要使用的外部库/jquery/jQurey/jQurey各版本/jquery-3.3.1.js"></script>
<script src="tools.js"></script>
<script src="../yangye6.3/需要使用的外部库/lodash/lodash.js"></script>
<script>
const { random } = Tool;
class Poker {
static colors = ["方块", "梅花", "红桃", "黑桃"]
static points = [3, 4, 5, 6, 7, 8, 9, 10, "J", "Q", "K", "A", "2"]
static spePoker = ["大王", "小王"]
constructor(point, color, index) {
this.point = point;
this.color = color;
this.index = index;
this.src = `./img/pkp_${this.index + 1}.jpg`
}
}
class Player {
pokers = []
constructor(name) {
this.name = name;
}
sortPokers() {
this.pokers.sort((a, b) => a.index - b.index);
}
}
class Game {
pokers = [];
players = [];
constructor() {
this.init();
}
init() {
this.producePokers();
this.producePlayer();
this.handle();
}
//生产玩家
producePlayer() {
this.players.push(new Player("张三"));
this.players.push(new Player("李四"));
this.players.push(new Player("王武"));
}
//生产牌
producePokers() {
for (let j = 0, len = Poker.points.length; j < len; j++) {
const point = Poker.points[j];
for (let i = 0, len = Poker.colors.length; i < len; i++) {
const color = Poker.colors[i];
this.pokers.push(new Poker(point, color, j * 4 + i));
}
}
this.pokers.push(new Poker(Poker.spePoker[0], "null", 52));
this.pokers.push(new Poker(Poker.spePoker[1], "null", 53));
}
//洗牌
shuffle() {
for (let i = this.pokers.length - 1; i >= 0; i--) {
let randomIndex = random(i);
[this.pokers[i], this.pokers[randomIndex]] = [this.pokers[randomIndex], this.pokers[i]];
}
}
//发牌并且整理牌
deal() {
for (let i = 0; i < this.players.length; i++) {
this.players[i].pokers.push(...this.pokers.splice(0, 17));
this.players[i].sortPokers();
}
}
//渲染
renderPokers() {
let player1Str = "";
this.players[0].pokers.forEach((value, index) => {
player1Str += `<img src='${value.src}' class="poker" style="left:40px;top:${index * 20 + 30}px">`;
});
document.querySelector(".player-left").innerHTML = player1Str;
let player2Str = "";
this.players[1].pokers.forEach((value, index) => {
player2Str += `<img src='${value.src}' class="poker" style="left:40px;top:${index * 20 + 30}px">`;
});
document.querySelector(".player-right").innerHTML = player2Str;
let player3Str = "";
this.players[2].pokers.forEach((value, index) => {
player3Str += `<img src='${value.src}' class="poker" style="top:30px;left:${index * 20 + 230}px">`;
});
document.querySelector(".player-bottom").innerHTML = player3Str;
if (this.pokers.length === 54) {
document.querySelector(".pokers").innerHTML = `<img src='./img/bg.png' class="poker" style="position:static">`;
} else {
let pokersStr = "";
this.pokers.forEach((value, index) => {
pokersStr += `<img src='${value.src}' class="poker" style="position:static">`;
});
document.querySelector(".pokers").innerHTML = pokersStr;
}
}
reset() {
for (let i = 0; i < this.players.length; i++) {
this.pokers.push(...this.players[i].pokers.splice(0, 17));
}
}
handle() {//放事件
let that = this;
document.querySelector(".btns>input[value='发牌']").addEventListener("click", function () {
that.shuffle();
that.deal();
that.renderPokers();
this.disabled = true;
this.nextElementSibling.disabled = false;
});
document.querySelector(".btns>input[value='洗牌']").addEventListener("click", function () {
that.reset();
that.renderPokers();
this.disabled = true;
this.previousElementSibling.disabled = false;
});
}
}
let g;
g = new Game;
// g.renderPokers();
</script>
</body>
</html>