Thu Apr 27 03:53:00 UTC 2023 inscode

src/App.vue

-<script setup>
-import HelloWorld from './components/HelloWorld.vue'
-import TheWelcome from './components/TheWelcome.vue'
-</script>
-
 <template>
-  <header>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
-
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
+  <div>
+    <h1>21点游戏</h1>
+    <div class="game-board">
+      <div class="player-section">
+        <h2>玩家</h2>
+        <p>得分: {{ playerScore }}</p>
+        <div class="cards">
+          <img v-for="card in playerCards" :key="card.id" :src="card.image" />
+        </div>
+        <button v-if="!gameOver" @click="playerHit">抽牌</button>
+        <button v-if="!gameOver" @click="playerStand">结束回合</button>
+      </div>
+      <div class="dealer-section">
+        <h2>庄家</h2>
+        <p>得分: {{ dealerScore }}</p>
+        <div class="cards">
+          <div class="card-back" v-if="!gameOver">
+            <div></div>
+          </div>
+          <img class="dealer-card" v-for="(card, index) in dealerCards" :key="card.id" :src="index === 0 && !dealerCardRevealed ? 'card-back.png' : card.image" />
+        </div>
+        <button v-if="!gameOver && !dealerCardRevealed" @click="revealDealerCard">翻开牌</button>
+      </div>
     </div>
-  </header>
-
-  <main>
-    <TheWelcome />
-  </main>
+    <p v-if="gameResult">{{ gameResult }}</p>
+    <button v-if="gameOver" @click="restart">重新开始</button>
+  </div>
 </template>
 
-<style scoped>
-header {
-  line-height: 1.5;
-}
+<script>
+export default {
+  data() {
+    return {
+      deck: [],
+      playerCards: [],
+      dealerCards: [],
+      playerScore: 0,
+      dealerScore: 0,
+      gameOver: false,
+      gameResult: '',
+      dealerCardRevealed: false
+    }
+  },
+  created() {
+    this.initializeDeck()
+    this.dealCards()
+  },
+  methods: {
+    initializeDeck() {
+      const suits = ['hearts', 'diamonds', 'clubs', 'spades']
+      const ranks = ['ace', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'jack', 'queen', 'king']
 
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
-}
+      for (let suit of suits) {
+        for (let rank of ranks) {
+          const name = rank === '10' ? 't' + suit.charAt(0) : rank.charAt(0) + suit.charAt(0)
+          const image = `./cards/${name}.png`
+          this.deck.push({ suit, rank, value: this.cardValue(rank), name, image })
+        }
+      }
 
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
-  }
+      this.shuffleDeck()
+    },
+    shuffleDeck() {
+      for (let i = this.deck.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i   1))
+        const temp = this.deck[i]
+        this.deck[i] = this.deck[j]
+        this.deck[j] = temp
+      }
+    },
+    cardValue(rank) {
+      switch (rank) {
+        case 'ace':
+          return 11
+        case 'jack':
+        case 'queen':
+        case 'king':
+          return 10
+        default:
+          return parseInt(rank)
+      }
+    },
+    dealCards() {
+      this.playerCards.push(this.deck.pop())
+      this.dealerCards.push(this.deck.pop())
+      this.playerCards.push(this.deck.pop())
+      this.dealerCards.push(this.deck.pop())
 
-  .logo {
-    margin: 0 2rem 0 0;
-  }
+      this.calculateScores()
+    },
+    calculateScores() {
+      let playerScore = 0
+      let hasAce = false
+
+      for (let card of this.playerCards) {
+        playerScore += card.value
+        if (card.rank === 'ace') {
+          hasAce = true
+        }
+      }
+
+      if (playerScore > 21 && hasAce) {
+        playerScore -= 10
+      }
+
+      this.playerScore = playerScore
+
+      let dealerScore = 0
+      hasAce = false
+
+      for (let card of this.dealerCards) {
+        dealerScore += card.value
+        if (card.rank === 'ace') {
+          hasAce = true
+        }
+      }
+
+      if (dealerScore > 21 && hasAce) {
+        dealerScore -= 10
+      }
 
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
+      this.dealerScore = dealerScore
+
+      if (this.playerScore === 21) {
+        this.gameOver = true
+        this.gameResult = '恭喜，你获得了21点！'
+        return
+      }
+
+      if (this.dealerScore === 21) {
+        this.gameOver = true
+        this.gameResult = '很遗憾，庄家获得了21点。'
+        return
+      }
+
+      if (this.playerScore > 21) {
+        this.gameOver = true
+        this.gameResult = '很遗憾，你输了。'
+        return
+      }
+
+      if (this.dealerScore > 21) {
+        this.gameOver = true
+        this.gameResult = '恭喜，你赢了！'
+        return
+      }
+    },
+    playerHit() {
+      this.playerCards.push(this.deck.pop())
+      this.calculateScores()
+    },
+    playerStand() {
+      this.dealerTurn()
+    },
+    dealerTurn() {
+      this.dealerCardRevealed = true
+
+      while (this.dealerScore < 17) {
+        this.dealerCards.push(this.deck.pop())
+        this.calculateScores()
+      }
+
+      if (this.dealerScore > this.playerScore && this.dealerScore <= 21) {
+        this.gameOver = true
+        this.gameResult = '很遗憾，你输了。'
+      } else if (this.dealerScore < this.playerScore || this.dealerScore > 21) {
+        this.gameOver = true
+        this.gameResult = '恭喜，你赢了！'
+      } else {
+        this.gameOver = true
+        this.gameResult = '平局。'
+      }
+    },
+    revealDealerCard() {
+      this.dealerCardRevealed = true
+      this.calculateScores()
+    },
+    restart() {
+      this.deck = []
+      this.playerCards = []
+      this.dealerCards = []
+      this.playerScore = 0
+      this.dealerScore = 0
+      this.gameOver = false
+      this.gameResult = ''
+      this.dealerCardRevealed = false
+
+      this.initializeDeck()
+      this.dealCards()
+    }
   }
 }
+</script>
+
+<style>
+.cards {
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: 20px;
+}
+.cards img {
+  height: 170px;
+  margin-right: 10px;
+}
+.dealer-card {
+  margin-right: 10px;
+}
+.card-back {
+  position: relative;
+  width: 170px;
+  height: 242px;
+}
+.card-back div {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 170px;
+  height: 242px;
+  background: url(./cards/card-back.png) no-repeat center center / contain;
+}
 </style>