ブラウザで遊べる自作オセロゲーム｜AI対戦・スマホ対応
いますぐ遊べる！自作オセロゲーム
以下のリンクから、ブラウザでオセロをプレイできます。インストール不要でスマホにも完全対応！
オセロゲームを作った理由
このゲームを作るきっかけになったのは、『#100日チャレンジ 毎日連続100本アプリを作ったら人生が変わった』という本を読んだことでした。
著者の行動力に刺激を受け、「自分も何か作ってみたい！」と思い、まずは著者も最初に作った『オセロ』を作ってみました。
著者同様、チャットGPTにいろいろ質問をぶつけがら作成していきました。
コードの中身を理解しようと思って作っていきましたが、なかなか難しくチャットGPT任せになっている部分も大きいです。
ですが、これを継続して少しずつプログラミングを理解できていけたらと思っています。
また、せっかく作って後悔するのであれば、訪れてくださった方に簡単に遊んでもらえるようにWeb上で遊べるようにしてみました。
作成の流れと使った技術
ステップ① Python版でロジック構築
最初はPythonという言語を使ってオセロの基本的なロジックを組みました。
ほんとはこのままブログにアップロードして遊んでもらえるようにする予定でした。
しかし、PythonのままではWeb上で遊べるように後悔することが難しく、Pythonベースでのゲームは断念しました。
ステップ② HTML + JavaScript での作成に変更
Pythonで作成することを諦めたので、次はHTML + JavaScriptで作成することにしました。
チャットGPTに相談したところ、Web上で動くゲームを作るにはHTML + JavaScriptで作成することがベストとのことでした。
そのため、Pythonで作ったコードをまるっとHTML + JavaScriptに変換してもらうことにしました。
結果的にうまく変換できたのは、
Canvas APIで8×8の盤面と石の描画- 合法手の判定処理・石を置いた時の裏返しロジック
requestAnimationFrameベースのアニメーション演出
だったので、ここから少しずつ機能を追加していくことにしました。
ステップ③ AI対戦アルゴリズム実装
次に追加することにした機能は、AI対戦モードです。
変換したままだとローカル対戦(2人対戦)のみなので、簡単に遊んでもらえません。
ブログにふらっと訪れて、遊んでもらえるようにAI対戦モードを追加しました。
一応、AIの難易度を選べるようにしました。
- Easy：ランダム選択
- Normal：最も多く石を裏返せる手を選ぶ
- Hard：角を取らない形で最大裏返しの戦略
難易度の調整部分は、チャットGPTに完全に任せてしまったので、どういったロジックになっているか正直わかっていません。(今後しっかりと勉強していきます。)
ステップ④ 言語切替対応とゲーム終了UI
最後に一応、2言語対応とゲーム終了時のUIを追加しました。
- ボタン・スコア・メッセージ等の文字列を
langStringsで管理 日本語 / 英語の動的切り替えに対応- 勝敗結果を画面に表示
- 「再戦」ボタンで盤面リセット
- 「終了」ボタンでタイトルに戻る
まとめ
初めて自分でゲームを作ってみました。
初めてプログラミングに触れるので、自分1人では絶対に無理だなと感じつつ、チャットGPTに手伝ってもらいながら、なんとか完成しました。
こんな感じでこれからも少しずつ、作っては後悔していけたらなと思います。
