LoginSignup
287
194

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-02-23

セーブデータ管理を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へ格納されます。

287
194
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
287
194