很无聊的抽扑克牌比大小

我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

---

功能介绍

点击【开始游戏】，系统会先自动抽取一张扑克牌，你随意点击一张牌堆中的扑克牌作为自己的牌，再随意点击任意一张扑克牌即出游戏结果。

代码块

代码说明

1. cards变量：保存所有的扑克

• name: 牌面上显示的内容
• color: 牌面上显示的内容的颜色
• weight: 牌的大小，数值越大表示该牌越大
• open: 扑克的打开状态，为true表示是正面

2. types变量：保存扑克的四种花色和对应的颜色
3. numbers变量：按大小保存每种花色的牌
4. this.initCards()方法：生成完整的乱序的cards

initCards() {
  this.numbers.forEach((num, index) => {
    this.types.forEach((type) => {
      let idx = parseInt(Math.random() * (this.cards.length - 1));
      this.cards.splice(idx, 0, {
        name: num + " " + type.shape,
        color: type.color,
        weight: index + 1,
        open: false,
      });
    });
  });
  let idx1 = parseInt(Math.random() * (this.cards.length - 1));
  this.cards.splice(idx1, 0, {
    name: "JOKER",
    color: "#f03a17",
    weight: 15,
    open: false,
  });
  let idx2 = parseInt(Math.random() * (this.cards.length - 1));
  this.cards.splice(idx2, 0, {
    name: "JOKER",
    color: "#2b2b2b",
    weight: 14,
    open: false,
  });
},

5. 然后改写每个扑克牌的样式，使整体变成如下，具体就不说了，基本就是写css

6. 接下来给游戏界面加一个遮罩，中间一个【开始游戏】的按钮，点击开始游戏可以开始抽取桌面上的扑克牌。

<div class="mask" v-show="maskShow">
  <button @click="startGame">开始游戏</button>
</div>

startGame() {
  this.maskShow = false;
},

7. 游戏一开始，系统先自动抽取一张扑克牌，接着玩家抽取，玩家抽取后，再次点击任意牌即出游戏结果。

系统抽取扑克牌代码：

systemPlay() {
  // 系统随机抽取一张扑克牌
  let index = parseInt(Math.random() * 53);
  this.sysChooseIdx = index;
},

玩家抽取扑克牌、玩家再次点击自己的扑克牌、出游戏结果代码：

clickCard(index) {
  // 判断你是否抽取过扑克牌
  // 抽取过则打开所有扑克牌，并比较你抽取的和系统抽取的扑克牌的大小，并显示结果
  // 未抽取过则将点击的牌作为你抽取的扑克牌
  if (this.youChooseIdx === -1) {
    if (index !== this.sysChooseIdx) {
      this.youChooseIdx = index;
    }
  } else { 
    this.cards.forEach((el) => {
      el.open = true;
    });

    this.resultShow = true;
    let youWeight = this.cards[this.youChooseIdx].weight;
    let sysWeight = this.cards[this.sysChooseIdx].weight;
    if (youWeight > sysWeight) {
      this.resultText = "你赢了!";
    } else if (youWeight < sysWeight) {
      this.resultText = "你输了!";
    } else {
      this.resultText = "平局!";
    }
  }
},

写在最后

以上即是所有代码的说明。