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

[編集モード] 数字の並び方を変えれる１５パズル

１５パズル愛がしゅごいので今回は数字の並び方を色々変更出来るようにしてみたよ☆　渦巻きが難しかったです。もしもしもしであまり賢そうではないorz。ついでに駒数も縦横それぞれ変えられるようにしたので、もはや１５パズルではナイ？！　分かったのは、無闇に数が多くなるとやる気が減退するとゆうコトとスマホではキビシイとゆうコト💦

!「https://n3s.nadesi.com/plain/wa.nako3」を取り込む。
!「https://n3s.nadesi.com/plain/drawPlus.nako3」を取り込む。
＃---宣言------
定数 [上方向,下方向,左方向,右方向]＝[0,1,2,3]。
定数 駒画像URL＝「https://n3s.nadesi.com/image.php?f=104.jpg」
定数 駒数＝[3,4,5,6,7,8,9]
黒茶＝「#583822」。絹鼠＝「#DDDCD6」。
定数 色データ＝{"数字":黒茶,"アキ":絹鼠}

変数 駒データ＝空配列。
変数 [最大画面サイズ,最大駒サイズ,余白]＝[600,80,20]。
変数 [駒幅,駒高,駒数横,駒数縦]＝[最大駒サイズ,最大駒サイズ,4,4]
変数 パズル画面幅＝駒幅*駒数横。
変数 パズル画面高さ＝駒高さ*駒数縦。
変数 新規ゲーム待ち＝オン。
変数 駒総数＝駒数横*駒数縦-1。
変数 アキ＝駒総数。
変数 終端＝駒総数。
変数 数字並び順＝「標準」
変数 駒画像＝空。

＃---UI作成-----
「サイズ：」のラベル作成。
ｘセレクト＝駒数のセレクトボックス作成。「×」のラベル作成。
ｙセレクト＝駒数のセレクトボックス作成。改行作成。
ｘセレクトに「{駒数横}」をテキスト設定。
ｙセレクトに「{駒数縦}」をテキスト設定。

「並び方：」のラベル作成。
並びセレクト＝["標準","逆順","縦書き","蛇行","渦巻き"]のセレクトボックス作成。
改行作成。改行作成。

スタートボタン＝「新規スタート」のボタン作成。
改行作成。改行作成。

＃＃ パズル画面作成
パズル画面＝[パズル画面幅,パズル画面高さ]のキャンバス作成。

改行作成。改行作成。

＃＃ 裏画面作成
「完成図」のラベル作成。
ヒントボタン＝「非表示」のボタン作成。
改行作成。
裏画面＝[パズル画面幅,パズル画面高さ]のキャンバス作成。
裏画面へ描画開始。

＃---イベント設定------
スタートボタンをクリックした時には、
　　駒数横＝ｘセレクトのテキスト取得して、それを半角変換。
　　駒数縦＝ｙセレクトのテキスト取得して、それを半角変換。
　　駒総数＝駒数横*駒数縦-1。
　　数字並び順＝並びセレクトのテキスト取得。
　　新規ゲーム。
ここまで。

ヒントボタンをクリックした時には、
　ヒントボタンのテキスト取得。
　もし、それ＝「非表示」ならば、
　　　ヒントボタンに「表示」をテキスト設定。
　　　裏画面の「非表示」にオンをDOM属性設定。
　違えば、
　　　ヒントボタンに「非表示」をテキスト設定。
　　　裏画面の「非表示」にオフをDOM属性設定。
　ここまで。
ここまで。

パズル画面をマウス押した時には
　　ｘ＝(マウスX/駒幅)を整数変換。
　　ｙ＝(マウスY/駒高)を整数変換。
　　No＝ｘ＋ｙ*駒数横。
　　もし、新規ゲーム待ち＝オフならば、
　　　　もし、駒データ[No]≦駒総数ならば、
　　　　　　もし、(Noの上隣)＝アキならば、上方向へ駒入替。
　　　　　　もし、(Noの下隣)＝アキならば、下方向へ駒入替。
　　　　　　もし、(Noの左隣)＝アキならば、左方向へ駒入替。
　　　　　　もし、(Noの右隣)＝アキならば、右方向へ駒入替。
　　　　　　駒描画。完成判定。
　　　　ここまで。
　　ここまで。
ここまで。

駒画像URLの画像読んだ時には、
　　駒画像＝対象。
　　新規ゲーム。
ここまで。

