数字早押し脳トレ 📖

数字を小さいほうから順番にクリック（またはタッチ）していく脳トレ的なゲーム。スマホだと小っさい字をタッチするの辛いかも💧　逆順にチェックを入れると大きい順になります。アドベントカレンダー、九日目。

プログラム: (→大)
！『https://n3s.nadesi.com/plain/drawPlus.nako3』を取り込む。# 文字幅、文字高さ取得 ！『https://n3s.nadesi.com/plain/wa.nako3』を取り込む。# DOM和スタイル追加 描画中キャンバスの「高さ」に0をDOM属性設定。 ＃設定 変数 [画面幅,画面高さ]＝[320,480]。 変数 背景色＝「#FFFFCC」 変数 ピ＝「https://n3s.nadesi.com/image.php?f=213.mp3」をオーディオ開く。# あたり音 変数 ブ＝「https://n3s.nadesi.com/image.php?f=214.mp3」をオーディオ開く。# ハズレ音 開始時間とは変数。 終了時間とは変数。 ＃UI作成 スタートボタン＝「ゲームスタート！」のボタン作成。 [120,1]のキャンバス作成。 逆順＝「逆順」のチェックボックス作成。改行作成。 ＃画面作成 ゲーム画面＝[画面幅,画面高さ]のキャンバス作成。改行作成。 ゲーム画面へ描画開始。 背景色で画面クリア。 ●(色で)画面クリア 色に塗り色設定。色に線色設定。 [0,0,画面幅,画面高さ]へ四角描画。 ここまで。 ＃問題作成 ＃＃表示マス作成 変数 [列数,行数]＝[4,5]。 変数 表示文字数＝列数*行数。 変数 表示マス＝空配列。 表示マス作成。 ●表示マス作成。 　　表示文字数回 　　　　変数 番号＝回数-1。 　　　　表示マス[番号]＝空配列。 　　　　表示マス[番号][0]＝(番号%列数)*(画面幅/列数)を切り捨て。 　　　　表示マス[番号][1]＝(番号/列数を切り捨て)*(画面高さ/行数)を切り捨て。 　　ここまで。 ここまで。 ＃＃問題作成 変数 数字＝１から表示文字数までの配列連番作成。 変数 正解＝空配列。# 正解の位置を記録しておく配列 ●問題作成 背景色で画面クリア。 数字＝数字を配列シャッフル。 表示文字数回 文字サイズ＝(35の乱数)＋14。 「bold {文字サイズ}px sans-serif」に描画フォント設定。 変数 番号＝回数-1。変数 数＝数字[番号]。 変数 文字幅＝数の文字幅取得。 変数 文字高さ＝数の文字高さ取得。 変数 x＝（画面幅/列数-文字幅）の乱数。 x＝x＋表示マス[番号][0]。 変数 y＝（画面高/行数-文字高）の乱数。 y＝y＋表示マス[番号][1]+文字高さ。 # 正解を記録 正解[数-1]＝空配列。 正解[数-1]＝[数,x,y,文字サイズ]。 黒色に塗り色設定。 [x,y]へ数を文字描画。 ここまで。 もし、(逆順の「チェック」をDOM属性取得)＝オンならば、正解を配列逆順。 ここまで。 ＃イベント 変数 正解判定＝いいえ。 変数 誤答数＝０。 描画中キャンバスをマウス押した時には、「マウス」で正誤判定処理。。。 描画中キャンバスをタッチ開始時には、「タッチ」で正誤判定処理。。。 ●(Aで)正誤判定処理とは。 もし、(A=「マウス」)かつ(タッチX＞0)ならば、戻る。 もし、（正解の配列要素数）＝０ならば、戻る。 正解判定＝いいえ。 ピをオーディオ停止。ブをオーディオ停止。# 先に停止を入れる。 変数 [数,x,y,文字サイズ]＝正解[0]。 //数＝表示文字数-(正解の要素数)+1。 「bold {文字サイズ}px sans-serif」に描画フォント設定。 文字幅＝数の文字幅取得。 文字高さ＝数の文字高さ取得。 変数 [判定x,判定y]＝[マウスX,マウスY]。 もし、A＝「タッチ」ならば、判定x,判定y＝[タッチX,タッチY]。 変数 [判定x1,判定y1,判定x2,判定y2]＝[x,y-文字高さ,x＋文字幅,y]。 もし、((判定x1≦判定x)かつ(判定x≦判定x2))かつ((判定y1≦判定y)かつ(判定y≦判定y2))ならば、: 正解判定＝はい。 ピをオーディオ再生。 赤色に塗り色設定。 [x,y]へ数を文字描画。 違えば、: 正解判定＝いいえ。 誤答数を１増やす。 ブをオーディオ再生。 ここまで。 描画中キャンバスのマウス離した時には、「マウス」で判定終了処理。。。 描画中キャンバスのタッチ終了時には、「タッチ」で判定終了処理。。。 ●(Aで)判定終了処理とは。 もし、(A=「マウス」)かつ(タッチX＞0)ならば、戻る。 もし、（正解の配列要素数）＝０ならば、戻る。 もし、正解判定＝はいならば、 変数 [数,x,y,文字サイズ]＝正解[0]。 //数＝表示文字数-(正解の要素数)+1。 黒色に塗り色設定。 [x,y]へ数を文字描画。 正解の0を配列削除。 ここまで。 0秒待つ。 もし、（正解の配列要素数）＝０ならば、 終了時間＝今。 タイム＝開始時間から終了時間までの秒差。 もし、誤答数＝０ならば、「おめでとう！{改行}タイムは{タイム}秒です{改行}完璧です！！」と言う。 違えば、「おめでとう！{改行}タイムは{タイム}秒です{改行}{誤答数}回まちがえました」と言う。 ピをオーディオ停止。 スタートボタンの「無効化」にいいえをDOM属性設定。 「rgba(255,255,200,.8)」で画面クリア。 ここまで。 ここまで。 スタートボタンをクリックした時には、 スタートボタンの「無効化」に、はいをDOM属性設定。 カウントダウン。 問題作成。 誤答数＝０。 開始時間＝今。 ここまで。 ＃カウントダウン ●カウントダウン 　　背景色で画面クリア。 　　文字サイズ＝64。 　　「bold {文字サイズ}px sans-serif」に描画フォント設定。 　　数を３から１まで繰り返す 文字幅＝数の文字幅取得。 　　文字高さ＝数の文字高さ取得。 変数 x＝(画面幅-文字幅)/2。変数 y＝(画面高さ+文字高さ)/2。 背景色に塗り色設定。黒色に線色設定。5に線太設定。 [画面幅/2,画面高さ/2]に文字サイズ/2+5の円描画。 黒色に塗り色設定。 [x,y]へ数を文字描画。 １秒待つ。 背景色で画面クリア。 ここまで。 ここまで。