数字早押し脳トレ

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

エディタ

プログラム

！『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]へ数を文字描画。
        １秒待つ。
        背景色で画面クリア。
    ここまで。
ここまで。

実行結果

保存

プログラムを保存

表示ページ

直前に実行または一時保存した内容を復元

実行環境

なでしこバージョン

素材

画像・音声・データ

ログインすると素材をアップロードできます。

🍯 プログラム貯蔵庫

プログラム

プログラムを保存

なでしこバージョン

画像・音声・データ