나데시코 3만을 사용하여 뇌 트레이닝 게임을 만드십시오!

축제이니까, 참가해 버릴거야!
왜냐하면, 나데시코씨도 15주년 축제중입니다.

라고 하는 것으로, 점점 게슈탈트 붕괴해 가는 한자 실수 찾기 게임.

이런거.
뇌 트레이닝에 좋을지도 모르지만, 단순히 뇌가 피로할 뿐일지도 모른다.
일단, 하나하나 문자를 쫓아, 찾는 것에 열중하는 것이 아니라, 가능한 한 시점을 움직이지 않고, 시야를 넓혀 화면 전체를 보고, 확실히 찾아내도록 하면 좋다고 해요.

우선, 문제 작성에서



닮은 한자를 모아 갑니다~!

배열



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

나데시코 1에서는, 개행이 들어간 문장을 직접으로 보통으로 배열로서 취급할 수 있었습니다만, 나데시코 3의 배열은, 이런 느낌. 쓰기의 귀찮은;
물론, v1과 같이 써, CSV 취득이나 단락을 사용해 배열로 하는 것도 가능합니다만, 이런 데이터라면 무심코 행수만 사용해 버려, 결국 보기 쉽지도 않으니까 w

난수



게임이라고 하면 난수, 적인?
난수로, 문제 배열의 몇번째의 데이터를 문제로 할까 결정해, 대답(잘못)을 어디에 표시할지도 결정한다.
배열 셔플도 게임적이지. 중복시키지 않고 차례만 엉망으로 한다.
문제의 데이터의 순서를 바꿔서, 0번을 메인의 문자, 1번을 실수의 문자라고 한다.
答=0。総数=8。 //答は正解(まちがい)の位置。総数は表示する文字数。
●問題作成
 r=問題の要素数の乱数。
 答=総数の乱数。
 問題[r]を配列シャッフル。
 (総数)回
   もし、(回数-1)=答ならば、問題[r][1]を表示。
   違えば、問題[r][0]を表示。
 ここまで。
ここまで。

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

문제가 생겼습니다!
 지금이지만 정답이 잘못되어 너무 이해하기 어렵습니다 ヽ (;´Д`) 노

화면에 그리기



일단 동작 확인으로 표시했을 뿐이었던 부분을 다시 써서, 같은 느낌으로 한다.
DOM을 사용한다든가, 그 밖에도 손수는 있다고 생각합니다만, 이번은 캔버스를 사용하기로 합니다.

캔버스



간이 에디터에서는, 미리 캔버스가 준비되어 있어, 곧바로 묘화 명령을 사용할 수 있습니다.

그리기



캔버스에 「문자 묘화」해 갑니다.
문자 그리기의 기준이 되는 좌표는, 좌하(정확하게는, 알파벳의 베이스 라인)이므로, 주의가 필요합니다.
答=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]を描画クリア。
  問題作成。
ここまで。

동작 확인



h tps : // 쓰다듬어. 이 m/v3/s토레게/쇼w. php? 아 p_i d=267

계속한다···지도?



어차피라면, 간이 에디터로 움직일 뿐만 아니라, 더 멋지고, 듯한 느낌으로 하고 싶네요~?
무엇보다, 원래 게임 내용이 이런 것이라고, 외형을 어떻게 하려고 하면, 자꾸자꾸 HTML이나 CSS의 영분이 되어, 나데시코 3만・・・이 아니게 되어 버릴까라고 한다.

좋은 웹페이지 즐겨찾기