[ 📌文法] [ 🎨命令一覧]

[編集モード] ひろいもの　～問題入力・ダウンロード機能付き～　☆完成☆

日本語プログラミング言語「なでしこ」 Advent Calendar 2023　19日目の記事用。MML演奏を使って効果音も鳴るようにしてみました🎵🎶

＃ひろいもの
!「https://n3s.nadesi.com/plain/nadesiko3-FileReader.js」を取り込む。
!『拡張プラグイン:music.js』を取り込む

『碁石はどこから取り始めても構いません。
上下左右の線に沿って順に石を取りながら進んでいきます。
全ての石を取り尽くしたらゲームクリアです！

※石を飛ばして進むことは出来ません。
※斜めに進むことは出来ません。
※後戻りは出来ません。
※石の無いところは次の石まで直進で、途中で曲がることは出来ません。』を表示。

＃問題集取得
問題集URL＝『https://n3s.nadesi.com/image.php?f=384.json』
問題集＝問題集URLからAJAX_JSON取得。

＃設定
親要素＝DOM親要素。
ダイアログキャンセル値＝NULL。
DOM和属性["チェック"]＝「checked」。
変数 [行数,列数,マス幅,画面幅,画面高さ]＝[13,13,30,0,0]。
行列数カウントして画面サイズ計算。

●行列数カウント
    問題集を反復
        仮列数＝対象[0]の要素数。もし、列数＜仮列数ならば、列数＝仮列数。
        仮行数＝対象の要素数。もし、行数＜仮行数ならば、行数＝仮行数。
    ここまで。
ここまで。

●画面サイズ計算
　　画面幅＝(列数+1)*マス幅。
　　画面高さ＝(行数+1)*マス幅。
ここまで。

＃＃フラグ
ゲーム中フラグ＝オフ。
問題入力中フラグ＝オフ。

＃効果音
正解音＝「音階7 音符32 音量80 ド64レ＃」。
ハズレ音＝「音階3 音符8 ド」。
クリア音＝『音階6 音符16【「ファ"ラド」「ファ"ラド」「ド"ファ"ラ」】「ファ"ラド」ーーーーー』
ゲームオーバー音＝『調♭（ソラシレミ） テンポ 180
トラック1 音階4 シシ8.シ16シ↑レ8.ド16 ド8.↓シ16シ8.シ16シ
トラック2 音階4 音量 60 ファソファソファソファ』

＃＃データ
現在データ＝空配列。
拾えるデータ＝空配列。
拾った履歴＝空配列。
作成データ＝空辞書。# 問題作成した問題集データ
空データ＝空配列。空データ作成。
●空データ作成
    行数回。空データ[回数-1]＝0を列数だけ配列要素作成。ここまで。
ここまで。
進行方向＝空。# 戻しボタンで進行方向を使うため
問題一覧＝問題集の辞書キー列挙。

＃ゲーム画面とUI作成
問題セレクト＝問題一覧のセレクトボックス作成。
「　　　　　　」のラベル作成
戻しボタン＝「一手戻す」のボタン作成。
戻しボタンの「title」に「一つ前の状態に戻す」をDOM属性設定。
最初ボタン＝「最初から」のボタン作成。
最初ボタンの「title」に「この問題を最初からやり直す」をDOM属性設定。
ヒント表示＝「❓」のチェックボックス作成。
ヒント表示の「title」に「チェックを入れると拾える石を明示します」をDOM属性設定。
効果音チェック＝「🎵」のチェックボックス作成。
効果音チェックの「title」に「効果音のオン・オフを設定します」をDOM属性設定。
効果音チェックの「チェック」にオンをDOM属性設定。
改行作成。
ゲーム画面＝[画面幅,画面高さ]のキャンバス作成。
改行作成。

＃＃問題作成
開閉1＝「DETAILS」のDOM部品作成。
開閉1にDOM親要素設定。
「SUMMARY」のDOM部品作成。
それに「問題作成」をテキスト設定。
問題作成ボタン＝「問題入力開始！」のボタン作成。
「　横」のラベル作成。
列数エディタ＝列数のエディタ作成。
列数エディタの「幅」に「40px」をDOMスタイル設定。
「×縦」のラベル作成。
行数エディタ＝行数のエディタ作成。
行数エディタの「幅」に「40px」をDOMスタイル設定。
改行作成。
「作成した問題集をダウンロード：」のラベル作成。
ダウンロードボタン＝「ダウンロード」のボタン作成。
改行作成。改行作成。
親要素にDOM親要素設定。

