vue3实现斗地主分牌

没有多少代码，但效果实现出来还是挺不错的，后面看需要会把相关的逻辑写一写

效果展示 ：http://112.124.25.120:8081/#/about

使用图片（图片来源于网上，如有侵权，联系删除）

具体代码

<template>
  <main>
    <el-card class="box-card" v-for="(v, i) in totalDeck">
      <ul>
        <li
          class="photo"
          v-for="(v2, i2) in v"
          :style="`background-position:${v2.x}px ${v2.y}px`"
        ></li>
      </ul>
    </el-card>
    <el-button type="primary" @click="beginGame">新游戏</el-button>
  </main>
</template>

<script  setup>
import { ref, reactive } from "vue";

// 扑克在精灵图中尺寸
let x = 88.88;
let y = 133.33;

const positionArr = reactive([]);
// 初始化扑克位置
for (let i = 0; i < 9; i++) {
  for (let j = 0; j < 6; j++) {
    let obj = { x, y };
    positionArr.push(obj);
    y += 133.33;
  }
  x += 88.88;
  y = 133.33;
}

// 3名玩家
const playerOneArr = reactive([]);
const playerTwoArr = reactive([]);
const playerThreeArr = reactive([]);
// 底牌
const bottomCard = reactive([]);
// 总牌堆
const totalDeck = reactive([]);

// 生成随机牌堆
const beginGame = () => {
  // 先把数组清空
  playerOneArr.length = 0;
  playerTwoArr.length = 0;
  playerThreeArr.length = 0;
  bottomCard.length = 0;
  totalDeck.length = 0;

  const randomPoker = positionArr.sort(() => Math.random() - 0.5);

  // 将前51项分给3名玩家
  randomPoker.forEach((v, i) => {
    if (i < 17) playerOneArr.push(v);
    else if (i >= 17 && i < 34) playerTwoArr.push(v);
    else if (i >= 34 && i < 51) playerThreeArr.push(v);
    else bottomCard.push(v);
  });
  totalDeck.push(playerOneArr, playerTwoArr, playerThreeArr, bottomCard);
};
</script>

<style scoped>
.photo {
  width: 88.88px;
  height: 133.33px;
  background: url("@/assets/image/poker.jpg");
  transition: all 0.5s ease-in-out;
}

ul {
  display: flex;
  flex-wrap: wrap;
}
</style>