新入社員、オセロを本格的に作り始める

こんにちは。シンメトリック新入社員の田中です。 今回は久しぶりにオセロの進捗状況について書かせていただきます。5月は展示会などがあったため、ほぼ1か月ぶりのオセロブログになります。

新入社員、一通り触る

前回のブログまでは軽くJavaScriptとJavaの勉強を本ベースでしていました。その後は、開発期間である5/16までに、オセロで使う部分は一通り触ってみようと考えていたので、勝率ランキングなどを実装するときに使うDBについても少し触ってみました。データの格納や抜き出す処理をしましたが、今回は軽く触ってみただけなので、まだよく分かっていません。

次に通信機能についての勉強をしました。課題のオセロは通信対戦をするため、双方向の通信が出来るWebSocketを使うことにしました。WebSocketを使ったチャットがよく紹介されていたので、まずはそれを使って、通信部分の仕組みを理解しようとしました。

1つの分野でそれぞれ期限を設けていたので、多くの時間を使うことは出来ませんでした。これらを6月末までに使えるようにならなければいけない、と考えると気が重くなりました。

新入社員、設計する

一通り触った後は、設計の部分に入っていきました。サーバサイドをJava、ブラウザサイドをJavaScriptで書くと決めましたが、具体的にどういう処理を、どちらで行うかを考えました。

結果、基本的にほとんどの機能をサーバサイドのJavaに持たせ、JavaScriptではJavaから送られてきた処理結果をブラウザに表示させるだけにしようと考えました。理由は、Javaをある程度使えるようになりたかったからです。

新入社員、分からないことが激増する

設計が終わった後、ちょうどゴールデンウィークやITWEEKなどが重なりオセロ制作から少し離れていました。そのため、開発期間が始まった5/16に、久しぶりにオセロ制作に取り掛かったため、今までの進行状況を思い出す事が少し大変でした。

まず、始めたのは2つのブラウザで置かれた駒を表示する事でした。WebSocketでチャットを作った時のコードを参考にして、双方向の通信をしたかったのです。

しかし、ここで問題が発生しました。それはWebSocketで送ることが出来るのがテキストデータのみだったのです。Javaからオセロの配列のデータ64個を、盤面が変わるたびにJavaScriptの方に送りたかったので、どのようにしてこれらのデータを送ればいいのか分からず、詰まりました。

色々調べたり、アドバイスを頂いたりした所、データをJSON形式すればやり取りが出来ることが分かりました。 この時期はWebSocketやJSONなどの意味や使い方をたくさん調べましたが、調べれば調べるほど分からないことが増えるという状態で、心が折れそうでした。

新入社員、なんとか通信が出来る

なんとかJSONについて使えるようになったので、このJSONを使って通信をしていきました。

{
"coord": [
{ "x": 0, "y": 0, "color": "empty" },
{ "x": 0, "y": 1, "color": "empty"},
{"x": 0, "y": 2, "color": "black" },
{ "x": 0, "y": 3, "color": "white"},
{ "x": 0, "y": 4,"color": "empty"},・・・・・
]}

このような感じです。

受け渡しの具体的な方法としては、座標情報や、その座標に駒が入っているか、クリックしたプレーヤーはだれなのか、などのデータをJSON形式のテキストデータにして送信します。受け取った方ではJSON形式のテキストデータをオブジェクトに変換、中身のデータを取り出すというやり方です。 これによってWebSocketでデータの受け渡しが可能になりました。

また、このころからデバックのやり方にも慣れてきたので、どこの部分が間違っているのかを自分ですぐに見つけることが出来るようになりました。 これでクリックして表示されたl駒が2つのブラウザどちらにも表示できるようになりました。

新入社員、オセロっぽいものが出来上がる

通信部分が出来るようになってきたので、今度はオセロのロジックの部分を考えました。

今回は①駒を挟めばひっくり返る処理、②ブラウザごとにプレーヤーを判断し、一色しか置けないようにする処理、③黒のプレーヤーのターンには白のプレーヤーのブラウザではオセロ盤に駒を置けないようにする処理を実装しました。

まず駒を挟むとひっくり返る処置ですが、これを考えるのに少し時間がかかりました。for分とif文を使えば書けそうでしたが、中々上手くいきませんでした。
特に隣接する１コマだけをひっくり返す処理であればすぐに思いついたので書けましたが、挟み込む駒が2つ以上の時だと、どのように処理を書いていけばいいのかが思いつきませんでした。

色々試行錯誤したり、2年目の先輩と相談したりしながら、時間はかかりましたが、なんとかそれらしいプログラムが出来上がりました。

次にターン制の実装です。ターンが1の時は黒の駒が置ける。置いた後ターンが2になる。ターンが2の時は白の駒が置ける。置いた後、ターンが1になる。という処理で書きました。

新入社員、来週にはオセロのゲーム部分を完成させようと画策する

今は8方向すべてのパターンをプレーヤーが黒の場合、白の場合でそれぞれ書いているのでコードが長く、ひっくり返る処理だけで200行もあります。もっとコードを少なく書けそうなので、一通りの実装が終わった後にすっきりとしたものに書き換えようと思っています。

次にブラウザごとにプレーヤーを判断する処理ですが、これは今のところセッションで判断しています。オセロにアクセスした時にセッションが１であれば黒、２であれば白という分岐を書きました。ただ、この場合だと、ブラウザ上で更新をするとどちらも同じ色になってしまうバグが発生してしまうので今後の課題になっています。

ターンの処理では、置ける場所がなければ自動的に相手のターンになる処理、2人とも置ける場所がなければ試合が終了する処理などもありますが、これは来週の課題になります。 またひっくり返る処理の部分でもまだまだバグがありそうなのでしっかり修正していきたいと思います。
今回は通信の部分で少し時間がかかってしまったので、作業の遅れを取り戻せるようにしたいと思います。