当前位置：首页 > VUE

vue实现扑克发牌

2026-02-18 13:09:48VUE

Vue 实现扑克发牌效果

初始化扑克牌数据

创建一个包含52张扑克牌的数组，每张牌用对象表示花色和点数

data() {
  return {
    deck: [],
    players: [[], [], [], []],
    currentPlayer: 0
  }
},
created() {
  this.initDeck()
}

洗牌算法实现

使用Fisher-Yates算法对扑克牌数组进行随机排序

methods: {
  initDeck() {
    const suits = ['♥', '♦', '♠', '♣']
    const values = ['A', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K']

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

  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]]
    }
  }
}

发牌动画实现

使用CSS过渡和Vue的transition-group实现发牌动画效果

<template>
  <div class="poker-table">
    <button @click="dealCards">发牌</button>

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

    <div class="players">
      <div v-for="(player, pIndex) in players" :key="`player-${pIndex}`" class="player">
        <transition-group name="player-card" tag="div">
          <div v-for="(card, cIndex) in player" :key="`player-${pIndex}-card-${cIndex}`" 
               class="card front" :style="cardStyle(card)">
            <span class="suit" :class="card.suit">{{ card.suit }}</span>
            <span class="value">{{ card.value }}</span>
          </div>
        </transition-group>
      </div>
    </div>
  </div>
</template>

发牌逻辑实现

按顺序给每位玩家发牌，每次发一张

methods: {
  dealCards() {
    if (this.deck.length === 0) return

    const card = this.deck.pop()
    this.players[this.currentPlayer].push(card)
    this.currentPlayer = (this.currentPlayer + 1) % this.players.length

    if (this.deck.length > 0) {
      setTimeout(this.dealCards, 300)
    }
  },

  cardStyle(card) {
    const color = card.suit === '♥' || card.suit === '♦' ? 'red' : 'black'
    return { color }
  }
}

CSS样式设计

添加必要的CSS样式实现扑克牌视觉效果

.poker-table {
  position: relative;
  width: 800px;
  height: 600px;
  margin: 0 auto;
  background: green;
}

.card {
  width: 100px;
  height: 150px;
  border-radius: 10px;
  position: absolute;
  transition: all 0.5s;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px;
  box-sizing: border-box;
  font-size: 24px;
  font-weight: bold;
}

.back {
  background: blue;
  border: 2px solid white;
}

.front {
  background: white;
  border: 1px solid black;
}

.suit.red {
  color: red;
}

.suit.black {
  color: black;
}

.deck {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.players {
  display: flex;
  justify-content: space-around;
  position: absolute;
  bottom: 20px;
  width: 100%;
}

.player {
  width: 120px;
  height: 180px;
  position: relative;
}

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

.player-card-enter-active, .player-card-leave-active {
  transition: all 0.5s;
}

.player-card-enter, .player-card-leave-to {
  opacity: 0;
  transform: translateY(30px);
}