量子五目並べで遊びたい

はじめに

まずはこちらをご覧ください
https://youtu.be/mitAxA3f4U4?si=u-XLpYxqwVTc0Mrc
おもしろそうすぎる
作ります

というか個人的には作ってはいたのですがQuizKnockさんがリリースされるのであれば私が世に出すのはおかしな話なので記事も書くつもりはなく個人的に楽しんでいました。が、今月1日以下のようなリリースがありゲーム分野から大きく撤退ということでこれは新ゲームは出ないな？こんな面白いゲームなのにもったいないと思ったので筆を執っています
https://www.portal.quizknock.com/news/9a67f159-7004-41f6-bcc3-bee5cf4a4d79
※もちろん怒られたら消します

目標

1. 量子N目並べのアルゴリズムの実装
2. ローカルで対人対戦ができるようにする
   （一つの画面を2人のプレイヤーが操作する）
3. インターネット対戦ができるようにする
4. CPU対戦ができるようにする（量子N目並べAI？の実装）

ここからは作り方の話です
とりあえず遊んでみたいという方はこちら

方法

では実際に作っていきたいと思います
とはいっても五目並べやオセロなどはプログラミング教材としてもよくある題材だと思うので量子五目並べで本質的な部分以外はバッサリいきます
なんか「須貝と作れるようになるLIVE」でもUnity使ってオセロ作ってたような気がしたのですが、見つからないので存在しない記憶だったかもしれません

環境

• Next.js 13.4.12

プログラム

基本的な動作は以下の通りです

• オセロ的な盤面（二次元配列）を用意する
• ユーザーのクリックに応じて二次元配列に石（確率を持っている）を入れていく
• 観測が押されたら
  • それぞれ石に対して判定を行う
    （毎回疑似乱数を呼び出して石の確立が乱数より小さかったら黒、大きかったら白とする）
  • 確定した盤面（配列）に対してN目並べのの勝敗判定を行う
    • 縦・横・斜めにN目以上並んでいるかを判定する

（画面表示は随時更新する）

ソースコード

整理できたら……

結果（試作 ver.001）

Reactとかがまだよく分かってないので環境によっては表示が乱れるかもしれません
試作感満載ですがご容赦ください
https://quantum-pentagram.vercel.app/
いちおうギリ遊べるレベルのものを作ることができました

考察

ひとまずスクラッチで作ったので課題がたくさん出てきました。整理してみましょう

課題

• 全般
  • なんか動作が重い
    • 新たに石が置かれた時、本来であればそのマスだけ描画を更新すれば十分なはずですが、盤面全体が更新されていそう
      • useMemoとかが関係ありそうだがよく分かってない
  • レイアウトの乱れ
    • これは完全に実力不足（徐々に直していくしかない）
• ルール面
  • 勝敗判定
    • 複数の5目が成立することがかなりあります（密集して石を置いている場合特に）
      （動画では両方成立した場合観測した側の勝ちだった）
      • 解決方法案
        • 成立したライン数で勝負（暫定）
        • 観測した側の勝ち
    • 長連も結構起こる
      • 長連を成立としてカウントするのか？
      • 現状の判定アルゴリズムだと長連は2ライン成立と判定される（これは微妙な気がする）
        e.g)a1～a6で6目並んだ場合、a1から5目とa2から5目が二重で成立判定される
  • 先手有利（おそらく）
    • 解決方法案
      • 先手のみ弱い石から始まる
      • 先手のみ観測回数上限が少ない
      • 先手・後手の石の確立の微調整
  • その他
    • 三三、四四は禁止するほど強い？
      • 判定は？強い石だけ？両方？
    • 観測と着手を同じターンに許容するか？
      • その場合の観測と着手の順序は？
      • 動画の感じでは観測し得（特に先手）なので禁止しても良さそう
    • 弱い石の後に弱い石を打つことは可能？
    • トーラスにして左右の端、上下の端が繋がってもおもしろそう

まとめ

実装してみてわかったのは主にルール面でまだまだ検討課題がたくさんありそうなことでした
動画ではここら辺はあまり気にならずエンタメになっていてさすがQuizKnockすごいな…という

Future work

今回は目標のうち1, 2ぐらいまで作ることができました。3, 4については引き続き実現を目指します
また作ってみた結果としてわかってきた課題の解決として、

• 動作が重い原因の特定と修正（10×10ぐらいだとそこまで気にならないけど）
• 必要そうなルール変更ができるように改修
• その上でCPU対戦を実装→対戦結果の解析をすることでルールの最適化

などができると良さそうだと思っています
オンラインかCPUと対戦できないと飽きてしまうので次はそこらへんかな～