Closed6
JS で 〇×ゲームを、まずはあまり何も参考にせず作ってみる
はじめに
本や動画の教材で立派だとしても、 ゴールとプロセスが明確なので、言われた通りのものを自分で作ってもなかなか仕事で太刀打ちできるスキルに育ちにくいと思いました。
そこで、最初は不効率だとしても、イケてなくてもまずはあまり何も参考にせず作ってみる。
そのプロセスで悩みながら作る方がためになるかもと思って始めます。
作るもの
Build a Tic-tac-toe game with Pure JavaScript
参考👇
(googleの検索結果上でもできるんですね。知らなかった。)
だんだんとテーマを難しくしますが、まずはこれにします。
Tic-Tac-Toe-Game
日本だと、まるばつゲームとか、三目並べとかいいますよね。
これを作ります。
ホスティング
なんでもいいのですが、あまり比較検討してませんが、Web制作やってた頃(4年前くらい)よく使っていたので、Netlifyにします。
ホスティングまでは上の記事を参考にした。
鬼の一瞬でデプロイできた。
デプロイの設定は、mainブランチをデプロイするようにしています。便利。
ジェネレータ
これが良さそう
(おすすめあれば教えてください)
だけど一旦は何も無い状態から作る。
後悔するかもしれんけど。まあそれも勉強。
レポジトリ
設計方針
- 自分は○固定、相手は
×
固定にする - 相手(
×
)のアルゴリズム作成 - ゲームの状況を裏側で保持しておく
- ゲームの勝ち負けの判定
- マス目の作成
- クリックを認識して○をつける
- できれば
- 勝敗の記録を
- ローカルストレージで保存できるようにする
- 消せるようにする
- 勝敗の記録を
ざっくりこんな感じでしょうか?
アルゴリズムに関して
- 3つ並べられるパターンが最大になり得るものを選べばいいのか?
- 相手の打手を考慮していないのですぐ負ける
- 自分と相手がいるゲームということを再確認
- 結果は3パターンある
- 勝ち、負け、引き分け
- なので、両者とも勝ち、もしくは引き分けにしようとするパターンを出せばいいのでは?
- と思った
- 結果は3パターンある
なんて、いろいろ考えました。
そして、以下を考慮すべきかと思いました
- 相手が勝つ可能性を低くする打ち手
- 自分が勝てるうパターンの多さ / 自分が最短で勝てる打ち手(パターン)
というわけで今日は1hパターンを自分の頭だけでいろいろ考えていました。
正解となるアルゴリズムはググればあるのでしょうけど、自分で考える訓練なので引き続き考えながらやっっていきます。
今日もアルゴリズムに関して粘って考えてみた。
考えても出なさそうでググったら、ミニマックスアルゴリズムというのがいいのだそうで、少し調べてみた。
なるほど。
必要そうな処理を書き出してみた。
このスクラップは2023/03/18にクローズされました