🌸 「なでしこ」
>
🍯 「貯蔵庫」
🍯 なでしこ3貯蔵庫
🌟新規
📒一覧
🔌
🔍検索
🚪ログイン
ログイン
していません。
[
📌文法
] [
🎨命令一覧
]
[編集モード] ジグソーパズル
バラバラになったピースを入れ替えて完成させよう
プログラム:
(→大)
(→textarea)
(→左右に配置)
!インデント構文 定数 キャンバス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) ステージ開始時 選択座標は空配列 「ゲーム中」を画面更新時実行 違えば 「タイトル画面」を画面更新時実行 #----------------------------------------------------------------------- 準備 タイトル画面
▶ 実 行 [F9]
クリア
一時保存
デバッグ
ブレイクポイント:
→ 再開
↓ 一行次へ
キャンバス: 幅
× 高
上書き保存
表示ページ
→直前に実行(または一時保存)した内容を復元
なでしこバージョン: v
素材のアップロード
ログイン
するとファイルをアップロードできます。