当前位置：首页 > 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实现视频会议

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

vue datepicker 实现

实现 Vue Datepicker 的基本方法在 Vue 项目中实现日期选择功能，可以使用第三方库如 vue-datepicker 或 v-calendar。以下是两种常见实现方式：安装 vue…

vue 实现grid

在Vue中实现Grid布局可以通过多种方式完成，以下是几种常见的方法：使用CSS Grid布局 CSS Grid是一种强大的布局系统，可以直接在Vue组件的样式中使用。以下是一个简单的示例：…

vue实现效果

以下是Vue实现常见效果的几种典型方法，分为不同场景说明：数据绑定与响应式更新使用v-model实现表单双向绑定： <template> <input v-model="…

vue实现图册

Vue实现图册功能在Vue中实现图册功能通常涉及图片展示、切换、缩放等交互效果。以下是常见的实现方法和关键代码示例：基础图册组件结构使用Vue单文件组件构建基础结构： <templat…

vue实现扑克发牌