0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Last updated at Posted at 2020-07-02

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

 というわけで、どんどんゲシュタルト崩壊していく漢字間違い探しゲーム。
kanji.jpg
 こんなの。
 脳トレに良いかもしれないが、単に脳が疲労するだけかも知れない。
 一応、一つ一つ文字を追って、探すことに熱中するのではなく、なるべく視点を動かさずに、視野を広げて画面全体を見て、ぱっぱっと見つけるようにするとよいそうですよ。

まずは、問題作成から

 似たような漢字を、集めまくりますよ~!

配列

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

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

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

乱数

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

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

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

 問題出来ました!
 いまさらですけど、正解が間違いって、分かりづらすぎるヽ(;´Д`)ノ

画面に描画する

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

canvas

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

描画

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

答=0。横数=8。縦数=4。総数=横数*縦数。
文字サイズ=36。
「bold {文字サイズ}px sans-serif」に描画フォント設定。
#~~~中略~~~~~~~
 変数 x=0。変数 y=0。
 (総数)回
   x=((回数-1)%横数)*文字サイズ。
   y=(((回数-1)/横数)を切捨)*文字サイズ+文字サイズ。
   もし、(回数-1)=答ならば、[x,y]へ問題[r][1]を文字描画。
   違えば、[x,y]へ問題[r][0]を文字描画。
   x=x+文字サイズ。
 ここまで。

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

イベントを付ける

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

 答x=(答%横数)*文字サイズ。
 答y=((答/横数)を切捨)*文字サイズ。

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

マウス押した時

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

描画中キャンバスをマウス押した時には、
  もし、(マウスX>答x)かつ(マウスY>答y)かつ(マウスX<(答x+文字サイズ))かつ(マウスY<(答y+文字サイズ))ならば、正解処理。
ここまで。

タッチした時

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

描画中キャンバスをタッチした時には、
  もし、(タッチX>答x)かつ(タッチY>答y)かつ(タッチX<(答x+文字サイズ))かつ(タッチY<(答y+文字サイズ))ならば、正解処理。
ここまで。

正解したら最初に戻る。

 エンドレスですw

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

動作確認

https://n3s.nadesi.com/id.php?267

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?