＃＃問題データ読み込み
開閉2＝「DETAILS」のDOM部品作成。
開閉2にDOM親要素設定。
「SUMMARY」のDOM部品作成。
それに「問題データ読み込み」をテキスト設定。
「<B>貯蔵庫にある問題データを読み込む</B>」のラベル作成。改行作成。
素材URL＝「https://n3s.nadesi.com/image.php?f=384.json」のエディタ作成。
素材URLの「dblclick」がDOMイベント発火した時には、
　　素材URLの「select」を空でJSメソッド実行 
ここまで。
改行作成。
「素材の絶対URLを入力してください：」のラベル作成。
素材取得ボタン＝「読み込む」のボタン作成。
素材取得ボタンをクリックした時には、
    問題集＝素材URLのテキスト取得からAJAX_JSON取得。
    問題集変更してゲーム開始。
ここまで。
改行作成。改行作成。
「<B>ローカルの問題データを読み込む</B>」のラベル作成。改行作成。
問題選択ボタン＝ファイル選択作成。
問題選択ボタンでファイル選択した時には、
    ファイル＝対象[0]。
    空でファイルのテキストファイル開いた時には、
        問題集＝対象をJSONデコード。
        問題集変更してゲーム開始。
    ここまで。
ここまで。
親要素にDOM親要素設定。

＃UIイベント
問題セレクトの「change」がDOMイベント発火した時には、
    ゲーム開始。
ここまで。

最初ボタンをクリックした時には、
    「最初からやり直しますか？」で二択。
    もし、それ＝はいならば、ゲーム開始。
ここまで。

戻しボタンをクリックした時には、
    もし、(拾った履歴の要素数)≦０ならば、戻る。
    ゲーム中フラグ＝オン。
    x=進行方向%列数。y=(進行方向/列数の整数部分)
    拾った履歴から配列ポップ。
    列,行,進行方向＝それ。
    現在データ[行][列]＝1。
    もし、進行方向＝空ならば、ゲーム開始。# 最初から
    違えば、[列-x,行-y]から拾えるデータ更新。
    盤面描画。
ここまで。

ヒント表示の「change」がDOMイベント発火した時には、
    問題描画。
ここまで。

＃ゲーム開始
ゲーム開始。

●ゲーム開始
    問題＝問題集[問題セレクトのテキスト取得]を配列複製。
    # 初期化
    現在データ＝問題を行数と列数に碁石データ整形。
    拾えるデータ＝現在データを配列複製。
    進行方向＝空。拾った履歴＝空配列。
    # 描画
    盤面描画。
    ゲーム中フラグ＝オン。
ここまで。

＃＃マス目を描画
●盤面描画
    ベージュ色に塗り色設定。５に線太さ設定。
    [0,0,画面幅,画面高さ]へ四角描画。
    １に線太さ設定。
    列数回。[マス幅*回数,0]から[マス幅*回数,画面高さ]まで線描画。ここまで。
    行数回。[0,マス幅*回数]から[画面幅,マス幅*回数]まで線描画。ここまで。
    問題描画。
ここまで。

＃＃問題を描画
●問題描画
    白色に塗り色設定。1.5に線太さ設定。
    現在データを反復:
        描画行＝マス幅*(対象キー+1)。
        対象を反復:
            描画列＝マス幅*(対象キー+1)。
            もし、対象＝１ならば[描画列,描画行]へマス幅/2-1の円描画。
    もし、(ヒント表示の「チェック」をDOM属性取得)がオンならば、:
        黄色に塗り色設定
        拾えるデータを反復:
            描画行＝マス幅*(対象キー+1)。
            対象を反復:
                描画列＝マス幅*(対象キー+1)。
                もし、対象＝１ならば[描画列,描画行]へマス幅/2-1の円描画。
ここまで。

