Closed6

JS で 〇×ゲームを、まずはあまり何も参考にせず作ってみる

志水 亮介 (Ryosuke Shimizu)志水 亮介 (Ryosuke Shimizu)

はじめに

本や動画の教材で立派だとしても、 ゴールとプロセスが明確なので、言われた通りのものを自分で作ってもなかなか仕事で太刀打ちできるスキルに育ちにくいと思いました。

そこで、最初は不効率だとしても、イケてなくてもまずはあまり何も参考にせず作ってみる。
そのプロセスで悩みながら作る方がためになるかもと思って始めます。

志水 亮介 (Ryosuke Shimizu)志水 亮介 (Ryosuke Shimizu)

作るもの

Build a Tic-tac-toe game with Pure JavaScript

参考👇

https://slawkolodziej.com/posts/5-javascript-projects-you-should-build-as-junior-frontend-developer

(googleの検索結果上でもできるんですね。知らなかった。)

だんだんとテーマを難しくしますが、まずはこれにします。

Tic-Tac-Toe-Game

日本だと、まるばつゲームとか、三目並べとかいいますよね。

これを作ります。

志水 亮介 (Ryosuke Shimizu)志水 亮介 (Ryosuke Shimizu)

ホスティング

https://qiita.com/guemon/items/84d5d71c9cc21d9596dc

なんでもいいのですが、あまり比較検討してませんが、Web制作やってた頃(4年前くらい)よく使っていたので、Netlifyにします。

https://qiita.com/sugo/items/2ee64887d682b0dae635

ホスティングまでは上の記事を参考にした。

鬼の一瞬でデプロイできた。

https://gallant-allen-8f8101.netlify.app/

デプロイの設定は、mainブランチをデプロイするようにしています。便利。

ジェネレータ

これが良さそう

https://qiita.com/nishinoshake/items/4ea054fdc9cec32d0a73

(おすすめあれば教えてください)

だけど一旦は何も無い状態から作る。

後悔するかもしれんけど。まあそれも勉強。

レポジトリ

https://github.com/ryosuketter/tic-tac-toe-game

志水 亮介 (Ryosuke Shimizu)志水 亮介 (Ryosuke Shimizu)

設計方針

  • 自分は○固定、相手は×固定にする
  • 相手(×)のアルゴリズム作成
  • ゲームの状況を裏側で保持しておく
  • ゲームの勝ち負けの判定
  • マス目の作成
  • クリックを認識して○をつける
  • できれば
    • 勝敗の記録を
      • ローカルストレージで保存できるようにする
      • 消せるようにする

ざっくりこんな感じでしょうか?

志水 亮介 (Ryosuke Shimizu)志水 亮介 (Ryosuke Shimizu)

アルゴリズムに関して

  • 3つ並べられるパターンが最大になり得るものを選べばいいのか?
    • 相手の打手を考慮していないのですぐ負ける
  • 自分と相手がいるゲームということを再確認
    • 結果は3パターンある
      • 勝ち、負け、引き分け
      • なので、両者とも勝ち、もしくは引き分けにしようとするパターンを出せばいいのでは?
        • と思った

なんて、いろいろ考えました。

そして、以下を考慮すべきかと思いました

  • 相手が勝つ可能性を低くする打ち手
  • 自分が勝てるうパターンの多さ / 自分が最短で勝てる打ち手(パターン)

というわけで今日は1hパターンを自分の頭だけでいろいろ考えていました。

正解となるアルゴリズムはググればあるのでしょうけど、自分で考える訓練なので引き続き考えながらやっっていきます。

このスクラップは2023/03/18にクローズされました