当前位置：首页 > VUE

vue实现扑克发牌

2026-01-17 20:43:51VUE

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洗牌算法：

vue实现扑克发牌

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>

发牌逻辑

分批发牌实现动画效果：

vue实现扑克发牌

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

标签: 扑克 vue

分享给朋友：

vue实现gridlayout

Vue 实现 Grid Layout 使用 CSS Grid 布局 CSS Grid 是一种强大的布局系统，可以直接在 Vue 组件的样式中使用。通过定义网格容器和网格项，可以快速实现复杂的布局结构。…

vue实现字幕

Vue 实现字幕功能在 Vue 中实现字幕功能可以通过动态绑定数据和 CSS 动画来实现。以下是具体实现方法： 1. 基础字幕组件创建一个字幕组件，通过 v-model 或 props 接收字…

vue实现门户

Vue 实现门户网站的关键步骤搭建基础框架使用 Vue CLI 或 Vite 初始化项目，安装 Vue Router 管理多页面路由。门户通常需要响应式布局，可引入 UI 库如 Element P…

vue实现页面

Vue 实现页面的基本方法创建 Vue 项目使用 Vue CLI 快速初始化项目，运行以下命令安装并创建项目： npm install -g @vue/cli vue create my-pro…

vue实现组件跟随

实现组件跟随的常见方法使用CSS定位通过CSS的position: fixed或position: absolute属性实现组件跟随。需要结合JavaScript计算目标元素的位置。 &…

vue实现添加div

在 Vue 中动态添加 div 元素使用 v-for 指令动态渲染 div 通过 v-for 可以基于数组数据动态生成多个 div 元素。在模板中绑定数组数据，Vue 会自动遍历数组并为每个元素创建…

vue实现扑克发牌