こんにちは、ナカムラです。
今日はVue.jsを使って簡単なゲームを作ってみたのでご紹介します。
ゲームの概要
作ったのは運試しゲーム。
１・２・３と３つあるボタンのどれかをクリックするとランダムで１〜３の数字が出ます。
押したボタンの数字とランダムの数字が一致するとポイントに加算、外れるとマイナスになります。
10回チャレンジして高得点を狙いましょう！というゲームです。
※同じ数字が連続して出たり、なかなか当たらないことがあります。
See the Pen vue game by Nakamura (@takayo-nakamura) on CodePen.
主な動作
・クリックしたらランダムで数字を出し、照合、ポイントへ反映、回数をカウントダウンする
・照合結果によってclassを切り替える
・ポイントがマイナスになったらclassを切り替える
・10回クリックしたらゲームの部分を消し、リセットボタンを表示する
Vue.jsで書いてよかったこと
Vue.jsなしで書くとclassの切り替え処理まで書かなければいけませんが
v-bindやv-ifを使うだけで実装できるのがとても簡単で、
メソッドの内容も表示の処理がない分、読みやすくなりました。
まとめ
Vue.jsを使うことで簡単に作れます。
今回はポイントに加算して終わりですが、ポイント数に応じて表示を変えることもできます。
キャンペーンページなどでちょっとしたミニゲームなんかを取り入れても面白そうですね。
