数当てゲームを作る（Vue.js + Vuex + TypeScriptに挑戦）

料理人の子がパパにおいしい料理を作ってもらえるように、

うちの子も何がしかプログラマの子としてのメリットを受けて然るべきではないか、

と急に思い立ち、子供用のゲームを色々作ってあげよう！

と燃えてきたので、すぐ作れそうな「数当てゲーム」を作ってみた。

せっかくなので、興味があったけど試してなかったVue.jsも試してみた。

数当てゲームのルール

ゲーム開始時にランダムな数字を1つ答えとして設定しておいて、

ユーザーはその答えを予想して画面上に並んだ数字をクリックする。

クリックした数字がはずれなら、はずれメッセージとともに

答えと比較した数字の大小をヒントとして表示する。

正解なら、正解メッセージを表示して、もう一度遊ぶためのリンクを表示する。

f:id:piro_suke:20180704231243p:plain

せっかくだからモダンな環境で開発してやろう、ということで

Vue.js + Vuex + TypeScript で開発した。

ソースはこちら：

完成版で遊ぶにはこちら：

Vue.jsめっちゃ作りやすい。バインディングバリバリですぐできた。

ドキュメントが分かりやすくてよかった。

TypeScriptは苦労した割に活用できてない気がする。

我ながら最初のゲームとして実に程よい題材を選んだ気がする。

Vue.js楽しいので、次はもう少し複雑なゲームに挑戦してみたい。