PHP+HTML+JSでレスポンシブ対応のロールプレイングゲーム作ってみた

More than 1 year has passed since last update.

セーブデータ管理をMySQL、メインの処理をPHP、フロントの表示周りをHTML+CSS+JS(jQuery)、フロントとバックの通信をajax通信でやっています。

普通の動的Webサイトで使われている技術のみを使っています。

『リブラの見た夢 ONLINE』
https://libra-online.laineus.com
(chrome以外未検証)

Screenshot from 2017-02-23 21-38-05z.png

昔流行った『FF Adventure』みたいなCGIゲーム的なものですかね。
ページ遷移こそしないものの、ボタン押したりするたびにHTTPリクエストが発生します。

セーブデータはサーバーに保管されるので、他のプレイヤーが育てたキャラと非リアルタイムな対戦ができます。

Webサイトだからできるレスポンシブ対応なゲームになっています。

20170224_2-.png

一つ一つがHTMLのDOM要素で作られているので、デベロッパーツールで要素検証したり、ブラウザのウィンドウ幅動かしたりしてWeb感を多能してくださいませ。

処理のざっくりした流れ

  1. まず画面上でボタン(HTML要素)をクリックすると、「何をクリックしたか」に関する情報を持ってサーバーサイドへリクエストが送られます。(jQueryのajax)
  2. サーバーでは、送られたアクションに基づいて計算をしたり、DBのデータを書き換えたりします。(PHP)
  3. そして、次に表示するべき内容がフロントに返ってきます。
  4. 返ってきた内容に基づき、jQueryでHTMLを書き換えたり、アニメーションさせたりします。

これらのフローが、ゲーム画面でボタンを押すたびに繰り返されます。

フロントとサーバーサイドのそれぞれの役割

例えば戦闘画面にてユーザーが、「敵Aを攻撃」というアクションをした場合、
フロントは最初、「敵Aを攻撃」という情報以上持たないままサーバーへ投げます。
「ダメージはいくつになるか」などの計算はサーバーが担当します。
そして再びフロントへ戻り、ダメージを与えたことを視覚的に表示します。

フロントはユーザーのアクション受け渡しと描画に徹し、計算やデータ更新をサーバーに任せることで、不正なアクションを防ぎます。

て書いて気づきましたが、別にこれゲームに限った話じゃないですね。動的Webサイトがやってることそのまんまでした。

おわりに

特に真新しい技術は使っていませんし、自分がまだweb経験の浅い頃からちまちま作っていたものなので、ところどころ作りが微妙だったりします。

当初はPHP+HTMLでゲーム作ったら斬新じゃね?
みたいなこと思って作り始めた気がしますが、改めて調べたら普通にあるみたいですね。
ブラウザ三国志みたいな商業化されたものまで。

ゆるーく遊んで頂けると嬉しいです。

追記

セキュリティがどうなっているか気になる、というコメントをいくつか見かけたので追記します。

(セキュリティというのは「人のアカウントへログインできたりしないか」「人のデータを不正に操作できないか」などのことですかね?)

基本的には、ごく普通の会員制Webサイトと変わりありません。

まずは一般的なログイン判定をサーバーで行います。

その後のアクションだと、例えば、「アイテム10番を削除」みたいな処理が飛んできたら、サーバー内でログインセッションやDBと照合し、アイテム10番が本当にその人の持ち物だったら削除、みたいな感じです。

データの持ち方もごく普通で、プレイデータや暗号化されたパスワードなどがMySQLへ格納されます。

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.