こんにちは 今日は2/22の猫の日に合わせて個人開発したゲーム「ネコメザシアタック」の技術的なポイントを解説する記事です。去年のバージョンはこちら 作ったもの ソース: https://github.com/yuneco/mezashi2 アプリ: https://nekomzs2.web.app/ (PCでも遊べるけどスマホ推薦です) 使っている技術 そろそろリリース見込みのVue3を先取りした構成です Vue(Vue2 + CompositionAPI) TypeScript CSS Transition(ほとんどのアニメーション) SVG(画像 + 一部のアニメーション) Firebase (Hosting + FireStoreでランキング) おしながき(この記事の内容) 作ったもの全部を解説していくとキリがないので、主に去年からの差分を中心に面白いポイントだけ説明していきます。
![VueとCSSとTypeScriptでシューティングゲーム「ネコメザシアタック2020」を作ったのでソースと解説 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/5c33eceeff3e013cc95609f989a57502a42e26e8/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9VnVlJUUzJTgxJUE4Q1NTJUUzJTgxJUE4VHlwZVNjcmlwdCVFMyU4MSVBNyVFMyU4MiVCNyVFMyU4MyVBNSVFMyU4MyVCQyVFMyU4MyU4NiVFMyU4MiVBMyVFMyU4MyVCMyVFMyU4MiVCMCVFMyU4MiVCMiVFMyU4MyVCQyVFMyU4MyVBMCVFMyU4MCU4QyVFMyU4MyU4RCVFMyU4MiVCMyVFMyU4MyVBMSVFMyU4MiVCNiVFMyU4MiVCNyVFMyU4MiVBMiVFMyU4MiVCRiVFMyU4MyU4MyVFMyU4MiVBRjIwMjAlRTMlODAlOEQlRTMlODIlOTIlRTQlQkQlOUMlRTMlODElQTMlRTMlODElOUYlRTMlODElQUUlRTMlODElQTclRTMlODIlQkQlRTMlODMlQkMlRTMlODIlQjklRTMlODElQTglRTglQTclQTMlRTglQUElQUMmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPTUwOGU3MDYzMjI2MTdlMmQxMmYwOGE2MTAwMDkxZWVh%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDB5dW5lY28mdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTliZmMwZDY4OTc1NTkwMjI0N2FjNWViMDIyNTQ5NjFi%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g5qCq5byP5Lya56S-SUNTIA%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%2523212121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3D744d91e034972725b083e1e6bef65a0a)