React.jsでゲーム作った

http://yavalath-baobab.netlify.com/

screenshot-2016-11-09-0-26-50

作ったのはyavalathというゲーム。
交互に石を置いてゆき、先に4目以上並べたほうが勝ち。ただし3目ちょうどを作ってしまったら負けというゲーム。(3目と4目以上が同時にできても勝ち)
これのルールはN目で勝ち・M目で負けというルールをベースに機械が自動で生成したらしい。名前もマルコフ連鎖?で作ったとの事。

リポジトリはこれ https://github.com/airtoxin/yavalath-baobab

前々からReact使ったゲーム開発はやりたかったんだけど、着手してからその周辺ツールとか作ったりしてて長くなってしまった。

・プロジェクト始めるに当たりbabelとかwebpackとか全部入りのがほしい→プロジェクトボイラープレート作る
・どうせだったらボイラープレート生成したい→clow、clow-template-*作る
・六角形を描画する何かが必要→react-hex作る
・そういえばreactのライブラリ作るときのボイラープレートもほしい→clow-template-react-module作る
・やっと開発に取り掛かる

いつもこんな感じでヤクの毛刈り(ちょっと違う?)しがちで、いつの間にかやりたかったことを忘れたりする。まあ楽しいから良いんだけれど。

技術としてはReactとfluxとしてbaobab-reactを使っている。
baobab-reactは良いなと思い1回qiitaに書いたけど全然流行らなかった。会社でも使ってたりする。(けどやっぱり流行ってない)
因みにreduxはこれまで4回くらい試したけどやっぱり合わなかった。
baobab-reactはviewとactionが実質密結合してるのでそこだけ注意して書ければまあそれなりに使えるんじゃないだろうか。

viewは試しにatomic-designっぽくディレクトリを切ってみたがほぼディレクトリを切っただけみたいになってしまった。
ちゃんとやるならスタイルガイドとかショーケースみたいなのも作るべきかもしれないが、別に自分しか触らないだろうしそこまでするか?みたいな気力の問題も合った。
ただショーケースに対する問題意識はあったのでライブラリ作ったりはしていた(使ってはない)。
ソースとしてはsrc/view以下にatomic designのコンポーネントが有って、pagesとorganismはreduxみたいにcontainerを分離して配置するようにしてみた。
organismsのflux依存を許したのはまあコンポーネント粒度の問題が大きくて、本当はconnectするのはpagesだけが理想なはずなんだけどまあそんなにうまくいくわけも無く。
atomsとmoleculesは定義のまま分離不能なコンポーネントとそれを組み合わせたものなのだけれども、組み合わせた物の中には実質1つのviewで機能のカプセル化を担うためだけの物が出てきて、それをpagesにするのはちょっと無理が有るのでそれに対してorganismsを充ててconnectを許したという感じになっている。
ただこの辺はまだ手探り感が強いので後々よい形になればいいかなという感じ。

あとview周りだとErrorViewというのを作って、エラーが出た時にこれが出てくるようにしたりした。
家だとただのMacBook Pro 1台で、サブディスプレイとかも繋がないで開発しているので開発者ツールを開いてると結構画面を専有されるのが辛くて作ったりした。あと開発者ツール開いてると実行パフォーマンスも落ちている気がする。
これで開発者ツール開かなくて良くなってハッピーかというと全然そんな事無くて、コンソールデバッグとかしてるとやっぱり必要なので結局開発者ツール開いてて意味ない感じになっている。
console.on(‘log’, callback)とか使えるといちいち開発者ツール開かなくても画面の隅にオーバーレイして出すみたいなのができるのでそのようになって欲しい。

技術としてはflowtypeを試したり、yarn使ったりしたりしてみたけどそれ以外は余り面白い感じでは無い気がする。
一応nightmareを使ったe2eのテストも動くようにだけはしたが1ミリも書いていないし、既にCIだと上手く回らないっぽいことが判明している。

サイトのホスティングはNetlifyというのを使っている。
最近のjsに有りがちなビルドが必要なタイプのプロジェクトにも対応していて、githubに繋いでビルドコマンド指定してビルド後の成果物のディレクトリを配信するみたいなことが出来て便利。
あとデフォルトでyarn.lock置いてるとyarnでのインストールが行われるっぽくて対応の速さに驚いた。

あとは、開発の動機の1つとして今会社で強化学習の勉強していて、それの練習になるかなというのもあった。
ただ結果はやれば分かるけど惨敗という感じ。
そもそも強化学習以前にボードゲームでの評価関数の作り方とか、探索領域の足切りとかその辺の色々な知識が足りない感じだった。
とりあえずでモンテカルロ木探索みたいなのしたかったけど、ゲームの終了までシミュレーションするのに1〜5秒くらい掛かっていて、こんなものモンテカルロ法として成り立つくらいのシミュレーションもそもそも回せませんわwとなって終了した。

そんな感じでrobotが実質使えなかったのでじゃあと思いネット対戦機能をつけようと思っている感じだが、そろそろやる気が消え始めてるのでもしかしたら別のゲーム作り始めるかもしれない。

そんな感じです。

広告


コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中