だんだんと暖かくなってきた季節、未だに真冬用のコートを着て出勤しています。
開発部門の上井です。
先週のブログで同じ開発部門の先輩である佐々木さんの記事
を見て自分も触発されて作りました。
今回は、「jQueryで○×ゲームを作ってみよう！」の回です。
冒頭
ただ誰かの作品を見てマネするのは面白くない（勉強にならない）為、○×ゲームのプログラミングに関する記事等は見ずに自分の知識のみで作り上げてみようと自分ルールを設けました。
使用言語は、HTML,CSS（SCSS）,jQueryです。
設計
作るぞ、と言ってからすぐ作り出すと後で問題が生じる場合が多いので設計考案から。大体どんなプログラミングでもまずは「要件定義、設計」からなのでは無いでしょうか。自分はしたことありませんが。
要件
- ・9マスの中から縦・横・斜めに3マス同じマークを先に揃えたほうが勝ち。3マスに揃わず全てのマスが埋まると引き分け。というルール。
- ・今回はユーザーVSコンピュータ、順番はユーザーが先攻のみに限定。
- ・時間があれば「難しい」難易度を追加
動作部分
■クリックしたときの動作
- ・該当マスにマーク
- ・3マス揃ったか判定
- ・相手ターンに返す
■CPUの動作
難易度：易しい
- ・配列からランダムに1つ選ぶ
難易度：難しい
- ・配列から最善手を1つ選ぶ
- ・該当マスにマーク
- ・3マス揃ったか判定
- ・相手ターンに返す
■結果判定の動作
- ・どちらが勝ったかを判定
- ・結果の表示
- ・「もう一度」ボタンを表示
■デザイン、アニメーションの調整
- ・順番表示
- ・マル、バツの表示アニメーション
- ・結果表示アニメーション
こんなもんでしょうか。事前にどういう動作が必要かを明記すると自分が今どんな状況なのか制作工程の見える化に繋がります。
実際のプログラミング現場であればもっと厳密だと思います。
そしてなんやかんやでできた結果がこちら。
See the Pen tic-tac-toe by ueeeei (@uei) on CodePen.
結果
○×ゲームなんて言いながら、色が変わるだけです。
デザインやアニメーションは時間が無いため省略しました。
更に「難しい」難易度も時間が間に合わずあえなく断念…
実際にゲームをしてみるとCPUのマス選択が全てランダムに設定している為、めちゃくちゃ弱い…
あとがき
実際に作ってみて、普段Web上の簡単な動作でしかjQueryを使用してこなかったのですが、こういったゲームのようなプログラムだとさらに広い知識が必要だと感じました。関数であったり、変数のスコープなど基礎から学び直したいと強く思いました。
「難しい」難易度も時間があればまたチャレンジしたいと思います。
以上です。