なでしこ３のみを使って、脳トレゲームを作るよ！

4365 ワード
ゲーム Qiita夏祭り2020_パソナテック なでしこ なでしこ テキストリンク

　お祭りだから、参加しちゃうよ！
　だって、なでしこさんも１５周年祭り中ですもの。

　というわけで、どんどんゲシュタルト崩壊していく漢字間違い探しゲーム。

　こんなの。
　脳トレに良いかもしれないが、単に脳が疲労するだけかも知れない。
　一応、一つ一つ文字を追って、探すことに熱中するのではなく、なるべく視点を動かさずに、視野を広げて画面全体を見て、ぱっぱっと見つけるようにするとよいそうですよ。

まずは、問題作成から

　似たような漢字を、集めまくりますよ～！

配列

　集めたものを、配列にしておきます。

問題＝[["大","犬","太"],["犬","尤"],["天","夭"],["千","干"],["人","入"],["日","曰"],["因","困"],["井","丼"],
["王","玉","生","主"],["吉","舌","告"],["末","未","朱"],["矢","失","朱"],["己","巳","已"],["成","戌","戊"],
["休","体"],["ぬ","め"],["ね","わ"],["る","ろ"],["る","ゐ"],["織","職","識"],["輸","輪"],["輸","諭","愉"],
["内","肉"],["味","昧"],["裕","祐"],["崇","祟"],["栽","裁"],["微","徴"],["綱","網"],["杏","否","盃","杳"],
["持","待","侍"],["瓜","爪"],["推","稚","椎"],["苦","苫"],["萩","荻"],["芽","茅"],["第","弟"],["季","李"],
["園","圓","圍"],["晴","睛"],["到","致"],["斤","斥"],["酒","洒"],["治","冶"],["減","滅"],["釣","鈎","鉤"]]

　なでしこ１では、改行の入った文章を直でふつーに配列として扱えましたが、なでしこ３の配列は、こんな感じ。書くのめんどい；
　もちろん、ｖ１のように書いて、CSV取得や区切るを使って配列にするのも可能ですが、こういうデータだと何気に行数ばかり使っちゃって、結局見やすくもないですからねｗ

乱数

　ゲームと言えば乱数、的な？
　乱数で、問題配列の何番目のデータを問題にするか決めて、答え（まちがい）をどこに表示するかも決める。
　配列シャッフルも、ゲーム的だよね。重複させずに順番だけぐちゃぐちゃにする。
　問題のデータの順番を入れ替えて、０番をメインの文字、１番を間違いの文字ってことにする。

答＝０。総数＝８。　//答は正解(まちがい)の位置。総数は表示する文字数。
●問題作成
　ｒ＝問題の要素数の乱数。
　答＝総数の乱数。
　問題[ｒ]を配列シャッフル。
　（総数)回
　　　もし、(回数-1)＝答ならば、問題[ｒ][１]を表示。
　　　違えば、問題[ｒ][０]を表示。
　ここまで。
ここまで。

問題作成。答を表示。　//動作確認。

　問題出来ました！
　いまさらですけど、正解が間違いって、分かりづらすぎるヽ（；´Д｀）ノ

画面に描画する

　取りあえず動作確認で表示しただけだった部分を書き換えて、らしい感じにする。
　DOMを使うとか、他にも手立てはあると思いますが、今回はキャンバスを使うことにします。

canvas

　簡易エディタでは、予めキャンバスが用意されており、すぐに描画命令を使うことができます。

描画

　キャンバスに「文字描画」していきます。
　文字描画の基準となる座標は、左下（正確には、アルファベットのベースライン）なので、注意が必要です。

答＝０。横数＝８。縦数＝４。総数＝横数＊縦数。
文字サイズ＝36。
「bold {文字サイズ}px sans-serif」に描画フォント設定。
#～～～中略～～～～～～～
　変数 x＝0。変数 y＝0。
　(総数)回
　　　x＝（(回数-1）％横数）＊文字サイズ。
　　　y＝（（(回数-1)／横数）を切捨）＊文字サイズ＋文字サイズ。
　　　もし、(回数-1)＝答ならば、[x,y]へ問題[ｒ][１]を文字描画。
　　　違えば、[x,y]へ問題[ｒ][０]を文字描画。
　　　x＝x＋文字サイズ。
　ここまで。

　らしくなってきました。よきよき♪

イベントを付ける

　マウスでクリック（またはタッチ）したら、正解とか不正解とか出て欲しい。
　ていうか、出てこそのゲームでしょっていう。

　答ｘ＝（答％横数）＊文字サイズ。
　答ｙ＝（（答／横数）を切捨）＊文字サイズ。

　答えの座標を記録しておく。

マウス押した時

　クリックした時は、押して、離した時に発動するのと、そのせいでマウスの座標が取れない仕様だから、こうゆう時は「押した時」を使う。

描画中キャンバスをマウス押した時には、
　　もし、（マウスX＞答ｘ）かつ（マウスY＞答ｙ）かつ（マウスX＜(答ｘ＋文字サイズ)）かつ（マウスY＜(答ｙ＋文字サイズ)）ならば、正解処理。
ここまで。

タッチした時

　マウス押した時でスマホも反応するけど、ブラウザによっては不都合があるかも知れないし、念のためタッチのイベントも併記。（「マウス移動した時」などは使えない）

描画中キャンバスをタッチした時には、
　　もし、（タッチX＞答ｘ）かつ（タッチY＞答ｙ）かつ（タッチX＜(答ｘ＋文字サイズ)）かつ（タッチY＜(答ｙ＋文字サイズ)）ならば、正解処理。
ここまで。

正解したら最初に戻る。

　エンドレスですｗ

●正解処理
　　「当たりです！」と言う。
　　[0,0,310,150]を描画クリア。
　　問題作成。
ここまで。

動作確認

https://nadesi.com/v3/storage/show.php?app_id=267

つづく・・・かも？

　どうせなら、簡易エディタで動かすだけじゃなく、もっとかっこよく、ぽい感じにしたいですよねぇ～？
　もっとも、そもそものゲーム内容がこんだけなのと、見た目をどうにかしようとすると、どんどんHTMLやCSSの領分になって、なでしこ３のみ・・・じゃなくなってしまうかなという。