Help us understand the problem. What is going on with this article?

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

More than 3 years have 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へ格納されます。

laineus
趣味で色々作ってます。 仕事ではマッチングアプリの開発チームマネージャーをやっています。 一応Webデザイナー出身。
https://laineus.com
linkbal
街コンポータルサイト「machicon JAPAN」やマッチングサービス「CoupLink」などを開発・運営しています。
https://linkbal.co.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした