💣
Vue.jsでボンバーマンを作ってみました
（※過去のブログ記事をZennにアップしています。）
Vue.jsを使って、ボンバーマンにインスパイアを受けた「VueBERMAN」を作ってみました。
Vue.jsでゲームを作った経緯
SPA（SinglePageApplication）などのコンテンツを作る際に便利なJavaScriptのフレームワークとして、Vue.jsとかReact.jsをよく使うかと思います。
これらが便利な理由は、主にデータバインディングと言って、データを更新するとDOMの表示を自動的に切り替える仕組みを持っているので、エンジニアはデータの更新に専念することで、効率的にコンテンツを作る事が可能になります。
Vue.jsのもつデータバインディングってゲームのロジックでも、とても効果を発揮するんじゃないかと思い立ちまして、今回このゲームを作ってみました。
Let's Play VueBERMAN
ゲーム自体は、オリジナルの感覚になるべく近づけるべき、試行錯誤しましたので、いい感じになったかと思います。敵を全部撃破して、出口に到着するとゲームクリアです。 経過時間に応じて、ランク付けされます。 PCのみでしか操作できませんのであしからず。
まとめ
結論としては、ロジックは非常に組みやすかったですが、ゲームの表示領域を広げるとFPSが著しく低下して、遊ぶ事が出来なくなりました。このゲームに関しては表示領域を小さめに作っているので大丈夫です。何がボトルネックになっているのか詳しく見ていければと思います。思っていた以上に、この手のゲームと相性がよかったと思います。もちろん派手な演出が必要な場合は、WebGLなどに頼らざる得ないかと思いますが、そこまで凝らないブラウザゲームなら、逆にCSSアニメーションが使えたり、属人化を抑えられたり、いい事が多いのではと思います。
▼ ソースコード
Discussion