ブラウザで「ワンナイト人狼」、ついにバージョン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をつかってブラウザゲームかツールでも作れたらいいなぁ ( ・`ω・´)

 

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


ブラウザで「ワンナイト人狼」ゲームのページデザインが完成したので、遊び方を説明します。

PCブラウザ、スマーフォンブラウザでゲームを遊ぶとこができます(プレイ人数 3~8名)

※オリジナルルールでは3~6名ですので、7名、8名プレイは「オリジナルルール」になります
(2013.07.15 追記) プレイヤー上限人数を6名から8名に変更しました

ワンナイト人狼 遊ぶ場合は下記リンクをクリックして、ゲームページに移動してください。

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

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

【 遊び方 】

ゲーム作成

jinrou2801

最初にゲームマスターになる人が、ゲームを作成してください。
ゲームマスターは「話し合いの時間」を設定することができます。

ゲームコード画面

「ゲームコード」が表示されるので、周りの友達に教えてください。

jinrou2928

(2013.06.20 追記)
「ゲーム参加URL」と「ゲーム参加QRコード」を表示するようにしました。
これらをプレイヤーに伝えて、ゲーム参加が可能です。

プレイヤーがゲームコードを使ってゲームに参加すると、ゲームマスターの画面に名前が表示されます。

プレイ人数が集まった時点でゲームマスターが「ゲームスタート」を押してください。

プレイ人数は3~8名です。


「夜」から始まります。

jinrou1434

役職の行動を行なってください。

画面では自分は怪盗でしたので、「ぷれいや4」のカードをクリックしてカード交換を行います。

夜の行動

村人:特にやることはありません
占い師:カードをクリックすることで「誰か一人の他のプレイヤのカード」もしくは「残りの2枚の両方」を見ることができます
怪盗:カードをクリックすることで「誰か一人の他のプレイヤのカード」と「自分のカード」を入れ替えることができます(入れ替えなくても良い)
人狼:他の人狼プレイヤーを確認してください

(2013.07.15 追記) 8名でのゲームでは 狂人 が追加されています(オリジナルルールです)

狂人:夜が明けるのを待ってください
・もし「人狼プレイヤー」がいる場合、人狼の勝利をサポートする役職です(しかし、誰が人狼なのかはわかりません)。自分が処刑されても、人狼勝利で勝ちとなります
・もし「人狼プレイヤー」がいない場合、人間チームになります(*1)(村人と同様)

※怪盗のカード交換は、人狼の行動、占い師の行動の後で行われるので、占いは交換前のカードをチェックしています。また、カードを交換された人は交換されたことを知りません。

jinrou1451

「ぷれいや4」は「人狼」でした。よって、自分が人狼になってしまいました。(ぷれいや4はカードが交換されたことを知りません)

ゲームマスターは全員が夜の行動を終わったのを確認して、「朝をむかえる」ボタンを押してください。プレイヤー全員の画面が「朝」になります。

jinrou1501

朝になりました。誰が人狼なのか話し合います。人狼は人間の振りをして、人狼であることをバレないようにします。

画面に「話し合いの残り時間」を参考値として表示しています(ゲームマスターがゲーム作成時に設定した時間です)

人狼である自分は人狼であることを隠し、自分が人間側であることを他のプレイヤーへPRします。

jinrou1502

話し合い終了後、処刑したい人のカードをクリックして「処刑者を投票」を押します。

jinrou1630

ゲームマスターの画面では、「投票済みの人」の名前が緑色になります。

全員が投票を終わったら、ゲームマスターが「結果表示」ボタンをクリックします。このボタンはゲームマスターにしか表示されていません。

jinrou1651

参加者全員のカードがオープンされ、処刑者が決まりました。
処刑者が人間側だったので、人狼チームの勝利です。

参加者の名前の下には、処刑を投票した人の名前が表示されます。

人狼が処刑されていれば人間チームの勝ち。人間が処刑されれば人狼チームの勝ちです。
2:2の同数の場合は両方が処刑されます。一人でも人狼が処刑されれば人間チームの勝ちです。
投票が1票ずつバラバラの場合は誰も処刑されません。その時は一人でも人狼が残っていれば人狼チームの勝ちです。

もう一度ゲームをする場合は、ゲームマスターが「ゲームスタート」をクリックしてください。

ルール詳細はオオカミさん氏作成の 【ワンナイト人狼】ルールブック をご確認ください。

【注意】
役職「狂人」「てるてる」及び7~8名プレイは本サイトのオリジナルルールとなります。

オオカミさん氏作成の「オリジナルゲームルール」とは、関係ありませんのでご注意ください。

(*1)「狂人」として村に生まれたけど、「人狼」がいないので「狂人化」しなかった。というストーリーです。

ワンナイト人狼ゲームのカードデザイン反映しました


ブラウザで「ワンナイト人狼」が遊べるページを公開していますが、ついに素晴らしいカードデザインが朔夜さんから届きました。さっそくゲームに組み込みました!ひゃっほー!朔夜さん、ありがとうございます。

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

ブラウザ ワンナイト人狼 カードデザイン

いままで私が Microsoft Word で作ったカードデザインを使ってました。こんなのw

それがなんと、こうなりました。

ブラウザ ワンナイト人狼 ゲーム画面

いやーデザインの力は偉大ですね。やはり Word の図形作画で、「カードゲーム」の「カードデザイン」をするのは無理があったようです。

ゲームプログラムはもう完成しているので、次はゲームページデザインを更新予定です。
今のページは私がでっち上げでHTMLを組んでいるので、これも知人に頼んでちゃんとしたデザインに変更したい!普通に<center>タグとか使っちゃっているので、HTMLデザイナが見ると怒り狂うレベルだと思うのですw

そんなわけで、友だちとのパーティゲームに最適ですので、デザインが一新されたワンナイト人狼を是非遊んでみてください。(Skypeを使って友達とゲームをしても面白いと思います)

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

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

ワンナイト人狼ゲームのカードデザイン、キタコレ


いま公開中のスマホブラウザで動くパーティゲームゲーム ブラウザで「ワンナイト人狼」 のカードデザイン下書きが、頼んでた友達の朔夜さんから届いた。

ワンナイト人狼 カードデザイン

わーい! 素晴らしい!

カードデザインが完成して、システムに組み込むのが楽しみだわ。
それまでは、Word を駆使して私が作った「でっち上げのカードデザイン」で我慢せねば。。。

今現在は、こんな貧相なカードでゲームが動いてます (´・ω・`)

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