＃＃問題を盤面の中央に配置できるようデータ整形
●(問題を行数と列数に)碁石データ整形
    追加行数＝行数-(問題の表行数)。
    追加列数＝列数-(問題の表列数)。
    上追加行数＝追加行数/2を切り捨て。
    下追加行数＝追加行数/2を切り上げ。
    左追加列数＝追加列数/2を切り捨て。
    右追加列数＝追加列数/2を切り上げ。
    追加行＝空配列。
    問題の表列数回。追加行に0を配列追加。ここまで。
    上追加行数回。問題の0に追加行を配列挿入。ここまで。
    下追加行数回。問題に追加行を配列追加。ここまで。
    追加列＝空配列。
    問題の表行数回。追加列に0を配列追加。ここまで。
    左追加列数回。問題の0に追加列を表列挿入して問題に代入。ここまで。
    右追加列数回。問題の(問題の表列数)に追加列を表列挿入して問題に代入。ここまで。
    問題を戻す。
ここまで。

＃＃マウスイベント
描画中キャンバスをマウス押した時には、
    列,行＝マウス位置取得。
    もし、問題入力中フラグ＝オンならば、
        もし、現在データ[行][列]＝１ならば、
            現在データ[行][列]＝０。
        違えば、
            現在データ[行][列]＝１。
        ここまで。
        拾った履歴に[列,行]を配列追加。
        盤面描画。戻る。
    ここまで。
    もし、ゲーム中フラグ＝オフならば、戻る。
    もし、拾えるデータ[行][列]＝1ならば、
        もし、（効果音チェックの「チェック」をDOM属性取得）＝オンならば、正解音をMML演奏。
        現在データ[行][列]＝0。
        進行方向＝[列,行]の進行方向更新。
        拾った履歴に[列,行,進行方向]を配列追加。
        進行方向と[列,行]から拾えるデータ更新。
    違えば、
        もし、（効果音チェックの「チェック」をDOM属性取得）＝オンならば、ハズレ音をMML演奏。
    ここまで。
    盤面描画。0.1秒待つ。終了判定。
ここまで。

●マウス位置取得
    列＝((マウスX-マス幅/2)/マス幅)の整数部分。
    行＝((マウスY-マス幅/2)/マス幅)の整数部分。
    [列,行]を戻す。
ここまで。

＃＃判定
●(座標の)進行方向更新
    列,行＝座標。進行方向＝空。
    上,下,左,右＝[列数*-1,列数,-1,1]。
    もし、(拾った履歴の要素数)≠0ならば、
        前列,前行＝拾った履歴[(拾った履歴の要素数)-1]。
        もし、(行＜前行)ならば、進行方向＝上
        もし、(行＞前行)ならば、進行方向＝下
        もし、(列＜前列)ならば、進行方向＝左
        もし、(列＞前列)ならば、進行方向＝右
    ここまで。
    進行方向を戻す。
ここまで。

●(進行方向と座標から)拾えるデータ更新
    列,行＝座標。
    拾えるデータ＝空データを配列複製。
    上下左右＝[[0,-1],[0,1],[-1,0],[1,0]]。
    上下左右を反復
        x,y＝対象。
        もし、進行方向*-1＝y*列数＋xならば、続ける。# 後戻り禁止
        [列,行]から対象へ拾える石探索。
    ここまで。
ここまで。

●(座標から方向へ)拾える石探索
    列,行＝座標。x,y＝方向。
    もし、(列+x＜０)または(行+y＜０)または(列+x＞(現在データの表列数)-1)または(行+y＞(現在データの表行数)-1)ならば、戻る。
    もし、現在データ[行+y][列+x]＝１ならば、
        拾えるデータ[行+y][列+x]＝１。
    違えば、
        [列+x,行+y]から方向へ拾える石探索。
    ここまで。
ここまで。

●終了判定
    現在データと空データが同じ配列か確認。
    もし、それ＝はいならば、:
        ゲーム中フラグ＝オフ。
        もし、（効果音チェックの「チェック」をDOM属性取得）＝オンならば、
            クリア音をMML演奏。
            60/120*3+1秒待つ。
        ここまで。
        「クリア！」と言う。
        戻る。
    拾えるデータと空データが同じ配列か確認。
    もし、それ＝はいならば、:
        ゲーム中フラグ＝オフ。
        もし、（効果音チェックの「チェック」をDOM属性取得）＝オンならば、
            ゲームオーバー音をMML演奏。
            60/180*7+1秒待つ。
        ここまで。
        「失敗！」と言う。
        戻る。
ここまで。

●(AとBの|Bが)同配列確認
    もし、(AをJSONエンコード)=(BをJSONエンコード)ならば、はいで戻る。
    いいえで戻る。
ここまで。

