当前位置：首页 > JavaScript

js实现纸牌

2026-03-02 05:46:42JavaScript

实现纸牌游戏的基本步骤

纸牌游戏通常涉及洗牌、发牌、牌堆管理等功能。以下是使用JavaScript实现纸牌游戏的核心逻辑。

创建一副标准扑克牌

使用数组表示一副52张的标准扑克牌，包含4种花色和13个点数：

const suits = ['♥', '♦', '♣', '♠'];
const ranks = ['A', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K'];

function createDeck() {
  const deck = [];
  for (const suit of suits) {
    for (const rank of ranks) {
      deck.push({ suit, rank });
    }
  }
  return deck;
}

洗牌算法

使用Fisher-Yates洗牌算法实现随机洗牌：

function shuffleDeck(deck) {
  for (let i = deck.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [deck[i], deck[j]] = [deck[j], deck[i]];
  }
  return deck;
}

发牌功能

实现从牌堆顶部发牌的功能：

function dealCard(deck) {
  if (deck.length === 0) return null;
  return deck.pop();
}

牌堆管理

创建牌堆对象来管理游戏状态：

class CardGame {
  constructor() {
    this.deck = shuffleDeck(createDeck());
    this.discardPile = [];
  }

  drawCard() {
    const card = dealCard(this.deck);
    if (card) this.discardPile.push(card);
    return card;
  }

  reshuffle() {
    if (this.discardPile.length > 0) {
      this.deck = shuffleDeck([...this.deck, ...this.discardPile]);
      this.discardPile = [];
    }
  }
}

渲染纸牌到页面

使用CSS和HTML展示纸牌：

<style>
  .card {
    width: 100px;
    height: 140px;
    border: 1px solid #000;
    border-radius: 5px;
    display: inline-block;
    margin: 5px;
    text-align: center;
    line-height: 140px;
    font-size: 24px;
    position: relative;
  }
  .red { color: red; }
  .black { color: black; }
</style>

<div id="game-area"></div>

<script>
  function renderCard(card) {
    const cardEl = document.createElement('div');
    cardEl.className = `card ${card.suit === '♥' || card.suit === '♦' ? 'red' : 'black'}`;
    cardEl.textContent = `${card.rank}${card.suit}`;
    document.getElementById('game-area').appendChild(cardEl);
  }
</script>

游戏逻辑示例

实现简单的发牌演示：

const game = new CardGame();

// 发5张牌
for (let i = 0; i < 5; i++) {
  const card = game.drawCard();
  if (card) renderCard(card);
}

进阶功能

添加卡牌拖拽交互：

document.querySelectorAll('.card').forEach(card => {
  card.draggable = true;
  card.addEventListener('dragstart', e => {
    e.dataTransfer.setData('text/plain', card.textContent);
  });
});

document.getElementById('game-area').addEventListener('drop', e => {
  e.preventDefault();
  const data = e.dataTransfer.getData('text/plain');
  // 处理拖放逻辑
});

document.getElementById('game-area').addEventListener('dragover', e => {
  e.preventDefault();
});

性能优化

对于复杂纸牌游戏，考虑使用Canvas或WebGL渲染：

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

function drawCard(ctx, card, x, y) {
  // 绘制卡牌图形
  ctx.fillStyle = 'white';
  ctx.fillRect(x, y, 100, 140);
  ctx.fillStyle = card.suit === '♥' || card.suit === '♦' ? 'red' : 'black';
  ctx.font = '24px Arial';
  ctx.fillText(`${card.rank}${card.suit}`, x + 10, y + 30);
}

以上代码提供了实现纸牌游戏的基本框架，可根据具体游戏规则扩展功能。

js实现纸牌