見出し画像

GASでシミュレーションゲームのプロトを作ってみる③

前回の記事からかなり空いてしまいましたが、ここまでで1ターンごとにお金が入って、そのお金で会社を購入して資産を増やす、というゲームが出来ました

ここからは、前回触れた、シミュレーション✕人狼みたいなものを作ろうかなと考えました。なお、この記事は備忘録的なものなので、技術的なノウハウとかはあまりないかも知れません。

裏側のデータの処理の流れなど書いていますが、「あーGoogleスプレッドシートってこういうのまで作れるんだー!」くらいに眺めてもらえると幸いです

今回のテーマ【人狼✕シミュレーション】

前回はボタンを押して物件を買うだけの単純なゲームでしたが、今回は前回の最後に触れた、人狼✕シミュレーションのようなゲームを作っていきます。

ルールの概要としては、マップにある物件を買い占める競争をして、人狼側と村人側のどちらが過半を買い占めれるか、みたいなゲームです。

トップ画面はこんな感じになりました↓

スクリーンショット 2021-04-28 10.11.06

…前回からかなり作り込んでいて、code書くの夢中で完成するまでnote書くの忘れていました…

前回の画像並べるだけの単純なものから、まさかのクォータービューになりました!

というわけで、すでに完成しているので、完成したゲームのルールを簡単に説明します

ルール詳細と実装項目

・人狼1名と市民チーム3名に分かれて競う(但し人狼以外は誰が人狼かわからない)
・お互いのチームの物件を買収できる
・1ターンの中で自由に物件を買収できる
・物件は買収するたびに値上がりする
・人狼は自分の色として以外に内緒で黒い物件として安値で買収できる
・25物件のうち半数を買収したチームの勝ち(人狼は自分の色+黒い物件)
というものです

そして、このルールを実現するまでに必要な実装は、概ね下記のとおりです

・ゲームスタート時にランダムにチーム分けが行われ、人狼チームと市民チームに分かれる(team1が市民 2が人狼)
・マップ上に物件が配置されていて所有者の色になっている
・物件をクリックすると物件購入画面に行ける
・物件購入を行うと、その物件が購入したユーザーの色になる
・プレイヤーごとに役割を付与する(Admin)
・ターン終了を全員が押すとAdminが次のターンに進めさせれる
・物件を買収するたびに価格が上がっていく
・人狼だけ物件購入画面で黒い物件として買収できる

ゲームの流れを全部お見せして解説すると膨大な量になるので、今回の記事では、市民プレイヤーが物件を買収するまでの流れをご紹介します

市民プレイヤーの動き①(物件購入画面遷移)

まずは、先程の画像の、一番左の白い物件を買収する過程と、その時のデータの動きを見ていきます

この物件はcomid=1となります

スクリーンショット 2021-10-13 10.17.34

↑この物件をクリックすると、↓こちらの物件購入画面になります

スクリーンショット 2021-04-28 10.13.33

ちなみに、GASは1つのURLで行うことになるので、画面の切り替えは違うテンプレートを用意し、全体画面で各物件をクリックすると物件購入のテンプレートを使用し、物件購入画面でBackを押すと全体画面のテンプレートを呼び出して使用することで画面の切り替えを表現しています

また、マスタ(スプレッドシート)の方でも、全体画面/物件購入画面(page 1 or 2)のどちらに滞在しているか、そして、物件購入画面にいる場合は、どの物件の画面か(comid)の情報をもたせています

こうしている理由は…(説明長いので飛ばして大丈夫です)

GASだとキャッシュ消去での強制再読み込みが出来ないため、見たところ購入できるはずが、操作中に他のユーザーが購入してしまう…みたいなことが起こったり、トランザクション処理がかなり弱かったり更新に時間がかかったりするせいで(DBがスプレッドシートですし…)、ある物件を購入しているときに、現在の資金の情報をスプレから読み込み→資金を減らす処理→再度スプレに書き込む、の処理をしている最中に、他のユーザーが自分の物件を買収して、そのお金が入る処理が入ると、買収されてお金が増えているはずなのに、その処理が上書きされて資金を減らす処理だけ反映されるなどといういことがありまして…いやもちろんそのあたり技術力があればそういうのもちゃんと処理出来ると思うんですけどそもそもここまで出来るGoogleスプレッドシートがすごいわけでそこまでやるくらいならRailsとかdjangoとか本格的なWebアプリのフレームワーク…げふんげふn

…ということがあるため、他のユーザーが見ている物件は、他のユーザーがアクセスできないようにするための仕様です

その結果として、↓このタイミングでは、ユーザー情報のテーブルには、page=2、comid=1となっています。

スクリーンショット 2021-10-13 10.21.40

これは、このユーザーがpage=2の物件購入画面を見ていて、その物件のid=comidが1であるというのを表しています。

市民プレイヤーの動き②(物件購入)

次は物件購入ですが、前回同様、この古のチケットみたいなアイコン↓をクリックすると、物件を購入できます

スクリーンショット 2021-10-13 10.19.16

それでは、物件購入をしたときの挙動を見ていきたいと思います

物件購入前は、company_id = 1の物件のuser_id、つまり所有者は0=不在となっています。これを、購入ボタンを押すと…

スクリーンショット 2021-10-13 10.35.02

↓このように、画面左上の物件の色が白から操作しているユーザーカラーの青に変わりました

スクリーンショット 2021-04-28 10.16.14

そして、物件1の所有者もuser_id=1に変化しました↓
(※このスクショを撮ったタイミングではまだ購入時に物件の価格が上がる設定にしていないのでcompany_priceは80のままです)

スクリーンショット 2021-10-13 10.37.00

↓ユーザーのデータも更新されて、所持物件が0→1に、所持金が100→20になっています。

スクリーンショット 2021-10-13 10.38.44

↓そして、元の画面に戻ると、物件の色が白から青に変わっています

スクリーンショット 2021-10-13 10.39.57

この画面でNext Turnを押すと、waitingが0→1に切り替わり、全員のwaitingが1になると、admin=1のユーザーが次のターンに進めることが出来ます。

スクリーンショット 2021-10-13 10.40.38

今回は市民側の動作について少し書きましたが、次回最終回では、人狼側の動作を書いていきたいと思います!

それにしても、Googleスプレッドシート恐るべし…ここまで出来るとは当初は想像もしていませんでした…

【お知らせ】
プレアナでは、「数値遊びの創造」で新たな価値を創造すべく、ゲームを中心としたエンタメの面白さの数値化に日々取り組んでいます。

最近は「数値遊びの創造」を体現するゲームとは違う遊びを提供するNFTプロジェクトにも取り組んでいますので、そんなちょっと変わった取り組みを、一緒にやっていきたい!という方は、ぜひご連絡ください。また、

「データ分析はなぜ失敗するのか?」
「売上が長続きするゲーム設計の秘訣」

など、アプリゲーム開発運用に関する無料セミナーも実施中です!
アプリゲーム開発運用を行なっているチーム単位で実施しておりますので、詳しいお問合わせや日程調整はこちらにてお受けしております。

会社HPはこちら


この記事が気に入ったらサポートをしてみませんか?