#------------------
＃問題作成
問題作成ボタンをクリックした時には、
    もし、問題入力中フラグ＝オフならば、
        ゲーム中フラグ＝オフ。
        問題入力中フラグ＝オン。
        行数＝行数エディタのテキスト取得。
        列数＝列数エディタのテキスト取得。
        空データ作成。
        画面サイズ計算。
        描画中キャンバスの「幅」に画面幅をDOM属性設定。
        描画中キャンバスの「高さ」に画面高さをDOM属性設定。
        盤面描画
        問題作成ボタンに「☆確定します☆」をテキスト設定。
        問題セレクトの「無効化」にオンをDOM属性設定。
        最初ボタンの「無効化」にオンをDOM属性設定。
        戻しボタンの「無効化」にオンをDOM属性設定。
        ヒント表示の「無効化」にオンをDOM属性設定。
        現在データ＝空データを配列複製。
        拾った履歴＝空配列。
        盤面描画。
    違えば、
        「問題名を入力してください」と尋ねる。
        問題名＝それ。
        もし、それ=NULLならば、戻る。
        もし、それ≠空ならば、
            作成データ[問題名]＝現在データ。
            問題集＝作成データ。//問題集をJSONエンコードして言う
            問題一覧＝問題集の辞書キー列挙。
            問題セレクトに問題一覧をセレクトボックスアイテム設定。
            問題セレクトに問題名をテキスト設定。
        違えば、
            「キャンセルします」で二択。
            もし、それがいいえならば、
                戻る。
            ここまで。
        ここまで。
        問題セレクトの「無効化」にオフをDOM属性設定。
        最初ボタンの「無効化」にオフをDOM属性設定。
        戻しボタンの「無効化」にオフをDOM属性設定。
        ヒント表示の「無効化」にオフをDOM属性設定。
        問題入力中フラグ＝オフ。
        ゲーム中フラグ＝オン。
        問題作成ボタンに「問題入力開始！」をテキスト設定。
        盤面描画。ゲーム開始。
    ここまで。
ここまで。
ダウンロードボタンをクリックした時には、
    もし、（作成データと空辞書が同じ配列か確認）＝はいならば、戻る。
    作成データをデータ整形ダウンロード。
ここまで。

＃＃問題データ整形
●(問題集を)データ整形ダウンロード
    問題集を反復
        データ＝対象。問題名＝対象キー。
        消去リスト＝空配列。
        行数＝データの要素数。
        行数回
            行＝回数-1。
            もし、(データ[行]の配列合計)＝０ならば、行を消去リストに配列追加。
            違えば、抜ける。
        ここまで。
        行数回
            行＝行数-回数。
            もし、(データ[行]の配列合計)＝０ならば、行を消去リストに配列追加。
            違えば、抜ける。
        ここまで。
        消去リストを配列数値ソートして配列逆順。
        消去リストを反復
            データの対象を配列削除。
        ここまで。
        消去リスト＝空配列。
        列数＝データの表列数
        列数回
            列＝回数-1。
            もし、(データの列を表列合計)＝０ならば、列を消去リストに配列追加。
            違えば、抜ける。
        ここまで。
        列数回
            列＝列数-回数
            もし、(データの列を表列合計)＝０ならば、列を消去リストに配列追加。
            違えば、抜ける。
        ここまで。
        消去リストを配列数値ソートして配列逆順。
        消去リストを反復
            データ＝データの対象を表列削除。。
        ここまで。
        問題集[問題名]＝データ。
    ここまで。
    問題集をJSONエンコードして「ひろいもの問題集.json」でテキストダウンロード。
ここまで。
＃問題データ読み込み
●問題集変更
    問題一覧＝問題集の辞書キー列挙。
    問題セレクトに問題一覧をセレクトボックスアイテム設定。
    行列数カウントして画面サイズ計算。
    空データ作成。
    描画中キャンバスの「幅」に画面幅をDOM属性設定。
    描画中キャンバスの「高さ」に画面高さをDOM属性設定。
ここまで。

デバッグキャンバス: 幅 × 高

🍯 なでしこ3貯蔵庫

[編集モード] ひろいもの　～問題入力・ダウンロード機能付き～　☆完成☆

素材のアップロード

🍯 なでしこ3貯蔵庫

[編集モード] ひろいもの ～問題入力・ダウンロード機能付き～ ☆完成☆

素材のアップロード

[編集モード] ひろいもの　～問題入力・ダウンロード機能付き～　☆完成☆