startupengineer

OVERVIEW

オブジェクト指向で作ったシミュレーションゲーム

YEAR 2019

PHP+jquery、オブジェクト指向(クラス設計)で作成したシミュレーションゲーム。

1.ストーリー

主人公はエンジニアになろうと決心した社会人。

仕事と並行しコードを書き、ポートフォリオを完成させるべく奮闘する。

2.ゲーム概要

最初に主人公のユニークを選択してゲームスタート。

仕事・コーディング・筋トレ・レスト(休む)・イベントのコマンドを選択してゲームを進めていく。


3.アピールポイント(技術面)


・多彩な条件によるマルチエンディング

・イベントは主人公のユニークに応じてイベントコマンドの発生率が変わる

・主人公がピンチになるとイメージが切り替わる

・ヒストリーの種類に応じてカラーリング

・snow.flake.jsで紙ふぶきの演出

・筋トレでパワーばかり上げていると・・・?


などなど、バックとフロント両面から上記機能を実装しました。

ゲームをプレイ &コードを見ていただくと細かいギミックがお分かりいただけるかと思います。


4.アピールポイント(コンセプト面)

このアウトプットで一番表現したかったのは、

仕事と並行してプログラミングを学ぶ人の忙しさ、大変さ、面白さでした。

全く別の業界で働いてきた人が別のことを、それも専門職であるエンジニアになろうというのですからかなりハードなことが分かります(8月までの自分が身にしみて経験しました)。


ただ、別業界な嫌なわけではないし、大変なりに充実した日々であったことも事実。

そういった日々をエンターテイメントとして表現しようと思い「イベント機能」の内容にはこだわりました。


また、ステータスをいくら上げても、仕事をいくら頑張っても、コードを書かない限りクリア(ポートフォリオが完成しない)という風になっています。

プレイしてくださる方は私と同じ駆け出し(スタートアップ)の方が多いはず。

本を読んだり、動画を見るのも大事だけど、コードを書くのが一番タメになる、ということを示したかったこともあり、こういう仕様にしました。


5.悩んだところ

・実装する機能をフロントとバックどちらで実現するか?

例えば「主人公のHPが100以下ならimgタグのパスを書き換える」という時に、

Front:  jqueryならHPを描画している箇所をtext()で取得(もしくはdata属性でもHPを出力してdata())して判定し,attr()でパスを書き換えれば実現。

Back:  PHPならPOSTでコマンドを処理する中で、主人公のインスタンス内にあるHPプロパティにアクセス。HPの残量が少ない時にはセッター(イメージを書き換えるメソッド)を作ることで実装。


機能の具体的な実装方法を考えて複数の選択肢があった時にどちらを選択するかを考えさせられことがありました。

上記の例については、結果的にバックで実装しました。

理由:

jqueryだとDOMを読み込むまでのラグでピンチ状態になる前のイメージが表示されてしまう。バック側の処理ならこの点を解決できる。


代わりに、HPが少ない時にクラスを当てる(赤く表示する)については負荷も少ないと思いjqueryを使用しました。


ただ、ゲームオーバー後も同じインスタンスを使用してプレイ再会するようなシステムならば、インスタンスのimgプロパティをコロコロ書き換えるのはよくないかも・・・。

と、色々考えさせられることが多かったです。





WEBSITE