この記事なんなの？
まず最初に、これからの投稿の目的を書いておきます。
発信用というよりも、自分のアウトプット用です。
そして、あわよくば他の人に投稿を見てもらって、ダメなところをボコボコに叩かれたいという願望があります。(お願いします！！
基本的に自分のリバーシ作りの中で考えていることや、詰まったところを書いていくことになると思います。
どうぞよろしくお願いいたします。
自力とは？
タイトルにある「自力で」という文言ですが、これが意味するのは
「リバーシの作り方を検索せずに、0から自分だけで進め方や、実装方法を考えていく」
ということです。
つまり検索するのは「javascript クラスから 要素取得」みたいな具体的なことだけで、「javascript リバーシ 作り方」といったことは検索しません。
ボードゲーム盤の作り方みたいな大きい塊の検索は基本無しでトライするつもりです。
僕のレベル感
コーディングのお仕事ではだいたいjQueryを使用していて、最近は意識的にJavascriptで書くようにしているのですが、よく使う処理をなんども使っていてあまり熟達していない感じです。
なので、今回が過去最高のJavascript使用作品となりますね。
ただ、今回のリバーシ作成の目的はJavascriptの学習というよりも、処理を自分で考えるという気持ち良さ欲しさのためです笑
頭を使いたい！ただそれだけで始めました笑
リバーシ作りの始まり
リバーシ作りに必要な処理
まず、リバーシになるために必要な処理を「〜できる」という形式で列挙していきます。
- 8*8のマスを描画できる
- クリックで石を置くことができる
- 間なく別の色の石にはさまれたら色変更できる（タテ・ヨコ・ナナメ）
- 何もはさめない場所に石を置くのをブロックできる
- 全てのマスが埋まるか、どちらも石を置けなくなったら終了にできる
- 1つ石を置いたら相手のターンに変更できる
- 石を置く場所がなければスキップできる
とりあえず思いつくのはこれくらいですかね。
まずはこれらを実装していこうと思います。
実装順序
先ほど挙げた処理をどれからやっていくか決めます。
- 8*8のマスを描画
- クリックで石を置ける
- タテ・ヨコではさまれたら色変更
- ナナメではさまれたら色変更
- 一つ石を置いたら相手のターンに変更できる
- 何もはさめない場所に石を置けなくする
- 石を置く場所がなければスキップ
- 全てのマスが埋まるか、どちらも石を置けなくなったら終了にできる
- CPU作成
こんな感じで順番にやっていこうと思います。
実際の実装は次の記事で書き始めようと思います。
自力でリバーシ(オセロ)を作っていく#01