斗地主分完牌后2s自动排序

支持排序了，逻辑还是比较简单的
演示地址：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, onMounted } from "vue";

// 根据精灵图的位置定义点数和花色

const pokerInformationArr = [
  { n: 50, c: "黑桃" },
  { n: 9, c: "方片" },
  { n: 5, c: "梅花" },
  { n: 1, c: "红桃" },
  { n: 10, c: "红桃" },
  { n: 6, c: "黑桃" },
  { n: 1, c: "方片" },
  { n: 10, c: "方片" },
  { n: 6, c: "梅花" },
  { n: 2, c: "红桃" },
  { n: 11, c: "红桃" },
  { n: 7, c: "黑桃" },
  { n: 2, c: "方片" },
  { n: 11, c: "方片" },
  { n: 7, c: "梅花" },
  { n: 3, c: "红桃" },
  { n: 12, c: "红桃" },
  { n: 8, c: "黑桃" },
  { n: 3, c: "方片" },
  { n: 12, c: "方片" },
  { n: 8, c: "梅花" },
  { n: 4, c: "红桃" },
  { n: 13, c: "红桃" },
  { n: 9, c: "黑桃" },
  { n: 4, c: "方片" },
  { n: 13, c: "方片" },
  { n: 9, c: "梅花" },
  { n: 5, c: "红桃" },
  { n: 1, c: "黑桃" },
  { n: 10, c: "黑桃" },
  { n: 5, c: "方片" },
  { n: 1, c: "梅花" },
  { n: 10, c: "梅花" },
  { n: 6, c: "红桃" },
  { n: 2, c: "黑桃" },
  { n: 11, c: "黑桃" },
  { n: 6, c: "方片" },
  { n: 2, c: "梅花" },
  { n: 11, c: "梅花" },
  { n: 7, c: "红桃" },
  { n: 3, c: "黑桃" },
  { n: 12, c: "黑桃" },
  { n: 7, c: "方片" },
  { n: 3, c: "梅花" },
  { n: 12, c: "梅花" },
  { n: 8, c: "红桃" },
  { n: 4, c: "黑桃" },
  { n: 13, c: "黑桃" },
  { n: 8, c: "方片" },
  { n: 4, c: "梅花" },
  { n: 13, c: "梅花" },
  { n: 9, c: "红桃" },
  { n: 5, c: "黑桃" },
  { n: 100, c: "红桃" },
];

// 扑克在精灵图中尺寸
let x = 88.88;
let y = 133.33;
let index = 0;
let mode = "douDiZhu";

if (mode === "douDiZhu") {
  pokerInformationArr.forEach((v, i) => {
    if (v.n === 1 || v.n === 2) {
      v.n += 20;
    }
  });
}

const positionArr = reactive([]);

// 初始化扑克位置
for (let i = 0; i < 9; i++) {
  for (let j = 0; j < 6; j++) {
    let obj = {
      x,
      y,
      n: pokerInformationArr[index].n,
      c: pokerInformationArr[index].c,
    };
    positionArr.push(obj);
    y += 133.33;
    index++;
  }
  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);
  pokerSort();
};

// 排序函数
const pokerSort = () => {
  setTimeout(() => {
    totalDeck.forEach((v, i) => {
      v.sort((a, b) => {
        return b.n - a.n;
      });
    });
  }, 2000);
};
</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>