HTMLとCSSとJavaScriptを使って2人用オセロを作ってみる

スポンサーリンク

このページではソースコードの一部分を簡単な解説をしています。

コード全体はgithubにあります。
その他、作成したアプリやゲームの一覧はこちらにあります 。

スポンサーリンク

概要

二人で遊べるオセロを作ってみました。実装した主な機能は以下の通りです。

  • 盤面のマスの数を3種類の中から選択できる。(4×4・6×6・8×8)
  • マスをクリック(タップ)すると石を置く。
  • 石を同じ色で挟むと自動で裏返る。
  • 黒と白の石の数を表示する。
  • 石を置く場所が無いときは自動で手番をスキップする。
  • お互いに石を置けなくなったらゲームを終了して結果を表示する。

ルールは黒が先手、白が後手となっています。終局時に、両者着手出来ない空きマスは勝者のものとして加算されます。

オセロの盤作成

オセロの盤面はテーブル要素で作成しました。
※以下からのコードは直接的に関係ない属性・変数名は省略しています。コード全体はgithubにあります。

盤面の管理はdata配列で管理しています。中身は2次元配列になっていて0は空いているマス、1は黒-1は白となっています。

クリックされた位置の取得にはtd要素にonclick属性を設定し、parentNodeのrowIndexプロパティで縦の位置、cellIndexプロパティで横の位置を取得しています。

クリックされたマスの周囲8方向を調べる

マスがクリックされたら石の周りに違う色の石があるかを調べます。(黒の手番でマスをクリックした時の例)

挟めるか調べる

石の周りに違う色があった場合はそのマスの先を調べます。(黒の手番でマスをクリックした時の例)

最後までお読みいただきありがとうございました。
コード全体はgithubにあります。
その他、作成したアプリやゲームの一覧はこちらにあります 。

タイトルとURLをコピーしました