返回

JavaScript 十三点卡牌游戏：轻松创建与朋友同乐的经典游戏

前端

前言

十三点卡牌游戏是一款简单易学的经典游戏，广受世界各地的人们喜爱。它的规则简单，却能带来无穷的乐趣。在本文中，我们将使用 JavaScript 语言来实现这款游戏，并探讨如何将其融入到网站或应用程序中。

十三点卡牌游戏规则

十三点卡牌游戏的目标是让玩家手里的两张牌之和最接近 13 点，但不能超过 13 点。如果超过 13 点，则称为“爆牌”，玩家将输掉该局游戏。

游戏开始时，每位玩家都会收到两张牌。玩家可以查看自己的牌，也可以选择不看。然后，玩家可以进行以下操作：

  • 叫牌 ：如果玩家认为自己的牌很差，可以放弃该局游戏。
  • 跟牌 ：如果玩家认为自己的牌还不错，可以继续游戏。
  • 加注 ：如果玩家对自己手中的牌非常有信心，可以选择加注。

每位玩家都有两次加注的机会。当所有玩家都跟注或弃牌后，游戏结束。点数最接近 13 点的玩家将赢得该局游戏。

JavaScript 代码实现

首先，我们需要创建一个新的 HTML 文件，并在其中添加必要的 HTML 元素。

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <h1>十三点卡牌游戏</h1>
  <div id="game-container">
    <div id="player-1-hand">
      <h2>玩家 1 的牌</h2>
    </div>
    <div id="player-2-hand">
      <h2>玩家 2 的牌</h2>
    </div>
    <div id="dealer-hand">
      <h2>庄家的牌</h2>
    </div>
    <div id="controls">
      <button id="deal-button">发牌</button>
      <button id="hit-button">要牌</button>
      <button id="stand-button">停牌</button>
    </div>
  </div>
</body>
</html>

接下来，我们需要在 HTML 文件中添加 JavaScript 代码。

// 获取必要的 HTML 元素
const player1Hand = document.getElementById("player-1-hand");
const player2Hand = document.getElementById("player-2-hand");
const dealerHand = document.getElementById("dealer-hand");
const controls = document.getElementById("controls");

// 创建一个新的游戏对象
const game = new Game();

// 为控件添加事件监听器
document.getElementById("deal-button").addEventListener("click", () => {
  game.deal();
});

document.getElementById("hit-button").addEventListener("click", () => {
  game.hit();
});

document.getElementById("stand-button").addEventListener("click", () => {
  game.stand();
});

// 游戏类
class Game {
  constructor() {
    this.deck = new Deck();
    this.player1 = new Player();
    this.player2 = new Player();
    this.dealer = new Dealer();
    this.currentPlayer = this.player1;
  }

  // 发牌
  deal() {
    // 为每位玩家发两张牌
    for (let i = 0; i < 2; i++) {
      this.player1.addCard(this.deck.drawCard());
      this.player2.addCard(this.deck.drawCard());
      this.dealer.addCard(this.deck.drawCard());
    }

    // 显示玩家的牌
    this.updatePlayerHand(this.player1, player1Hand);
    this.updatePlayerHand(this.player2, player2Hand);

    // 显示庄家的牌
    this.updateDealerHand(this.dealer, dealerHand);
  }

  // 要牌
  hit() {
    // 为当前玩家发一张牌
    this.currentPlayer.addCard(this.deck.drawCard());

    // 显示玩家的牌
    this.updatePlayerHand(this.currentPlayer, player1Hand);

    // 检查玩家是否爆牌
    if (this.currentPlayer.getScore() > 21) {
      this.currentPlayer.bust();
      this.endGame();
    }
  }

  // 停牌
  stand() {
    // 切换到下一位玩家
    this.currentPlayer = this.currentPlayer === this.player1 ? this.player2 : this.player1;

    // 显示玩家的牌
    this.updatePlayerHand(this.currentPlayer, player1Hand);

    // 检查玩家是否爆牌
    if (this.currentPlayer.getScore() > 21) {
      this.currentPlayer.bust();
      this.endGame();
    } else if (this.currentPlayer.getScore() === 21) {
      this.currentPlayer.stand();
      this.endGame();
    } else {
      // 继续游戏
      this.hit();
    }
  }

  // 结束游戏
  endGame() {
    // 比较玩家和庄家的分数
    const player1Score = this.player1.getScore();
    const player2Score = this.player2.getScore();
    const dealerScore = this.dealer.getScore();

    // 显示庄家的牌
    this.updateDealerHand(this.dealer, dealerHand, true);

    // 确定获胜者
    let winner;
    if (player1Score > 21 && player2Score > 21) {
      winner = null;
    } else if (player1Score > 21) {
      winner = this.player2;
    } else if (player2Score > 21) {
      winner = this.player1;
    } else if (player1Score === 21 && player2Score === 21) {
      winner = null;
    } else if (player1Score === 21) {
      winner = this.player1;
    } else if (player2Score === 21) {
      winner = this.player2;
    } else if (player1Score > dealerScore) {
      winner = this.player1;
    } else if (player2Score > dealerScore) {
      winner = this.player2;
    } else if (dealerScore > 21) {
      winner = null;
    } else {
      winner = this.dealer;
    }

    // 显示获胜者
    if (winner) {
      alert(`获胜者：${winner.name}`);
    } else {
      alert("平局");
    }

    // 重置游戏
    this.resetGame();
  }

  // 重置游戏
  resetGame() {
    this.deck = new Deck();
    this.player1 = new Player();
    this.player2 = new Player();
    this.dealer = new Dealer();
    this.currentPlayer = this.player1;

    player1Hand.innerHTML = "";
    player2Hand.innerHTML = "";
    dealerHand.innerHTML = "";
  }

  // 更新玩家的手牌
  updatePlayerHand(player, handElement) {
    // 清空手牌元素
    handElement.innerHTML = "";

    // 为每张牌创建一个元素
    for (let i = 0; i < player.hand.length; i++) {
      const cardElement = document.createElement("div");
      cardElement.classList.add("card");
      cardElement.innerHTML = player.hand[i].toString();

      // 将牌添加到手牌元素中
      handElement.appendChild(cardElement);
    }
  }

  // 更新庄家的手牌
  updateDealerHand(dealer, handElement, showAllCards = false) {
    // 清空手牌元素
    handElement.innerHTML = "";

    // 为每张牌创建一个元素
    for (let i = 0; i < dealer.hand.length; i++) {
      const cardElement = document.createElement("div");
      cardElement.classList.add("card");

      // 如果是庄家的第一张牌，则背面朝上
      if (i === 0 && !showAllCards) {
        cardElement.classList.add("back");
      } else {
        cardElement.innerHTML = dealer.hand[i].toString();
      }

      // 将牌添加到手牌元素中
      handElement.appendChild(cardElement);
    }
  }
}

// 玩家类
class Player {