Vue.js + SVG でヌメロン風数当てゲームをつくる

Vue.jsでこども用ゲーム作成シリーズ第3弾。

前回作ったマインスイーパーは、ゲームルール自体の中毒性のおかげか、

たまにプレイしてくれてるようで作った甲斐があった。

飽きないうちに次のゲームを作成しておこう、ということで

今回は昔テレビで観たヌメロンというゲームを参考に、

数当てゲームを作ってみた。

ルール

本家はいくつかアイテムが使えるのだけど、まずは基本ルールのみ実装。

あらかじめ3桁の重複しない数字がランダムに選ばれて、

プレイヤーはそれを予想して数字を入力する。

選ばれた数字と入力した数字が一致したらプレイヤーの勝ち。

数字の入力は何回でもできて、外れてもヒントが表示される。

入力した数字の位置と値が合っている個数が「あたり」として表示され、

位置だけが合っている個数が「おしい」として表示される。

プレイヤーはそのヒントをみて予想の数字を調整し、

なるべく少ない回数での正解を目指す。

f:id:piro_suke:20180806005853p:plain

こちらで遊べます。

ソースはこちら。

数当てゲームは、答え生成処理、判定処理、UIの組み換えで

いろんなパターンのものが作れてゲーム開発入門に良い。

自分で遊んでみて気づいたのだけど、

今回のルールは、これまでつくった2つのような

「適当に入力してたら終わる」というタイプのものではないので、

こども向けとしては難しい方かもしれない。

入力を数字じゃなくて文字とかイラストに変更しても遊べそうなので、

挫折するようならもう少し選択肢を減らしたイラストバージョンを

作って、レベルアップしていけるような仕組みを検討したい。