2019-12-24：神経衰弱を作ってみる その１
神経衰弱アプリを作る……
どのPodcastだったかうっかり失念しちゃったんだけど、
こんなもの作ってね！とかすでにあるものを変えられる人は多いけど「０から何か作って」って言って作れる人が減ってるってお話を聞いたような気がする…
完成品はすごい拙いものかもしれないけど、０から何かを生み出そうとしたりする経験ができてるのはすごく良いことなのかもしれない……と思ったり、思わなかったりしてます。
私「……どういう感じにしたらいい感じになるかな…。」
とうーんと悩みながらipadに向かって書き書き…
そして、書いたものが以下のものです。
まずはこんなことを実現したいという目標！
＊できたらいいな！こんなゲーム！（数字合わせGame編）
- 3段階の難易度変更ができるといいな！
｛Easy:4枚、Normal:8枚、Hard:16枚｝
- かかった時間を結果画面で出せるといいな！
- スマホでも遊べるようにしたいな！
次に、UI周りのことを日本語にしてみました。
- ルール説明画面
- 難易度choice&スタートボタン
- ゲーム画面
- 結果画面＆Replayボタン
※Replayボタンを押したら、②に戻る。
次に！UIを考えてみる……
中身について考える
次は…この画面をどうやったら実現できるか考えろ……
①ルール説明画面は、はじめから出しておく。
OK!を押すとその画面から、次の画面に切り替える。
②難易度選択をしてもらう。→選択したものには色を付ける。
START！を押すとTimerがはじまる。
選択されてないのに押されたら、STARTの下にエラーメッセージを出す。
（…と書いてあるのですが、コード書いてたら②をそのまま実現するのが難しかったので、実際は選択されてないとエラーメッセージが出て、難易度選択すると消えてSTARTボタンを押せる仕様にしました。）
③GAME START!
＊easy：4枚の場合＊
[前提条件]
const cards（仮称）=[0,0,1,1]
（※実際の制作時には、[1,1,2,2]にしてあります）
この配列をシャッフルして、ランダムで4枚並べます。
今回採用したシャッフル方法は…
フィッシャー–イェーツのシャッフル
って方法……
私は上手に説明できないのでとりあえずwikiのリンク張っておきます！
[1]
はじめは、全部ウラ表示（＝文字非表示）状態にしておく。
[2]-1
1枚目をクリックする。→オモテ表示（＝文字表示）状態にする。
[2]-2
2枚目をクリックする。→オモテ表示にする。
[3]
「1枚目と2枚目は同じ数字ですか？」
はい→オモテ表示のまま。
いいえ→2枚ともウラ表示にする
[4]
「全部表になりましたか？」
はい→Timerを止めて、結果画面へ…
いいえ→[2]-1に戻る。
＊normal：8枚の場合＊
[前提条件]が少しだけ変わります。
const cards（仮称）=[0,0,1,1,2,2,3,3]
(※実際の制作時には[1,1,2,2,3,3,4,4]にしてあります）
以下略
＊hard：16枚の場合＊
ここも[前提条件]の部分が変わります。
const cards（仮称）=[0,0,1,1,2,2,3,3,4,4,5,5,6,6,7,7]
(※実際の制作時には[1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8,]にしてあります）
以下略
④終了 Result画面
かかった時間を表示
Replay？ボタンを押すと②に戻る！
…ふぅ。
こんな感じだったらゲームになるのかな？わかんないけど！！！！！！！
ということで、今日はこんな感じに中身を色々考えてみた話を書いてみました！
ツッコミどころ満載かもしれませんけどね…！
明日はUIを実際に作ってみる話がかけたらいいな～と思ってます！
