セーブデータ管理を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でゲーム作ったら斬新じゃね？
みたいなこと思って作り始めた気がしますが、改めて調べたら普通にあるみたいですね。
ブラウザ三国志みたいな商業化されたものまで。
ゆるーく遊んで頂けると嬉しいです。