#-----新規ゲーム--------------------------------
●新規ゲーム
　　#---初期化------
　　数字並び順の数字画像描画。
　　数を０から駒総数まで繰り返す。　#駒位置を初期化
　　　　駒データ[数]＝数。
　　ここまで。

#---問題作成------
　　１０００回
　　　　方向は４の乱数。方向へ駒入替。
　　ここまで。

駒描画。新規ゲーム待ち＝オフ。
ここまで。

●駒描画
　　パズル画面へ描画開始。
　　#---画面描画------
　　数を０から駒総数まで繰り返す。
　　　　x1＝駒データ[数]%駒数横*駒幅。y1＝INT(駒データ[数]/駒数横)*駒高さ。
　　　　x2＝数%駒数横*駒幅。y2＝INT(数/駒数横)*駒高さ。
　　　　もし、駒データ[数]＝終端ならば、
　　　　　　色データ["アキ"]に塗り色設定。白色に線色設定。２に線太設定。
　　　　　　[x2,y2,駒幅,駒高さ]に四角描画。
　　　　違えば、
　　　　　　裏画面の[x1,y1,駒幅,駒高さ]を[x2,y2,駒幅,駒高さ]に画像部分描画。
　　　　ここまで。
　　ここまで。
ここまで。

●(xとyからSの)駒番号描画位置計算
　　w＝Sの文字幅取得。h＝Sの文字高さ取得。
　　xx＝x+駒幅/2-w/2。yy＝y+駒高/2-h/2+h。
　　[xx,yy]で戻る。
ここまで。

#-----------------------------------------------
●(Aの)数字画像描画
　　数字並び順で駒データ作成。
　　画面サイズ計算。
　　裏画面へ描画開始。
　　数を０から駒総数まで繰り返す。
　　　　ｘ＝数%駒数横*駒幅。ｙ＝INT(数/駒数横)*駒高さ。
　　　　駒番号＝駒データ[数]
　　　　駒画像の[0,0,100,100]を[ｘ,ｙ,駒幅,駒高さ]に画像部分描画。
　　　　「bold {駒幅*0.48}px Aria」に描画フォント設定。色データ["数字"]へ塗り色設定
　　　　もし、駒番号＝駒総数ならば、
　　　　　　駒番号＝「★」　#最後の駒
　　　　違えば、
　　　　　　駒番号＝駒番号＋１。
　　　　ここまで。
　　　　描画位置＝ｘとｙから駒番号の駒番号描画位置計算。
　　　　ｘ＝描画位置[0]。ｙ＝描画位置[1]。
　　　　[ｘ,ｙ]へ駒番号の文字描画。
　　ここまで。
ここまで。

●(Aで)駒データ作成
　　駒データ＝空配列。番号＝0。
　　もし、A=「渦巻き」ならば、
　　　　上下分割点＝駒数縦/2。
　　　　もし、駒数横＜駒数縦ならば、上下分割点＝駒数縦/2-((駒数縦-駒数横を整数変換)/2)。
　　　　基準値＝[-1]
　　　　(上下分割点)回
　　　　　　C=回数-1。
　　　　　　((駒数横+駒数縦-C*4)*2-4)+基準値[C]を基準値に配列追加。
　　　　ここまで。
　　ここまで。
　　数を０から駒総数まで繰り返す。　#駒位置を初期化
　　　　列＝数%駒数横。行＝(数/駒数横)を整数変換。
　　　　Aで条件分岐
　　　　　　「逆順」ならば、番号＝駒総数-数。。。
　　　　　　「縦書き」ならば、番号＝(駒数横-列-1)*駒数縦+行。。。
　　　　　　「蛇行」ならば、
　　　　　　　　もし、(行%2=0)ならば、番号＝列+行*駒数横。
　　　　　　　　もし、(行%2=1)ならば、番号＝(駒数横-列-1)+行*駒数横。
　　　　　　ここまで。
　　　　　　「渦巻き」ならば、
　　　　　　　　もし、行＜上下分割点ならば、
　　　　　　　　　　左右端＝行。上側＝はい。
　　　　　　　　違えば、
　　　　　　　　　　左右端＝(駒数縦-行)の絶対値。上側＝いいえ。
　　　　　　　　　　もし、左右端＞駒数横/2ならば、左右端＝駒数横/2を切上げ。
　　　　　　　　ここまで。
　　　　　　　　もし、数＝０ならば、# 先頭
　　　　　　　　　　番号＝基準値[0]+1。
　　　　　　　　違えば、もし、(行≠0)かつ(行<(基準値の配列要素数))かつ(列＝行-1)ならば、# 基準値を置く
　　　　　　　　　　番号＝基準値[行]。
　　　　　　　　違えば、もし、(列≧左右端)かつ(列≦駒数横-1-左右端)かつ(上側＝はい)ならば、# 上側
　　　　　　　　　　番号＝駒データ[数-1]+1。
　　　　　　　　違えば、もし、(列＞駒数横-1-左右端)ならば、# 右側
　　　　　　　　　　番号＝駒データ[数-駒数横]+1。
　　　　　　　　違えば、もし、(列＜左右端)ならば、# 左側
　　　　　　　　　　番号＝駒データ[数-駒数横]-1。
　　　　　　　　違えば、もし、(列≧左右端)かつ(列≦駒数横-1-左右端)ならば、# 下側
　　　　　　　　　　番号＝駒データ[数-1]-1。
　　　　　　　　ここまで。
　　　　　　ここまで。
　　　　　　違えば、番号＝数。。。
　　　　ここまで。
　　　　駒データ[数]＝番号。
　　　　もし、番号＝駒総数ならば、
　　　　　　アキ＝数。終端＝数。
　　　　ここまで。
　　ここまで。
ここまで

