Warning: Undefined array key "steps" in /home/bubudoufu/bubudoufu.com/public_html/wp-content/plugins/amp/src/ReaderThemeSupportFeatures.php on line 501
HTMLとCSSとJavaScriptを使って2人用オセロを作ってみる - プログラミングを学習中の私が、アウトプットするためのサイト
サイトアイコン プログラミングを学習中の私が、アウトプットするためのサイト

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

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

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

スポンサーリンク

概要

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

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

オセロの盤作成

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

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

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

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

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

挟めるか調べる

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

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

モバイルバージョンを終了