vue.jsでブラックジャックを作成してみる【解説？】

ブラックジャック解説

ソース全ては前回最後に貼ったbitbucketのソースを見ていただければ。

polymeism.hatenablog.com

ディレクトリ構成

src/pages/index.vue
   /components/ActionButtons.vue
               Hands.vue
               BurstModal.vue
               ResultModal.vue

ソース

ひとつずつ解説しようかな、とも思ったのですが膨大になるので個人的に今回「僕の中ではMVP」だった部分だけ取り上げます。

src/pages/index.vue

メインとなるvueファイル。

作成したカードの合計値を計算するメソッドが今回のMVPです。

最初は複数手札かつAが複数枚手札にあった時に一つずつ条件式で11か1か判定して加算しないといけないかなぁ、とか思ってたのですが、ふと気づきました。 手札を降順にすることでAを最後に回せばそのAの扱いを11にするか1にするかに複雑な条件がいらない…、と。

これが今回実装時の僕個人的なMVPです。せっかくの機会ですので皆さんにお知らせいたします。 現場からは以上です。

    /**
     * 手札合計値を返す
     *
     * @param {Array} hands
     * @return {Number}
     */
    calcHands(hands) {
      // Aを最後に処理するようにnumberを降順で並べる
      const tempHands = [...hands]
      const sortedHands = tempHands.sort((a, b) => b.number - a.number)

      return sortedHands.reduce((sum, hand) => {
        let { number } = hand
        if (number >= 10) number = 10

        // Aの処理
        if (number === 1 && sum + 11 <= 21) {
          number = 11
        }

        return sum + number
      }, 0)
    },

けどcomputedにしてもよかったかもですね。

どんな指摘でも募集しておりますのでなんでもご指摘いただければ幸いです。