vue实现扑克发牌

Vue 实现扑克发牌动画

数据结构设计

使用数组存储扑克牌信息，每张牌包含花色和点数：

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

初始化牌组

在created钩子中生成52张牌的数组：

created() {
  this.suits.forEach(suit => {
    this.values.forEach(value => {
      this.deck.push({ suit, value })
    })
  })
  this.shuffleDeck()
}

洗牌算法

使用Fisher-Yates洗牌算法：

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的过渡系统配合CSS动画：

<template>
  <div class="poker-table">
    <transition-group name="deal" tag="div" class="player-area">
      <div v-for="(card, index) in player.cards" 
           :key="`${card.suit}-${card.value}`"
           class="card"
           :style="{ transform: `rotate(${index * 5}deg)` }">
        {{ card.suit }}{{ card.value }}
      </div>
    </transition-group>
  </div>
</template>

<style>
.deal-move {
  transition: all 0.5s ease;
}
.card {
  width: 100px;
  height: 150px;
  background: white;
  border-radius: 5px;
  position: absolute;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}
</style>

发牌逻辑

分批发牌实现动画效果：

dealCards() {
  let dealCount = 0
  const dealInterval = setInterval(() => {
    if (dealCount >= 52) {
      clearInterval(dealInterval)
      return
    }

    const playerIndex = dealCount % 4
    this.players[playerIndex].push(this.deck[dealCount])
    dealCount++
  }, 200) // 每200ms发一张牌
}

牌面样式优化

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

.card {
  background: linear-gradient(to bottom, #f9f9f9, #fff);
  border: 1px solid #ddd;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  color: var(--card-color);
}

.card[data-suit="♥"], 
.card[data-suit="♦"] {
  --card-color: red;
}

.card[data-suit="♠"], 
.card[data-suit="♣"] {
  --card-color: black;
}

响应式布局

适应不同屏幕尺寸：

@media (max-width: 768px) {
  .card {
    width: 60px;
    height: 90px;
    font-size: 16px;
  }
}