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

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

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

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

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

HTMLページは私（BakuretuKen）が作りました。１５年ぶりくらいに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 の基本原則 [単行本]

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

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