最近暑いですね！
気分転換を兼ねて、ReactとCSSでスロットゲームを作ったので、共有します！
今回のGitはこちらです！
ChatGPTを活用したので、記事は感想がメインです。
なぜ作ったのか
弊社では、今夏、納涼会を開催することになりました！
納涼会のLT大会で登壇するので、急遽、ネタを作ることに。
また、最近の業務でReactを使うので、ReactとCSSでスロットゲームを作ることにしました。
時間短縮のため、ChatGPT（有料版）も活用してます。
（※完成後、ちゃんとロジックを理解してます。）
要件
以下の要件を伝えてます。
・リールは3行*3列
・絵柄は3,7,🍒,🍇,🐯,🔔,🤡
・各リールで3秒間、ランダムに回転させて、絵柄が揃ったらボーナスを獲得
・横、斜めのどちらかで揃えばOK
・獲得したボーナスは保持する
・Reactのみで作成
・レトロ感のあるデザイン
最初に感じた壁
リール配列って、意外と難しいです。
複数の絵柄が同時に揃わないように、考えて配置しなければなりません。
解決策
実績がある配列を使ってみよう！
ということになり、マイジャグラーのリール配列を拝借しました！
おそらく計算しつくされた配列になっているはずなので、間違いありません！
サイトにはリール画像しかなかったので、確認しながら、絵文字と数字の配列にしました。
const leftReel = ['🔔', '7', '🐯', '🍇', '🐯', '🍇', '3', '🍒', '🍇', '🐯', '🍇', '7', '🤡', '🍇', '🐯', '🍇', '🍒', '3', '🍇', '🐯', '🍇'];
const centerReel = ['🐯', '7', '🍇', '🍒', '🤡', '🐯', '3', '🍇', '🍒', '🐯', '🔔', '🍇', '🍒', '🐯', '3', '🍇', '🍒', '🐯', '🔔', '🍇', '🍒'];
const rightReel = ['🍇', '7', '3', '🔔', '🐯', '🍇', '🤡', '🔔', '🐯', '🍇', '🤡', '🔔', '🐯', '🍇', '🤡', '🔔', '🐯', '🍇', '🤡', '🔔', '🐯'];
ゲームの名前決め
マイジャグラーのリール配列を使ったので、敬意を込めて
My Jungle 55（マイジャングル ゴーゴー）
にしました！
（パクリではなく、敬意を込めてます！）
さらに、要件に以下を追加しました。
・ボーナスが揃ったら、55ランプを点灯
いいですね！
せっかく作るなら、楽しく作りたいものです
昔よく打ってたので、イメージが湧きます！
実際に作ってみて、どうだったか
思ったより大変
ChatGPT、すごく便利です。
便利なんですが、一発で完成形に持っていくのは、至難の業。
何度もやりとりして、ようやく満足のいくものになります。
伝え方って大事
これはChatGPTに限らず、人間同士、特にオンラインで感じるのですが、伝え方というのは、非常に大事です。
ChatGPTは基本的にテキストで受け取るので、簡潔に、かつ明確に伝えなければ、違った解釈になることがあります。
実際に作ったもの
こちらです！
このCSSもChatGPTに依頼したのですが、シンプルでいい感じだと思います。
ちゃんとランダムに止まってくれます
気になる55ランプ
3または7が揃った際、ちゃんと55ランプが点灯しました！
実際にはなかなか揃わないので、テストモードでは、3回転ごとに7が揃うお祭り仕様にしてます🏮
キャプチャが取れなかったので載せていないですが、絵柄が揃ったら、右下に獲得枚数が1秒間表示されます。（+500 など）
ボーナスや子役の確率は入ってないので、次は設定を入れてみようと思います！
今回のソース
冒頭でも共有しておりますが、Gitはこちらです。3時間しかなかったので、全然整理できてないです🙇♂
それにしても、メーカーのリール配列は凄いです、、感謝を込めて打ちましょう。
最後に
今回はChatGPTを活用し、自分が興味があるものを作ってみました。
単に作るだけでなく、学習用途で利用することにより、より効率的に学習していけるのではないかと思います。
AIの発展はまだまだこれからだと思うので、今後が楽しみです！
うまく活用して、飛躍的に成長しましょう！