ジレンマゲームをVue.jsで書き直した

Javascript

ジレンマゲーム with Vue.js

以前つくったジレンマゲームはピュアPHP+JSで書いていたのですが、書いていて思うことがあったのです。

それは、前回のジレンマゲームはJSで1秒に1回APIを叩いて現在の投票状況を取得していたのですが、それをするとデータ通信量がかかる上に同時接続数*60回のクエリが1分間に発行されるわけです。

また、1秒以下のデータ通信ができないので、他のプレイヤーの選択が反映されるのに最大1秒かかりますし、描画が非同期じゃなかったりとなんだかいろいろめんどくさかったのです。

Vue.jsで書き直そう

つまり、JS側でソケットを用意しておき、サーバに変更があったときだけJS側に受動的にデータが送られてくる仕組みがほしいのです。

こうすれば、わざわざ1秒毎にデータを取得しなくていいので楽ですし、なによりリアルタイムに情報を反映させられます。

ってなことをウラルさんが言ってました(投げやり

というわけで、Vue.js(というかそれ以前のNode.js)の勉強をしながらちまちまと作業を続けていました。

一応完成したもの

tkgproblem

旧バージョンはMySQLを使うという仕様上、どうしてもサーバが必要だったのですがこれをFirestoreというGoogle運営のNoSQLに丸投げすることでサーバレスで動作するようになりました。

つまり、書いているコードはJavascriptだけだということです。なので、GitHub-Pagesにソースコードを置いておくだけで動作します。

もちろん、Googleのクラウドサービスを利用しているのでクエリを叩ける回数には限度があります。調べてみたところ、どうも一日に読み込みが50000回ほどだそうです。

開発してる段階で4000回ほど叩いてしまったので、どのくらい遊べるのかは未知数なのですがまあ一日に二回か三回は遊べるのではないでしょうか。

少し変わった仕様

旧バージョンと以下の点で異なります。

  • 未投票のまま制限時間をすぎると強制退出(ただし再入室可)
  • 全員が協調を選択するとゲーム開始
  • ポイントの計算を大幅に変更
    • 考案者はしまけんさんっていう方なので、異議申し立てはそちらに!
  • ゲーム時間をテスト版のため30秒にした(あっという間に終わります
  • サーバ側でプレイヤーの選択を秘匿にできなかったので、パケットキャプチャとかすれば何を選択したかわかるかもしれない(まあするやつはおらんやろうけど

まだ実装してない部分

  • 勝者判定
    • めんどくさいのでつけてません
    • 現在は全員が未投票で退出するまでゲームが続きます
  • ポイント0による退出機能
    • めんどくさいので以下省略
  • ゲーム中の入室制限
    • めんどくさいので以下省略
  • ターンの長さとかの設定
    • めんどくさいので

まだまだ改善点はありますが、まあ一応自分の選択でポイントがガンガン増えたり減ったりはするようになっているはずです。

記事は以上。

コメント

タイトルとURLをコピーしました