→2020年版できました。あわせてご参照くださいませ 絵描きとかUXとかやりつつフロントもやってる「ゆき」です。前回Vue.jsを使ったポートフォリオサイトを作って、VueとSVGだけでぬるぬる動くアニメーションが実現できることがわかりました。 ここまでやったら次はゲームを作りたいと思うのが人の性ですよね。今回は猫の日に合わせて合計20時間くらいで爆速ゲーム開発をやってみました。多分Vueでシューティングゲームを作った変わり者はあんまりいないと思うので、ソースとノウハウを共有します。 作ったもの https://mezashiattack.firebaseapp.com ソース(Githubリポジトリ) タップだけで遊べる簡単なシューティングゲームです。ジャンプしながらメザシを発射し、迫ってくる猫に与える(当てる)とポイントになります 今回作ったゲームの技術的なポイントです アニメーション
![VueとSVGを使ってシューティングゲーム『ネコ🐱メザシ🐟アタック🌟』を作ったのでソースと解説 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/e13831b677c09897592dcdb33249b9af04505ac9/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-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9VnVlJUUzJTgxJUE4U1ZHJUUzJTgyJTkyJUU0JUJEJUJGJUUzJTgxJUEzJUUzJTgxJUE2JUUzJTgyJUI3JUUzJTgzJUE1JUUzJTgzJUJDJUUzJTgzJTg2JUUzJTgyJUEzJUUzJTgzJUIzJUUzJTgyJUIwJUUzJTgyJUIyJUUzJTgzJUJDJUUzJTgzJUEwJUUzJTgwJThFJUUzJTgzJThEJUUzJTgyJUIzJUYwJTlGJTkwJUIxJUUzJTgzJUExJUUzJTgyJUI2JUUzJTgyJUI3JUYwJTlGJTkwJTlGJUUzJTgyJUEyJUUzJTgyJUJGJUUzJTgzJTgzJUUzJTgyJUFGJUYwJTlGJThDJTlGJUUzJTgwJThGJUUzJTgyJTkyJUU0JUJEJTlDJUUzJTgxJUEzJUUzJTgxJTlGJUUzJTgxJUFFJUUzJTgxJUE3JUUzJTgyJUJEJUUzJTgzJUJDJUUzJTgyJUI5JUUzJTgxJUE4JUU4JUE3JUEzJUU4JUFBJUFDJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1lNDQxOWQ1ZWU2NzVkYTJmODU2NTE4NGRlMjAwMWNkNQ%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQweXVuZWNvJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0xNzEyZDhlZThkNTlhZmQ0NzNkOWVkNDkxZDliMDAzOQ%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D58c7cfaa4f9237047b3fce2b56bc2a8f)