当前位置：首页 > 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实现添加用户

Vue 实现添加用户功能数据绑定与表单设计在 Vue 中实现添加用户功能，首先需要设计一个表单，用于收集用户输入的数据。通过 v-model 实现双向数据绑定，确保表单数据与 Vue 实例中的数据…

vue实现适老化样式

Vue 实现适老化样式的关键方法全局字体与字号调整通过 CSS 变量或主题配置统一放大基础字号，建议正文不小于 18px，标题更大。在 App.vue 中设置全局样式： :root { --…

vue弹幕实现不重叠

实现 Vue 弹幕不重叠的方法 CSS 定位与动画控制通过绝对定位和动态计算弹幕轨道高度，确保弹幕在不同轨道上运行。每条弹幕占据固定高度的轨道，避免重叠。 // 弹幕轨道高度计算 const t…

vue怎么实现数据检测

Vue 数据检测的实现方式 Vue 通过响应式系统实现数据检测，核心机制基于 Object.defineProperty（Vue 2）或 Proxy（Vue 3）。以下是具体实现方法：基于 Vue…

vue路由实现内部切换

Vue 路由实现内部切换的方法 Vue Router 是 Vue.js 官方的路由管理器，用于实现单页应用（SPA）的页面切换。以下是几种常见的内部路由切换方式：使用 <router-lin…

vue实现视频会议

使用 Vue 实现视频会议技术选型 Vue.js 作为前端框架，结合 WebRTC 技术实现实时音视频通信。常用的库包括： peerjs：简化 WebRTC 的点对点连接。 socket.io：用…

vue实现扑克发牌