ほんじゃら堂

めんどくさい仕事をラクにする作業自動化レシピ集

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

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

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

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

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

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

数当てゲームのルール

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

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

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

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

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

完成イメージ

f:id:piro_suke:20180704231243p:plain

作り方

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

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

jp.vuejs.org

vuex.vuejs.org

www.typescriptlang.org

ソースはこちら:

github.com

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

number-guess

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

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

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

おわり

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

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

基礎から学ぶ Vue.js

基礎から学ぶ Vue.js