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

日本語プログラミング言語「なでしこ」 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属性設定。 ここまで。