カードが完成したら、次はHTMLページデザインをやらねば。

先は長い。

お買い得 Kindle本 RSS 作りました!


「お買い得 Kindle本」が確認できるRSSページを作りました。

ついでにRSSを公開するスマートフォン向けページを作成しました!

お買い得 Kindle本 情報

上のリンク先のホームページURLをお使いの「RSSリーダー」に登録すれば、お買い得 Kindle本 の情報がRSSで届きます。

RSSや上のリンクページで紹介している価格はキャンペーン時の情報です。変更になっている場合があります。
どうも数日程度でキャンペーンが終わり、定価(?)に戻るようです。

最近私は電子書籍化を進めていて、部屋の本を頑張って減らしている最中です。
Amazonで電子書籍を購入することも多いので、もともとは自分で使うように作りました。

RSSを作ったあとに「せっかくならRSSの登録用ページもあったほうがいいなぁ」とのことで、ページも作ってみました。
私はRSSはスマートフォンでチェックすることが多いので、登録用ページはスマートフォンホーム向けページにしてみました。

「Pocket」追加するボタンをプラグインに無理やり追加してみた


下記の記事を読んで「Pocket」好きなので、自分のブログにも追加してみました。

「Pocket」(旧Read It Later)に追加するボタンをブログに付けよう
http://shumaiblog.com/blog-add-pocket-button-read-it-later/

と、思ったら私は WordPress プラグイン「WP Social Bookmarking Light」で、はてブなどのソーシャルボタンを表示してたんだった。

WP Social Bookmarking Light
http://wordpress.org/extend/plugins/wp-social-bookmarking-light/

すぐプラグインで対応されると思うけど、それまでの暫定手段としてプラグインを改造してみました。

対象ファイル
【WordPressHome】/wp-content/plugins/wp-social-bookmarking-light/modules/content.php

[php highlight=”8″]
function wp_social_bookmarking_light_output( $services, $link, $title )
{
// 略
if( $out == ” ){
return $out;
}

$out .= ‘<a href="https://getpocket.com/save" class="pocket-btn" data-lang="en" data-save-url="’ .get_permalink(). ‘" data-pocket-count="horizontal" data-pocket-align="left"></a><script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script>’;

return "<div class=’wp_social_bookmarking_light’>{$out}</div><br class=’wp_social_bookmarking_light_clear’ />";
}
[/php]

8行目のハイライト部分を追加。
HTML出力の時に無理やり「Pocketボタン」のHTMLを追加しています。

  • 修正は自己責任でお願いします。
  • 修正前に修正対象PHPファイルのバックアップとっておくことをおすすめします。

ブラウザで「ワンナイト人狼」をバージョンアップしました


[2013.06.01 追記]
ページデザインを変更したので、「遊び方の説明ページ」も新たに作成しました。
ブラウザ「ワンナイト人狼」遊び方 を見てください。

【以下内容が古いです】

先週、手軽にブラウザで「ワンナイト人狼」ページを公開しました。

早速、処刑者の投票もシステムでできるようにバージョンアップしました。

遊ぶ場合は下記リンクをクリックして、ゲームページに移動してください。

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

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

【使い方】

最初にゲームマスターになる人がゲームを作成してください。

ojdoc01_01

ゲームコードが表示されるので、周りの友達に教えてください。

続きを読む

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


ワンナイト人狼

手軽にブラウザでワンナイト人狼ゲームが遊べる「ブラウザ ワンナイト人狼 システム」公開しました。
まだβ版ですが。。。今後進化していきます。
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端末のテストが充分でないので、もし動作に問題が発生しても許してください。

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

WordPressテーマ「Twenty Eleven」でフォトフレーム


現在このWordPressで使っているテーマ「Twenty Eleven」では、ヘッダ画像をランダムで表示する機能があるので、これを利用して私の思い出の写真を公開しようと思います。

さしあたり3枚ほど登録しました。
「去年遊びに行ったハワイの風景」と、「去年出張で長期滞在していたインドネシア」の風景2枚です。

WordPressのヘッダを利用したフォトアルバムはいいアイディアかもしれない。。。

今後もヘッダの写真を増やしていきます!

[2013.05.02 追記] ヘッダ画像を非表示にしましたので、この記事の内容は今行なってません。

 

昔々のJAVA Applet


大昔の前世紀にこんなページをたちあげてJAVA Applet のゲームなどを作って紹介してました。

爆裂健ホームページII(JAVA系)
brk2bnr
http://hp.vector.co.jp/authors/VA006860/

まさか、JAVA Appletがここまで廃れるとは当時思ってもいませんでしたが。。。

この当時はブラウザでゲームを動作させるには、ほぼJAVA Applet一択だったんですよね(そのあとFlashゲームが流行りました)

なかなか時代を感じさせる話です。