![見出し画像](https://assets.st-note.com/production/uploads/images/53791711/rectangle_large_type_2_16d71721875fc633cdaeb6c832f97e4e.jpeg?width=1200)
#39 デッキをシャッフルする②:React でプロプラ! Vol.3 「BlackJack」
「React.js でプログラミング・プラモデル」の連載第3弾。
React.js で、カジノゲーム「BlackJack」を作ろう!
これまで
前回は、デッキの枚数が少なくなったら reducer() にディスパッチする処理を実装しました。
現時点の Sandbox
前回までの Sandbox はこちら。
はじめての方は、ここから一緒に作り始めることができます。
今回のゴール
・デッキをシャッフルする処理を実装する
今回の設計書
src/BlackJack.js
レデューサー
// case "shuffle": を見つけてください
-----
1. action.type が "shuffle" のとき、以下の処理を行う
1.1 定数 newDeck を宣言し、BlackJackUtils.getDeck(numberOfDeck) の戻り値で初期化する
1.2 state.deck を newDeck で更新する
1.3 state を返却する
ヒント
・「シャッフルする」といっても、プログラム的には「作り直す」ってことだね!
・デッキは 3つだよ!
・1.2 ~ 1.3 は、もうすっかりお馴染みのスプレッド構文で 1行にまとめよう!
実装例
デッキをシャッフルできましたか?
動作確認する場合は、前回と同じようにコンソールを仕込みましょう!
「32 → 156」と出力されていればオッケーです!
src/BlackJack.js
// シャッフルタイム
useEffect(() => {
console.log(state.deck.length);
if (state.deck.length <= state.minimumNumber) {
次回
ゲームとしてはこれで完成ですが、遊びやすさを少し追求してみましょう。
ボタン操作をキーボードでできるようにします!
次回で最終回の予定です!
この記事があなたのお役に立ちましたら、よろしければサポートをお願いいたします! より良い記事をお届けできるよう、活動費に充てさせていただきます。