bigsleepの日記

 | 

2015-05-09

リバーシのオンラインゲームを作った (2)

14:18

なんとなく次はクライアント側のことを書きます。

クライアント側はhtmljavascriptで書きました。

これはherokuとかに置いてブラウザから遊べるようにという感じで選んだんですが、

javascript全然知らないし今思えばaltjsの何かを使えばよかったのかもしれません。

javascript全然知らないので JavaScript: The Good Parts という本を読んで少し勉強したりしました。


基本的にJSONAPIを使っているためhtml, javascript側でテンプレートエンジンのようなことをする

ライブラリが欲しくなってvue.jsを使ってみました。

vue.jsは簡単に使えて便利っぽかったんですが、

色々他にも似たようなライブラリが出てたり全然流れがわかってないです。


cssなども全くわからないのでよく使われてるBootstrapを使いました。

cssで見た目調整したりが、どこをいじったらどうなるのか全然分からなくて

少しいじってはリロードしたりブラウザキャッシュが残ってて反映されてなかったりで

辛い感じがしました。

もっとなんか画面の見た目設計のいいやり方があるのかもしれません。



画面

マッチング用の部屋一覧を表示する画面 (index.html) と

参加後の部屋を表示する画面 (room.html) だけ作りました。


ソースはこのあたりです

https://github.com/bigsleep/reversi-online/blob/master/static/login.html

https://github.com/bigsleep/reversi-online/blob/master/static/room.html


どちらもだいたいJSONAPIを定期的に呼んで

vue.jsのデータバインディングで見た目を更新しているような感じです。


vue.jsというのはこのライブラリです。

http://vuejs.org


あとログイン画面 (login.html) もありました。

ログインといいつつセッションにIDとユーザー名前を保存してるだけで、

ユーザー登録してDBに保存したり、認証するところは作ってません。



1ページで全部やるようにしてもよかったのかなという気もします。

共通の部分を使いまわすのどうやればいいかよくわからなくてコピペで済ませたりしてます。

使ったことないですがjekyllとかhaskyllなどを使えばよかったかもしれません。

node.jsが必要な開発ツールとかを導入するのが面倒で使ってないんですが、そのあたりも使ったほうがいいのかもしれません。



websocketクライアント

下のページあたりがリファレンスでしょうか

https://developer.mozilla.org/enh-US/docs/Web/API/WebSocket


websocketも使うだけなら大体簡単でした。

接続方法とsendとonmessageとかonerrorとかメソッドをいくつか必要なものを覚えれば使える感じでした。


ただ結構頻繁に接続が切れるようで、接続が切れたら繋ぎ直す感じの処理を入れてます。

この部分で少しクラスっぽい書き方がしたくて、書き方がよくわからなくて色々調べたりしました。

結局よくわからないけどオブジェクト生成用の関数を書くだけでやりたいことはできそうだったので、

createなんとかという関数を書いてます。

トラックバック - http://d.hatena.ne.jp/bigsleep/20150509/1431148717
 |