#12 【React.jsで、BlackJackを作る】:プレイヤーの処理を実装する③
これまで
前回は、プレイヤーがバーストするようにしました。
BlackJack アプリの sandbox
BlackJack アプリの sandbox は以下です。
この sandbox は、連載が進むのと同時に更新されていきます。
「私も作りたい!」という方は、フォークして一緒に作り始めることができます。
はじめから作りたい方はこちら
交通整理をしました
今回は、プレイヤーが HIT or STAND したときの細かい処理を見直します。
具体的には、以下のように修正します。
・プレイヤーが STAND したら NEXT ボタンを表示する
・state isDeclaredStand → state isTurnEnd に変更
・勝敗チェックをする処理を関数 reducer() に追加
プレイヤーが STAND したら NEXT ボタンを表示する
プレイヤーが STAND しても NEXT ボタンが表示されないので、次のターンに進めない状態でした。
関数 getButtons() で GameProgressButton コンポーネントを返却する際の条件を修正します。
isDeclaredStand → isTurnEnd
state isDeclaredStand は、「STAND したとき」以外にも、「HIT → バーストしたとき」にも更新されるようになり、意味合いが変わってしまいました。
他にも、ディーラーやプレイヤーが「ブラックジャックになったとき」という場合も考えられますね。
なので、state の名前を「ターンが終わったかどうか 」という意味の「isTurnEnd」に変更します。
ターン終了チェックの処理を関数 reducer() に追加しました
以下の状態になったとき、そのターンは終わります。
・ディーラー or プレイヤーがブラックジャックになった
・ディーラー or プレイヤーのハンドのスコアが 21 になった
・プレイヤーがバーストした
初期表示時、HIT ボタンを押したとき、NEXT ボタンを押したとき、それぞれにターン終了チェック処理を追加しました。
関数 reducer()
function reducer(state, action) {
switch (action.type) {
省略
case "check": {
// ディーラーまたはプレイヤーがブラックジャック
if (
BlackJackUtilities.isBlackJack(state.dealersHand) ||
BlackJackUtilities.isBlackJack(state.playersHand)
) {
return { ...state, isTurnEnd: true };
}
// プレイヤーのハンドのスコアが 21 以上になった
if (BlackJackUtilities.getTotal(state.playersHand) >= 21) {
return { ...state, isTurnEnd: true };
}
return { ...state };
}
default:
}
}
useEffect(() => {
dispatch({ type: "init" });
dispatch({ type: "check" });
}, []);
function doHit() {
dispatch({ type: "hit" });
dispatch({ type: "check" });
}
function next() {
dispatch({ type: "init" });
dispatch({ type: "check" });
}
現在の画面
今回の修正で画面は以下のようになりました。
プレイヤーのスコアが 21 に達して、そのターンが終了したところです。
詳しい変更はこちら
Codesandbox は GitHub連携ができます。
以下は今回のコミットによる差分です。
次回
これでだいぶブラックジャックらしくなってきましたね!
次回は、スコアの表示の見直しと勝敗の表示をします。
この記事があなたのお役に立ちましたら、よろしければサポートをお願いいたします! より良い記事をお届けできるよう、活動費に充てさせていただきます。