CATCH THE MONSTER

パネルに隠れながら動き回るモンスターを捕まえるゲームです。JavaScriptのオブジェクト指向、アニメーションとCSSのアニメーションの練習で作りました。主にjQueryで作成。

モンスターは３種類。モンスターを捕獲していき、スコアを獲得するSPA。
各モンスターは動く速さ・捕獲時の獲得ポイントが違い、時間内に全て捕まえられなければ、GAME OVERです。

パネルは8×8の64枚と、10×10の100枚を選択できます。
モンスターは、スパイダー、ゴースト、ドラゴンの３種類です。

HTML・CSS（SCSS）・JavaScript（jQuery）・PHP

・セッション：ユーザー名毎の最大獲得スコアを保存

・ドロップダウンメニュー：モンスターの種類等、各項目設定

・モーダル：捕獲時、ゲームオーバー時

・インスタンス化：モンスターの切り替え(アイコン、獲得するスコア、速さの切り替え)

・クロージャ：カプセル化、関数のローカル変数にてオブジェクト等情報の保持

・Ajax：ユーザー名毎の最大獲得スコアを保存するため、ajax.phpにデータを非同期で送受信

javaScriptの『関数』『スコープ』『クロージャ』『プロトタイプ』の学習から始めたため、作業時間よりも検索していた時間の方が長かったように思います。また、各アニメーションについても、DOMを取得し、計算、反映の流れをconsoleで確認しながら試行錯誤して作成しました。

この作品で、javaScriptのオブジェクト生成、クロージャ、様々なアニメーションを学習できました。