ブラウザでワンナイト人狼のSocket IO 更新しました


約2年ぶりに「ブラウザでワンナイト人狼」の更新をしました。
と、いってもゲームプログラム更新ではなく、通信モジュールの入れ替えです。

今回の入れ替えで、「ゲーム中の通信の安定」と「ゲーム対応ブラウザが増えた」と思います。

「ブラウザでワンナイト人狼」では、ネットワーク通信に HTTP 以外に WebSocket を使用していますが、2013年から更新をしていないのでかなり昔のバージョンの Node.js、Socket IO を使用していました。
Socket IO の API も 1.0系 と呼ばれる新しい物が出てきたり、また最近のブラウザでは「昔のバージョンの WebSocket」に対応していないものが増えてきたので、今回バージョンアップをしました。

ゲームプログラムそのものは変更していないので「ゲームの実行」に問題はでないと思ってますが、もし問題を見つけたら連絡して頂けると嬉しいです。

[2016.02.27 追記]

最近のブラウザはほぼ全て WebSocket に対応しているので、ブラウザでワンナイト人狼の「システム的な注意」を下記に換えました。

システム的な注意
・本システムはWebSocket対応ブラウザで動作します。なるべく新しいバージョンのブラウザを使ってください
・スマートフォンをお使いの場合、3G,LTE回線だと安定動作がしないことがございます。(特にマスターの人は)なるべくWifiで使用してください
・スマートフォンChromeブラウザで「コンテンツサイズ軽減機能(Chromeデータセーバー)」がONの場合、動かない場合があります。iOSのChromeでは「設定 > 帯域幅 > データサーバー 設定」でOFFにできます
・Android標準ブラウザですと上手く動かない場合があります。その場合はChromeラウザを使用してください
・お使いのネットワーク環境によっては動作しないことがございます。80ポート(HTTP)、443ポート(WebSocket)を使用しています。特に会社、学校、公共LANではWebSocket通信を許可していない場合があります
・ゲーム中、ブラウザを終了させたり、携帯の画面が消えたりロック状態になると、通信が切れてしまいゲームから追い出されてしまう場合があります。その場合はゲーム作成からやり直してください

特に Google Chrome で通信料を軽減する「Chromeデータサーバ」機能が ON の場合は WebSocket が使用できずエラーになります。Goole Chrome でゲームする場合は、OFF にしてください。
iPhone の Chrome の場合は「設定」画面を開いて「帯域幅」をクリックと下記画面になります。
データサーバが「オフ」になっていればOKです。下記画面のように ON の場合は OFF にしてください。

2016022411 2130

 

node.js 止まってたわ(´・ω・`)


何通メールをもらってで気がついたのですが、2013年7月6日(月)に「ブラウザでワンナイト人狼」が動かなかったようです。

2013年7月6日(月)夜に復旧しました。
ユーザーの皆さんにはご迷惑をおかけしました。

原因は WebSocket 通信に使用していた node.js サーバの停止です (´・ω・`)
この node.js は何をしているかというと、ゲーム中に「各プレイヤーのブラウザ」と「ゲームマスターのブラウザ」間の通信を中継してくれています。

node.jsは、まだあまり安定していないとかメモリーリークがあるとかは聞いていたので、定期的にプロセス監視(node.js、ちゃんとサーバ上に居るかな?)を入れてたんですが、プロセスは存在しているのにサービスが動かなくなっていました(ちゃんとサーバ上にいるのに働いていない状態)

