#11 【React.jsで、BlackJackを作る】:プレイヤーの処理を実装する② バーストするようにする
これまで
前回は、プレイヤーのハンドのスコアを計算し、画面に表示しました。
BlackJack アプリの sandbox
BlackJack アプリの sandbox は以下です。
この sandbox は、連載が進むのと同時に更新されていきます。
「私も作りたい!」という方は、フォークして一緒に作り始めることができます。
はじめから作りたい方はこちら
findDOMNode is deprecated in StrictMode.
前回実装した Material-UI の Tooltip ですが、React の StrictMode をオンにしてこれを使うと「findDOMNode is deprecated in StrictMode.」という警告が出てしまいますね。
これについては後で考えることにします。
バーストするようにする
メッセージ出力の際に、バーストしているかどうかをチェックするようにします。
src/BlackJack.js
関数 getMessage() を見つけてください。
元のコードはこちらです。
function getMessage() {
let message = [];
if (isGameFinished) {
message.push("Thank you for playing!");
message.push(`Win: ${winCount} Lose: ${loseCount}`);
} else if (answered) {
message.push(isWin ? "Win!" : "Lose!");
} else {
message.push("Hit or Stand?");
}
return <Message>{message}</Message>;
}
この関数にプレイヤーのハンドを渡して、スコアが 21 を超えていたら「BUSTED!!」と表示してみます。
function getMessage(playersHand) {
let message = [];
if (BlackJackUtilities.getTotal(playersHand) > 21) {
message.push("BUSTED!!");
} else {
message.push("Hit or Stand?");
}
return <Message>{message}</Message>;
}
バースト後の処理を実装する
プレイヤーがバーストしたら、そのターンは終わりです。
HIT or STAND ボタンを隠して、NEXT ボタンを表示します。
関数 getButtons() を見つけてください。
元のコードはこちらです。
function getButtons() {
// prettier-ignore
return <BlackJackButtons onClickHit={doHit} onClickStand={doStand} />;
}
今は単純に BlackJackButtons コンポーネントのみを返却しています。
プレイヤーがバーストしたときは GameProgressButtons コンポーネントを返却します。
function getButtons(playersHand) {
if (BlackJackUtilities.getTotal(playersHand) > 21) {
return <GameProgressButton onClickNext={next} />;
} else {
return <BlackJackButtons onClickHit={doHit} onClickStand={doStand} />;
}
}
次のターンに進む
プレイヤーがバーストしてそのターンが終わったら、次のターンを始めたいですよね。
NEXT ボタンを押したら、カードを配り直して次のターンに進むようにします。
関数 next() を見つけてください。
元のコードはこちらです。
function next() {
if (deck.length === 0) {
setIsGameFinished(true);
} else {
setCard(null);
setAnswered(false);
}
}
次のように修正します。
function next() {
dispatch({ type: "init" });
}
関数 initDealersHand(), initPlayersHand() を修正する
今のままだと、NEXT ボタンを押す度にカードが2枚ずつ増えていってしまいます。
関数 deal に、現在のハンドを渡してしまっているためです。
function initDealersHand(state) {
const [newDeck, newHand] = deal(state.deck, state.dealersHand, 2);
return { ...state, deck: newDeck, dealersHand: newHand };
}
以下のように修正します。
function initDealersHand(state) {
const [newDeck, newHand] = deal(state.deck, [], 2);
return { ...state, deck: newDeck, dealersHand: newHand };
}
//関数 initPlayersHand() も同様に修正する
現在の画面
今回の修正で画面は以下のようになりました。
プレイヤーがバーストしたあと。
NEXT ボタンを押したあと。
詳しい変更はこちら
Codesandbox は GitHub連携ができます。
以下は今回のコミットによる差分です。
次回
HIT ボタン、NEXT ボタンを押すことで、ターンを繰り返すことができるようになりました。
ただし、まだ STAND ボタンを押したときの処理やディーラーの ホールカード(伏せてあるカード)の表示をどうするかなど、まだまだ交通整理が必要です。
次回はそのあたりの処理を見直してみます。
この記事があなたのお役に立ちましたら、よろしければサポートをお願いいたします! より良い記事をお届けできるよう、活動費に充てさせていただきます。