ほんじゃら堂

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

Vue.js + SVG でマインスイーパーもどきをつくる

前回作った数当てゲームがこどもに好評だったので、

blog.honjala.net

次はもう少し複雑なマインスイーパー作成に挑んでみた。

数当てゲームはシンプルすぎて2秒で飽きられたけど、

マインスイーパーならしばらく遊んでくれるにちがいない。

今回は前回使った Vue + Vuex + TypeScript に加えて、

今後より高度なゲームを作るにあたって役に立つであろう、

SVGを使って画面を作成してみた。

マインスイーパーのルール

昔Windowsに付属してたマインスイーパーの簡易版のイメージ。

  • 9 x 9 のマスを用意する
  • そこにランダムに10個のマイン(子供に分かるよう、「落とし穴」にした)を埋め込む
  • マスをクリックしてマインを引いたらゲームオーバー
  • マイン以外のマスをクリックすると、そのマスのまわりにいくつマインがあるか数字で表示される
  • まわりにマインがないマスをクリックするとまわりのマスも開き、そこにマインがないマスがあったらそれも開く
  • マインが入っているマス以外をすべて開いたら勝ち
  • 「やりなおし」ボタンをクリックするとリセットされる

完成イメージ

f:id:piro_suke:20180714012239p:plain

SVGを使っていることを微塵も感じさせないデザインになってしまったのが残念。

こちらで遊べます。

minesweeper

ソースはこちら

github.com

Vue.jsを使用した開発は、

画面とのやりとりはVueがバインドしてくれるので

Vuex側でのデータ処理とSVGでのUI調整に集中できるのがとても良い。

おわり

ゲーム作りは自分でちまちま遊びながら進められるのが楽しい。

SVGで色々作って、もう少したのしげなUIを作れるようになりたい。

Webで使える!SVGファーストガイド

Webで使える!SVGファーストガイド