vue实现扑克发牌

Vue 实现扑克发牌效果

要实现扑克发牌效果，需要结合 Vue 的响应式数据管理和动画效果。以下是具体实现方法：

初始化扑克牌数据

在 Vue 的 data 中定义扑克牌数组和玩家手牌数组：

data() {
  return {
    deck: [], // 牌堆
    players: [[], [], [], []], // 四位玩家的手牌
    suits: ['♥', '♦', '♠', '♣'],
    values: ['A', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K']
  }
}

创建并洗牌

在 methods 中实现创建牌堆和洗牌功能：

methods: {
  createDeck() {
    this.deck = []
    for (let suit of this.suits) {
      for (let value of this.values) {
        this.deck.push({ suit, value })
      }
    }
  },

  shuffleDeck() {
    for (let i = this.deck.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1))
      ;[this.deck[i], this.deck[j]] = [this.deck[j], this.deck[i]]
    }
  }
}

发牌动画实现

使用 Vue 的 transition-group 实现发牌动画：

<transition-group name="deal" tag="div" class="deck">
  <div v-for="(card, index) in deck" :key="`deck-${index}`" class="card">
    {{ card.suit }}{{ card.value }}
  </div>
</transition-group>

<div v-for="(player, playerIndex) in players" :key="playerIndex" class="player">
  <transition-group name="receive" tag="div">
    <div v-for="(card, cardIndex) in player" :key="cardIndex" class="card">
      {{ card.suit }}{{ card.value }}
    </div>
  </transition-group>
</div>

添加 CSS 动画效果：

.deal-move {
  transition: all 0.5s;
}

.receive-enter-active {
  transition: all 0.5s;
}
.receive-enter {
  opacity: 0;
  transform: translateY(-100px);
}

发牌逻辑

实现发牌方法，将牌从牌堆分配到玩家手中：

dealCards() {
  const cardsPerPlayer = 13 // 每人13张牌
  for (let i = 0; i < cardsPerPlayer; i++) {
    for (let p = 0; p < 4; p++) {
      if (this.deck.length > 0) {
        this.players[p].push(this.deck.pop())
      }
    }
  }
}

完整流程调用

在 mounted 或点击事件中调用完整流程：

startGame() {
  this.createDeck()
  this.shuffleDeck()
  this.dealCards()
}

扑克牌样式设计

添加基本 CSS 样式增强视觉效果：

.card {
  width: 80px;
  height: 120px;
  border: 1px solid #000;
  border-radius: 5px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 5px;
  font-size: 20px;
  background: white;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}

.player {
  margin: 20px;
  min-height: 150px;
  border: 1px dashed #ccc;
  padding: 10px;
}

通过以上步骤，可以实现一个基本的 Vue 扑克发牌效果，包含洗牌、发牌和动画过渡功能。可以根据需要进一步扩展，如添加音效、更复杂的动画或游戏规则逻辑。