Vue.js #1 Advent Calendar 2018アドベントカレンダー6日目の記事です.
Vue.jsアドカレ参戦したくていつのまにか枠が埋まってたんですけど、今更枠が空いたので投稿します。
ハイパーカジュアルゲームとは
FPSのように複雑に作り込まれたゲームとは違い、デザインは極力シンプルでかつ遊び方が直感的にわかるゲームのこと。
ハイパーカジュアルゲーム(以降HCG)はここ数年で一気に伸びてきており、とある企業は有名なHCGの会社に2億ドルの出資をしたとか。
なぜVue.jsなのか
私自身Vue.jsを触ってまだ半年くらいですが感想として「アニメーションが簡単で綺麗」ということを一番に思いました。
簡単にアニメーションをつけれて、かつシンプルなデザインで良いのであればHCGをVue.jsで再現できるのではないかと考えました。
試しに作ったもの
簡単につくれそうなものに2048というゲームがあったので作ってみました。概要としては、4x4のマスの中の数字を上下左右に動かして同じ数を足し、できるだけ大きい数字を作るゲームです。所要時間は2~3時間でした。
gridレイアウトにdiv要素をいれて、それらをswapするだけのシンプルな実装です(コードは汚いので要望があればgithub公開します)→公開しました。
ダメそうなところ
HCGが親しまれている理由として、スマホで手軽にできるという点が一番にあると思っています。この場合、ブラウザ上で動くゲームは今の需要にあっているのかと聞かれると素直に肯定はし辛いです。ただ、Weexなどのモバイル版Vue.jsもあるので、今後に期待したいというところだと思います。
まとめ
簡単に作れるんじゃないか？と安易な気持ちでやってみたのですが、本当に簡単に作れてしまいました。Vue.jsのtransitionおそるべし。今はUnityなどのエンジンを使ってゲームを作成するのが主流だとは思いますが、簡単なHCGであれば、Vue.jsを使うことでさらにサクッと作ることができるのではないでしょうか。