●画面サイズ計算
　　最大画面サイズ＝クライアント幅-余白。
　　もし、クライアント幅＞クライアント高さならば、最大画面サイズ＝クライアント高さ-余白。
　　駒幅＝最大駒サイズ。駒高＝最大駒サイズ。
　　もし、(駒数横*最大駒サイズ＞最大画面サイズ)または(駒数縦*最大駒サイズ＞最大画面サイズ)ならば、
　　    駒幅＝最大画面サイズ/駒数縦。駒高＝最大画面サイズ/駒数縦。
　　    もし、(駒数横*最大駒サイズ)＞(駒数縦*最大駒サイズ)ならば、
　　        駒幅＝最大画面サイズ/駒数横。駒高＝最大画面サイズ/駒数横。
　　  　ここまで。
    ここまで。
　　パズル画面幅＝駒幅*駒数横。
　　パズル画面高さ＝駒高さ*駒数縦。
　　パズル画面の「幅」にパズル画面幅をDOM属性設定。
　　パズル画面の「高さ」にパズル画面高をDOM属性設定。
　　裏画面の「幅」にパズル画面幅をDOM属性設定。
　　裏画面の「高さ」にパズル画面高をDOM属性設定。
ここまで。

#-----駒入れ替え--------------------------------
●(方向へ)駒入替
　　対象駒＝NULL。
　　方向で条件分岐
　　　上方向ならば、もし(アキが下端か)がいいえならば、対象駒はアキの下隣。。。
　　　下方向ならば、もし(アキが上端か)がいいえならば、対象駒はアキの上隣。。。
　　　左方向ならば、もし(アキが右端か)がいいえならば、対象駒はアキの右隣。。。
　　　右方向ならば、もし(アキが左端か)がいいえならば、対象駒はアキの左隣。。。
　　ここまで。
　　もし、対象駒＝NULLならば、戻る。
　　駒データのアキと対象駒を配列入替。
　　アキ＝対象駒。
ここまで。

#-----完成判定----------------------------------
●完成判定
　　完成＝０。
　　数を０から駒総数まで繰り返す。
　　　　もし、駒データ[数]が数でなければ、いいえで戻る。
　　ここまで。
　　裏画面を[0,0]に画像描画。
　　「おめでとう！」と言う。
　　新規ゲーム待ち＝オン。
ここまで。
#-----------------------------------------------

#-----------------------------------------------
●(Aが)上端
　　もし、A/駒数横<1ならば、はいで戻る。
　　違えば、いいえで戻る。
ここまで。
●(Aが)下端
　　もし、A/駒数横≧駒数縦-1ならば、はいで戻る。
　　違えば、いいえで戻る。
ここまで。
●(Aが)左端
　　もし、A%駒数横≦0ならば、はいで戻る。
　　違えば、いいえで戻る。
ここまで。
●(Aが)右端
　　もし、A%駒数横≧駒数横-1ならば、はいで戻る。
　　違えば、いいえで戻る。
ここまで。
●(Aの)上隣
　　A-駒数横で戻る。
ここまで。
●(Aの)下隣
　　A+駒数横で戻る。
ここまで。
●(Aの)左隣
　　A-1で戻る。
ここまで。
●(Aの)右隣
　　A+1で戻る。
ここまで。
#-----------------------------------------------

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

🍯 なでしこ3貯蔵庫

[編集モード] 数字の並び方を変えれる１５パズル

素材のアップロード