セーブデータ管理をMySQL、メインの処理をPHP、フロントの表示周りをHTML+CSS+JS(jQuery)、フロントとバックの通信をajax通信でやっています。
普通の動的Webサイトで使われている技術のみを使っています。
『リブラの見た夢 ONLINE』
https://libra-online.laineus.com
（chrome以外未検証）
昔流行った『FF Adventure』みたいなCGIゲーム的なものですかね。
ページ遷移こそしないものの、ボタン押したりするたびにHTTPリクエストが発生します。
セーブデータはサーバーに保管されるので、他のプレイヤーが育てたキャラと非リアルタイムな対戦ができます。
Webサイトだからできるレスポンシブ対応なゲームになっています。
一つ一つがHTMLのDOM要素で作られているので、デベロッパーツールで要素検証したり、ブラウザのウィンドウ幅動かしたりしてWeb感を多能してくださいませ。
処理のざっくりした流れ
- まず画面上でボタン(HTML要素)をクリックすると、「何をクリックしたか」に関する情報を持ってサーバーサイドへリクエストが送られます。（jQueryのajax）
- サーバーでは、送られたアクションに基づいて計算をしたり、DBのデータを書き換えたりします。（PHP）
- そして、次に表示するべき内容がフロントに返ってきます。
- 返ってきた内容に基づき、jQueryでHTMLを書き換えたり、アニメーションさせたりします。
これらのフローが、ゲーム画面でボタンを押すたびに繰り返されます。
##フロントとサーバーサイドのそれぞれの役割
例えば戦闘画面にてユーザーが、「敵Aを攻撃」というアクションをした場合、
フロントは最初、「敵Aを攻撃」という情報以上持たないままサーバーへ投げます。
「ダメージはいくつになるか」などの計算はサーバーが担当します。
そして再びフロントへ戻り、ダメージを与えたことを視覚的に表示します。
フロントはユーザーのアクション受け渡しと描画に徹し、計算やデータ更新をサーバーに任せることで、不正なアクションを防ぎます。
て書いて気づきましたが、別にこれゲームに限った話じゃないですね。動的Webサイトがやってることそのまんまでした。
#おわりに
特に真新しい技術は使っていませんし、自分がまだweb経験の浅い頃からちまちま作っていたものなので、ところどころ作りが微妙だったりします。
当初はPHP+HTMLでゲーム作ったら斬新じゃね？
みたいなこと思って作り始めた気がしますが、改めて調べたら普通にあるみたいですね。
ブラウザ三国志みたいな商業化されたものまで。
ゆるーく遊んで頂けると嬉しいです。
#追記
セキュリティがどうなっているか気になる、というコメントをいくつか見かけたので追記します。
（セキュリティというのは「人のアカウントへログインできたりしないか」「人のデータを不正に操作できないか」などのことですかね？）
基本的には、ごく普通の会員制Webサイトと変わりありません。
まずは一般的なログイン判定をサーバーで行います。
その後のアクションだと、例えば、「アイテム10番を削除」みたいな処理が飛んできたら、サーバー内でログインセッションやDBと照合し、アイテム10番が本当にその人の持ち物だったら削除、みたいな感じです。
データの持ち方もごく普通で、プレイデータや暗号化されたパスワードなどがMySQLへ格納されます。