百合フリーゲームとボカロ曲のL-Drive - 百合フリーゲームやボカロ ロック (VOCAROCK)を作っています。

Blog ブログ

ブログ

  • ブログTOP
  • 『リブラの見た夢ONLINEというブラウザゲームを公開しました』

リブラの見た夢ONLINEというブラウザゲームを公開しました

投稿日時:[2017/02/24 00:00]

コメント:[8]

今回のゲームは、ブラウザで遊べる育成ゲームです。
『リブラの見た夢』に登場するキャラクターを育てて、他のプレイヤーと戦ったりできます。

リンク→『リブラの見た夢ONLINE

ゲームとして遊べるWebサイト

本作はゲームとしてどうこうよりも、ブラウザゲームとしての作りに注目してもらいたいと思っています。

一般のブラウザゲームはFlash製のゲームをWebサイトに埋め込んだものになりますが、本作はFlashやCanvasは使っておらず、普通のWebサイト同様、HTML、CSS、JS、PHPだけで作られています。

つまり、
一般のブラウザゲーム:「Webサイト上で遊べるゲーム」
リブラの見た夢ONLINE:「ゲームのようなWebサイト」
です。

そして、Webサイトならではですが、レスポンシブ対応もしているので、ブラウザのウィンドウ幅を広げたり縮めたりしてみてください。

趣味仕事問わず、Webサイト制作にほんの少しでも関わったことのある人に遊んでみてもらいたいです。

「Webでこんなことできるんだ」とか思っていただければ成功だと思っています。

源流

昔、『FF Adventure』ってCGIゲーム流行ったじゃないですか。
Webサイト上でボタンぽちぽち押していくとキャラクターが育つやつ。
キャラのステータスなど、ひたすら数字が増えていく味気ない感じが楽しいやつです。

僕はあれを当時、PCブラウザやプレイステーションポータブルのブラウザから遊んでいました。
インストールも不要でWebが見れるデバイスならなんでも遊べる、ってのが気に入っていました。

で、2年ほど前「ああいうゲームをHTMLとPHPで作れないかなー」と思ったんです。

FlashやCanvasは一切使わず、通常のWebページで使われている技術のみを使ってやりたいな、と。

もちろん、当時よりWebの技術は進んでますから、単に再現するだけではなく。
例えば、CSSとJSでよりグラフィカルにしたり、ボタンを押すたびに発生するバックエンドとの通信も非同期にし、ページ遷移しないように。。など。

で、そういう経緯から、「面白いゲームを作ろう!」というよりも、技術立証的な意味合いで作り始め、ある程度システムが実現できた段階で放置してしまっていました。

それを最近になってやっと再開し、公開できるまでに至りました。

リブラの見た夢

本作は原作をプレイしてくれた人にちょっとしたオマケというか、ゲーム内で原作に関するクイズに答えることで、限定キャラクターをゲットすることができます。

それではよろしくお願いします。

2017-02-25 追記

告知の直後にQiitaにもこんな記事を書いたのですが、
PHP+HTML+JSでレスポンシブ対応のロールプレイングゲーム作ってみた

これが予想外に伸びがよく、Qiitaのいいね数が100、はてブのいいねは218ついて総合ホットエントリー入りを果たしました!