そこで、今は定期的なサービス監視(node.js、ちゃんと働いているかな?)を行うようにしました。
ですので、今後同様の問題が発生した場合は、発見が早くなると思います ( ー`дー´)

これからも「爆裂健ホームページ」と「ブラウザでワンナイト人狼」をよろしくお願いします。

ブラウザで「ワンナイト人狼」、ついにバージョン1


ようやく完成しました。ブラウザで「ワンナイト人狼」ゲーム バージョン1。

ブラウザで「ワンナイト人狼」
http://oj.bakuretuken.com/

ワンナイト人狼ゲーム画面

この記事の前に、先にゲームマニュアルを投稿したので、そちらもあわせて是非見てください。

→ ブラウザ「ワンナイト人狼」遊び方

カードデザインは知人の朔夜さんに頼みました。私が適当に Microsoft Word の図形作画で作ったカードに比べると素晴らしいの一言ですw

HTMLページは私(BakuretuKen)が作りました。15年ぶりくらいにHTMLでちゃんとしたページを作ったような気がします。今回はスマートフォン、PCの両ブラウザで(ある程度)綺麗に見えるように UserAgent をチェックして個々にCSSを用意しました。

私がホームページを作るためにちゃんとHTMLを勉強したのは、前世紀(1998年くらい)なので、スマホ向けのページを作る上で、HTML5やCSS3を改めて勉強しました。
いやー本当に進化してますね、HTML。今回はjQueryMobileのCSSをベースに足りないCSSを追加するやり方でページを作りました。

その昔 JavaApplet のゲームとか作ってたので、applet タグがHTML5で廃止になっててちょっと悲しくなったり。。。
その昔、<b> タグを使ってたらデザイナな人に「<strong>を使え!」と言われてたのに、HTML5で<b>タグが復活(?)していたり。。。
その昔、画像と<table>タグを駆使して丸みの帯びたデザインを作っていたのに、今はCSSだけで角丸の表現ができたり。。。

いろいろ進化を感じました。昔は JavaScript などはマウスオーバー時の演出くらいしか使えなかったような思い出があるのですが、この ブラウザでワンナイト人狼 ではゲーム部分はすべて JavaScript で出来ています。言語も進化するんですね。

HTML5&CSS3の本も数冊読んでみましたが、下記の本が私にはわかりやすかったです。
基礎から書いてあるのですでにある程度HTML5・CSS3を知っている人には簡単すぎるかもしれませんが・・・

すべての人に知っておいてほしい HTML5 & CSS3 の基本原則 [単行本]

すべての人に知っておいてほしい HTML5 & CSS3 の基本原則 [単行本]

あと、技術的にも WebSocket を使ってサーバからのPUSH通知を行なっています。これも大昔は無かった技ですね。具体的にはゲームマスターの操作を WebSocket を使ってプレイヤーに通知しています。
そのため WebSocket に対応した比較的あたらいいブラウザでないとゲームが動きません。まぁ、スマートフォンのブラウザなら大丈夫だと思いますが。あと、3GやLTE回線だと通信遅延(?)などでうまくPUSH通知が動作しない場合があるみたいです。なるべく Wifi回線で遊んでいただけると幸いです。

いちおうこれでバージョン1としては完成です。今後も細かい改良は重ねていきますが、大きくデザインやゲームシステムを変えることはないと思います。
WebSocket がなかなか面白かったので、またWebSocketをつかってブラウザゲームかツールでも作れたらいいなぁ ( ・`ω・´)

 

ブラウザで手軽に「ワンナイト人狼」が遊べるページを公開しました!


ワンナイト人狼

手軽にブラウザでワンナイト人狼ゲームが遊べる「ブラウザ ワンナイト人狼 システム」公開しました。
まだβ版ですが。。。今後進化していきます。
2012.06.11 に バージョン1 としました。

ブラウザで「ワンナイト人狼」

ワンナイト人狼とは、1ゲームに時間がかかる人狼ゲームを手軽に遊べるようにしたオオカミさん氏制作のカードゲームです

先日友人宅で「ワンナイト人狼」を遊んで見たのですが、なかなか面白かったのです。
でも、私は負けまくりましたが(涙)

ゲーム自体はすごく面白かったのですが、役職作業時にどうしても気配や音で誰が動いてるのかなんとなくバレてしまいました。
音楽などをかけてたのですが、目をつぶっているとはいえ、なんとなく察してしまうんですよ。

ちょうど、WEBブラウザに対してPUSH通知ができる技術「WebSocket」を勉強していたので、この「WebSocket」という技術を使ってワンナイト人狼をブラウザで遊べるようにしました。
スマートフォンを持ち寄れば、みんなでワンナイト人狼が遊べます(WiFi接続推奨)

「WebSocket」という技術は比較的新しいので、新しいブラウザでないと対応していないかもしれません。
最初にゲームマスターがゲームを作り、そのゲームにユーザーがログインしてもらうのですが、マスターの画面にユーザー名がしばらくしても出て来なかったら非対応ブラウザです。
ゲームマスターがWebSocket非対応ブラウザの場合も、マスターの画面にユーザー名が出て来ません。

いちおう動くんじゃないかと思っているブラウザは、

  • そこそこ最近のバージョンの Chrome
  • そこそこ最近のバージョンの FireFox
  • iPhone Safari
  • iPhone Chrome
  • Android Chrome

あたりです。

あと、私は絵心が無いのでカードデザインはとんでもないことになっています。
今後、知人の絵師にでもカードデザインを頼むので、おまちください。
2012.05.20 朔夜さん にカードデザインを描いてもらいました。

私と私の友人は全員iPhoneなので、基本的にわたし的には困らないゲームシステムになってます。Andorid端末のテストが充分でないので、もし動作に問題が発生しても許してください。

オオカミさん素晴らしいゲームをありがとうございます。