！インデント構文 定数　キャンバスWH = [300,300] 定数　ピース数WH = [5,5] ●ピース描画WH 　[キャンバスWH[0]/ピース数WH[0],キャンバスWH[1]/ピース数WH[1]]を戻す //部品 表イメージは描画中キャンバス 情報=「」のラベル作成 正解画像=「canvas」のDOM要素作成　//非表示 次更新=0　//タイマーID ステージは0 ピースは空配列　//ピース[y][x] 選択中ピースは空配列　//=[x,y] //デバッグ用 0回 　　正解画像をDOM親要素にDOM子要素追加 　　「一時停止」のボタン作成 　　それをクリック時は～ 　　　　次更新の画面更新処理取消 　　「正解判定」のボタン作成 　　それをクリック時は～ 　　　　「正解判定{ステージ}」を実行 　　　　言う #----------------------------------------------------------------------- 画像キャッシュ用={} ●(listを)画像キャッシュ読み込み 　listを反復 　　　画像キャッシュ用に対象がハッシュキー存在するか 　　　もしそれが0ならば 　　　　　対象を画像読む 　　　　　画像キャッシュ用＠対象はそれ ●(listが)画像キャッシュロード中か 　listを反復 　　　画像キャッシュ(対象)の「幅」をDOM属性取得 　　　もしそれが0ならば1を戻す 　0を戻す ●(urlの)画像キャッシュ 　画像キャッシュ用＠urlを戻す #----------------------------------------------------------------------- ●準備 　w,h = キャンバスWH 　正解画像の「幅」にwをDOM属性設定 　正解画像の「高」にhをDOM属性設定 　表イメージの「幅」にwをDOM属性設定 　表イメージの「高」にhをDOM属性設定 　 　w,h=ピース数WH 　ピース=[] 　yを0から(h-1)まで繰り返す 　　　ピース[y]=[] 　選択中ピースは空配列 　 ●ステージ開始時 　選択中ピースは空配列 　 　//ばらばらに配置 　w,h=ピース数WH //[5,5] 　一時=[] 　(w*h)回 　　ピース番号=回数-1 　　一時[ピース番号]=ピース番号 　一時を配列シャッフル 　 　ピース番号=0 　yを0から(h-1)まで繰り返す 　　　xを0から(w-1)まで繰り返す 　　　　　ピース[y][x]=一時[ピース番号] 　　　　　ピース番号=ピース番号+1 　 #----------------------------------------------------------------------- 選択座標=[] 表イメージをマウス離した時は～ 　　選択座標=[マウスX,マウスY] 　　 ●ゲーム中 　次更新は「ゲーム中」を画面更新時実行 　 　//操作の反映 　もし選択座標が空配列と一致でなければ 　　　x,y=選択座標 　　　w,h=ピース描画WH //[5,5] 　　　ピースクリック時(INT(x/w),INT(y/h)) 　　　選択座標=[] 　　　 　　　「正解判定{ステージ}」を実行 　　　もしそれならば 　　　　　情報に「ステージクリア！」をテキスト設定 　　　　　次更新を画面更新処理取消 　　　　　次更新は「ステージクリア画面」を画面更新時実行 　 　//描画 　正解描画 　ピース描画 　ピース選択枠描画 　 ●ステージクリア画面 　//描画 　正解描画 　ピース描画 　 　//操作の反映 　もし選択座標が空配列と一致でなければ 　　　選択座標=[] 　　　情報に空をテキスト設定 　　　1秒後には 　　　 タイトル画面 　違えば 　　　次更新は「ステージクリア画面」を画面更新時実行 　 #----------------------------------------------------------------------- ●正解描画 　正解画像へ描画開始 　全描画クリア 　「正解描画{ステージ}」を実行 ●ピース描画 　表イメージへ描画開始 　全描画クリア 　w,h=ピース数WH 　pw,ph=ピース描画WH 　xを0から(w-1)まで繰り返す 　　　yを0から(h-1)まで繰り返す 　　　　　//描画先 　　　　　tx=x 　　　　　ty=y 　　　　　//描画元 　　　　　ピース番号=ピース[y][x] 　　　　　sx=INT(ピース番号%w) 　　　　　sy=INT(ピース番号/w) 　　　　　 　　　　　//未実装　左右反転、上下反転 　　　　　 　　　　　正解画像の[sx*pw, sy*pw, pw,ph]を[tx*pw,ty*ph,pw,ph]へ画像部分描画 　 ●ピース選択枠描画 　もし選択中ピースが空配列と一致ならば、戻る 　x,y=選択中ピース 　pw,ph=ピース描画WH 　青色に線色設定 　空に塗色設定 　2に線太さ設定 　[x*pw,y*ph,pw,ph]へ四角描画 ●ピースクリック時(x,y) 　もし選択中ピースが空配列と一致するならば 　　　選択中ピース=[x,y] 　違えば 　　　//入替 　　　sx,sy = 選択中ピース 　　　p1=ピース[y][x] 　　　p2=ピース[sy][sx] 　　　ピース[y][x] = p2 　　　ピース[sy][sx] = p1 　　　選択中ピースは空配列 #----------------------------------------------------------------------- //ステージ0 ●正解描画0 　pic=[『https://n3s.nadesi.com/image.php?f=1.jpg』,『https://n3s.nadesi.com/image.php?f=26.png』] 　picを画像キャッシュ読み込み 　もし画像キャッシュロード中(pic)ならば戻る 　picを反復 　　　url=対象 　　　画像キャッシュ(url)を[0,0,300,300]へ画像描画 　　　 //完全固定 ●正解判定0 　w,h=ピース数WH 　正解判定用=[] 　 　xを0から(w-1)まで繰り返す 　　　yを0から(h-1)まで繰り返す 　　　　　正解判定用[x+y*w] = ピース[y][x] 　 　正解判定用をコンソール表示 　xを0から(w-1)まで繰り返す 　　　yを0から(h-1)まで繰り返す 　　　　　もし(正解判定用[x+y*w]=x+y*w)でなければ0を戻す 　1を戻す 　 //ステージ1 ●正解描画1 　pic=[『https://n3s.nadesi.com/image.php?f=10.png』,『https://n3s.nadesi.com/image.php?f=26.png』] 　picを画像キャッシュ読み込み 　もし画像キャッシュロード中(pic)ならば戻る 　 　url=pic[0] 　画像キャッシュ(url)を[0,0,300,300]へ画像描画 　 　//絵を動かしている部分 　url=pic[1] 　w=キャンバスWH[0] 　t=時間ミリ秒取得 　tx=(t%6000)/6000*w 　ty=絶対値(SIN(t/600))*30 　画像キャッシュ(url)を[0-tx,40-ty]へ画像描画 　画像キャッシュ(url)を[w-tx,40-ty]へ画像描画 　 //左右ループOK ●正解判定1 　w,h=ピース数WH 　入替量X=-1 　xを0から(w-1)まで繰り返す 　　　もしピース[0][x]が0ならば 　　　　　入替量X=x 　　　　　抜ける 　もし入替量X<0ならば、0を戻す 　 　正解判定用=[] 　xを0から(w-1)まで繰り返す 　　　yを0から(h-1)まで繰り返す 　　　　　dx =(x+入替量X)%w 　　　　　正解判定用[x+y*w] = ピース[y][dx] 　 　xを0から(w-1)まで繰り返す 　　　yを0から(h-1)まで繰り返す 　　　　　もし(正解判定用[x+y*w]=x+y*w)でなければ0を戻す 　1を戻す 　 　 　 #----------------------------------------------------------------------- ●タイトル画面 　表イメージへ描画開始 　全描画クリア 　20に描画フォント設定 　cw,ch = キャンバスWH 　x,y = [0,0] 　選択肢=「ふつうモード,うごくモード」を「,」で区切る 　h=ch/(選択肢の要素数) 　選択肢を反復 　　　黒色に線色設定 　　　空に塗色設定 　　　2に線太さ設定 　　　[x,y,cw,h]へ四角描画 　　　文字幅=対象の文字描画幅取得 　　　tw=文字幅["width"] 　　　 　　　黒色に塗色設定 　　　[cw/2-tw/2,y+(h/2)+5]へ対象を文字描画 　　　y=y+h 　 　1回 　　　a=絶対値(SIN(時間ミリ秒取得/400)) 　　　白色に塗色設定 　　　2に線太さ設定 　　　[20,ch/2-20,cw-40,45]へ四角描画 　　　「rgba(0,0,0,{a})」に塗色設定 　　　txt=「↑　ステージ選択　↓」 　　　文字幅=txtの文字描画幅取得 　　　tw=文字幅["width"] 　　　[cw/2-tw/2,ch/2+10]へtxtを文字描画 　　　黒色に塗り色設定 　 　//操作の反映 　もし選択座標が空配列と一致でなければ 　　　x,y=選択座標 　　　ステージ=INT(y/h) 　　　ステージ開始時 　　　選択座標は空配列 　　　「ゲーム中」を画面更新時実行 　違えば 　　　「タイトル画面」を画面更新時実行 #----------------------------------------------------------------------- 準備 タイトル画面