個人的には絵しりとり500RT以来の快挙です。
そのおかげもあり、ゲームの会員登録数も現時点で100人を超えまして、みなさん本当にありがとうございますm(_ _)m。

    コメント(8)

  • [1](2017/02/24 17:45)

    いつも面白いゲームをありがとうございます。
    プレイしていて幾つかのバグらしきモノを発見したのでご報告させていただきます。

     ・レベルアップ時にたまに全てのボタンがフリーズして反応しなくなる。(一人だけの時はLv48まで上げても一回もフリーズしなかったので、メンバーが複数いると起こる?)
     ・最初の、新規登録画面で”キャンセル”ボタンが押せない。
     ・ユーザー検索画面で”閉じる”ボタンが押せない。(右上のバツボタンでは閉じれる)
     ・闘技場で戦闘中にフリーズした。(こちらもメンバーが複数いる時に起こりました)

    ID uc1942
    ブラウザ safari10
    です。
    よろしくお願いします。

  • [2](2017/02/24 20:50)

    >>1 さん
    プレイ・バグ報告ありがとうございます!

    >>ボタンが押せない
    こちらは表示上押せる位置にないということでしょうか?
    safariの検証環境がなく再現できず、すみません。。

    フリーズについて、ご迷惑おかけし申し訳ありません。
    フリーズはプログラムのエラー、またはサーバーの混雑により通信にした場合に発生してしまいます。
    原因が分かり次第修正させていただきます。

    もしレベルアップ時に(フリーズなどにより)ステータスポイントを付与できなかった場合、そのポイントは次のレベルアップ時に持ち越されます。

    よろしくお願い致します。

  • [3](2017/02/24 23:45)

    返信ありがとうございます。1です。

    >>こちらは表示上押せる位置にないということでしょうか?
    いいえ、UIは正常に表示されていますが、クリックしても反応がなくボタンとして機能していないと言う事です。
     もしやと思って試しに他のブラウザ(Vivaldi,Chromeなど)で開いてみたらキャンセルボタン等、普通に動作しました。レベルアップ時にボタンが反応しなくなる現象も今のところ起こっていません。
     Safariでプレイした時のみ起こる不具合のようです。

     フリーズと紛らわしい表現をしてしまいましたが、これもボタンが反応しなくなるだけの多分同じ現象で、サーバーエラーとかのそこまで大それたモノではないと思います。すみません。

     原因が修正されればうれしいですが、そこまで大事でもないので放置していても個人的には全然困りません。
     もしSafariでどうしてもプレイできないようでしたら他のブラウザを使ってプレイするだけなので…。
     報告しておいてなんだそりゃな返信で申し訳ないんですが、一応Safariでこんな不具合が出るという事だけご報告させていただきました。ありがとうございました。

  • [4] Laineus(2017/02/25 00:11)


    承知しました。
    詳しくご説明いただきありがとうございました!

  • [5](2017/02/26 19:14)

    バグと言って良いか分かりませんが以下の事象を確認したので報告します.
    (Windows 10 + Chrome で確認)

    1. タブを2つ開き, それぞれでログインします (タブ1, タブ2とします)
    2. タブ1 で「森」に入ります
    3. タブ2 で「洞窟」に入ります
    4. タブ1, タブ2 共にモンスターが出てくるまで進みます (タブ1, タブ2 の順でモンスターに遭遇します)
    5. タブ1 のエンカウントで「戦う」を選択
    6. タブ2 のエンカウントで「戦う」を選択
    7. タブ2 の表示がおかしくなるが, 気にせず両方のタブで戦闘を進めます
    8. 遭遇した敵のパターンによって挙動が違ってきますが, 一方のタブでエラープロンプトが表示されたり, 敵を殲滅したのにリザルト画面が出てこないなど, ゲーム続行不能な状態となります.

    また, 上記の場合「森」の中で洞窟の中に出てくるはずのモンスターやアイテムが出てくるなどの事象が見られます.

    解決方法:
    同じアカウントで複数のセッションが進行している場合, 後のセッションを正として, 前のセッションで何かしようとした場合にエラーになるようにします.
    (今回の場合, タブ2 でログインした時点で, 以後のタブ1 での操作はすべて無効となる)
    おそらくカレントのセッション ID を DB で管理するようにすれば実現できそうな気がします.

  • [6] Laineus(2017/02/26 20:05)


    >>5 さん
    プレイいただき、ありがとうございます。

    古い状態の画面を意図的に残してアクションを起こすと、ゲームの状態と実際の画面表示にズレが発生することは認知していますが、当然のことな気がしますので対応の必要性は感じておりません。

    また、Chromeはタブ間で共通のセッションとなりますので、上記の例だとセッションは複数あるようで実際には一つとなります。

    なので、上記の例だとタブ1は画面表示は森のままに、途中から洞窟へ移動し、別の敵に遭遇している状態となり、倒せた場合は洞窟の敵のアイテムが手に入ります。

    これは、画面表示とゲームの状態にズレが生じるだけでデータ的には大きな不正にはつながらない認識です。

    記載頂いた解決方法ですが、上記の例だとセッションIDは同じなので、有効ではないと思われます。

    恐らく別のマシンを使ったりすれば別セッションとなり不具合にならずゲームを同時進行できるはずです。
    が、現状こちらも特に制限することは考えておりません。

    ご報告ありがとうございました。

  • [7](2017/02/26 20:26)

    >>5です。
    ご回答ありがとうございます!
    おっしゃる通り, 1つのブラウザで複数タブを開いた場合は確かに単一セッションになりますね…….
    もしも丁寧に対処するとしたら, API を叩くたびに都度ワンタイムトークンを発行して DB とブラウザにそれぞれ持たせて, 想定されたワンタイムトークンを持つ HTTP リクエストからのアクション以外は無効にさせる, などが考えられますが
    (実際に掲示板などで CSRF 対策として実施されている方法)
    内部データに不整合が起きない (あるいは不正な操作をされない) のであれば仕様と割り切っても良さそうです.

    どうもありがとうございました.

  • [8](2017/02/26 21:22)

    >>7 さん
    そうですね。
    ご報告ありがとうございました!

ツイートする

Game

Dirty Darkness

NEW

Game

The Dragon Throne

Web

オンライン 絵しりとり

Game

マイムの見た夢

Vocaloid

マッドパンプキン

おすすめ

Vocaloid

ドクターリブラ

Game

リブラの見た夢

おすすめ