雪乃☆雫のなでしこ日和

１５パズル改　～canvasと関数を動的に（？）作るよ！

なでしこ３, 15パズル | 08:31

　ひっ、ひらめきました！ｗ

　DOMイベント設定に指定する関数には引数がつけれないっぽいとか、DOM要素作成でcanvasを作ると、後から（実際の）サイズは変えれないラシイとか、いろいろと散々ぼやいた末に、ほぼヤケクソでマウスクリックようの関数と<canvas>タグをそれぞれ１６個並べて無理矢理感満載の１５パズルを作ったわけですが・・・

　DOM_HTML設定はDOM_HTML設定で、上書きで前のが消えてしまうから出来ないと思っていたんだけど、何のことは無い、変数に一行追加で作っていって、最後にまとめてDOM_HTML設定すればいいんじゃ？！

　そしてそして、関数の方も同様にして「ナデシコする」で設置できました！

　そっこー書き換え（＾▽＾；；

<script type="なでしこ">
#---宣言------
駒＝空配列。
駒サイズ＝１００。
駒色＝["AAAAFF","FFAAAA","FFDDAA","AAFFAA","DDDDDD"]
アキ＝１５。
新規ゲーム待ち＝オン。

#---canvasとマウス押下関数の設置------　　※　ココです★
マウス押下関数＝空。
キャンバスHTML＝空。
数を０から１５まで繰り返す。
　　マウス押下関数＝マウス押下関数に「●マウス押下時{数}{改行}　　{数}のマウス押下時。{改行}ここまで。{改行}{改行}」を一行追加。
　　もし、回数％４＝０ならば、
　　　　　　キャンバスHTML＝キャンバスHTMLに「<canvas id="cv{数}" width="100" height="100"></canvas>{改行}<BR>」を一行追加。
　　違えば、
　　　　　　キャンバスHTML＝キャンバスHTMLに「<canvas id="cv{数}" width="100" height="100"></canvas>」を一行追加。
　　ここまで。
ここまで。
マウス押下関数をナデシコする。
「#game」にキャンバスHTMLをDOM_HTML設定

#---イベント設定------
数を０から１５まで繰り返す。
　　「#cv{数}」の「onmousedown」に「マウス押下時{数}」をDOMイベント設定。
ここまで。

新規ゲーム。

#-----新規ゲーム--------------------------------------------------------
●新規ゲーム
　　#---初期化------
　　アキ＝１５。　　　　　　　　　　　　#アキ位置を初期化。
　　数を０から１５まで繰り返す。　　　　#駒位置を初期化
　　　　駒[数]＝数。
　　ここまで。

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

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

●駒描画
　　#---画面描画------
　　数を０から１５まで繰り返す。
　　　　「canvas#cv{数}」のDOM要素取得。それへ描画開始。
　　　　もし、駒[数]＜１５ならば、色＝駒色[駒[数]／４を切捨]
　　　　違えば、色＝駒色[４]
　　　　「#{色}」へ塗り色設定。[0,0,駒サイズ,駒サイズ]に四角描画。
　　　　「bold 48px ＭＳ ゴシック」に描画フォント設定。
　　　　もし、駒[数]＜９ならば、ｘ＝37。
　　　　違えば、ｘ＝22。
　　　　ｙ＝70。　　　　　　　　　　　　#文字描画のｙは、文字の下部なのか？
　　　　もし、駒[数]＜１５ならば、
　　　　　　黒色へ塗り色設定。[ｘ,ｙ]へ駒[数]+1の文字描画。
　　　　ここまで。
　　ここまで。
ここまで。
#-----------------------------------------------------------------------

#-----駒入れ替え--------------------------------------------------------
●駒入替（方向で）
　　もし、（方向＝０）かつ(アキ／４≧１)ならば、
　　　　駒のアキとアキ-4を配列入替。
　　　　アキ＝アキ-4。
　　違えば、もし、（方向＝１）かつ(アキ／４＜３)ならば、
　　　　駒のアキとアキ+4を配列入替。
　　　　アキ＝アキ+4。
　　違えば、もし、（方向＝２）かつ(アキ％４＞０)ならば、
　　　　駒のアキとアキ-1を配列入替。
　　　　アキ＝アキ-1。
　　違えば、もし、（方向が＝３）かつ(アキ％４＜３)ならば、
　　　　駒のアキとアキ+1を配列入替。　　　　#右の駒と入れ替え
　　　　アキ＝アキ+1。
　　ここまで。
ここまで。

#なでしこ３に「配列入れ替え」はない。
●配列入替（AのIとJを）
　　II＝A[I]。JJ＝A[J]。
　　A[I]＝JJ。A[J]＝II。
ここまで。
#-----------------------------------------------------------------------

#-----マウス判定--------------------------------------------------------
●マウス押下時（Noの）
　　もし、新規ゲーム待ち＝オフならば、
　　　　もし、駒[No]＜１５ならば、
　　　　　　もし、No+4＝アキならば、０で駒入替。
　　　　　　もし、No-4＝アキならば、１で駒入替。
　　　　　　もし、No+1＝アキならば、２で駒入替。
　　　　　　もし、No-1＝アキならば、３で駒入替。
　　　　　　駒描画。完成判定。
　　　　ここまで。
　　ここまで。
　　もし、新規ゲーム待ち＝オンならば、　　　#なぜか「違えば」がうまく出来ない？
　　　　「もう一度？」で二択。
　　　　もし、それがはいならば、新規ゲーム。
　　ここまで。
ここまで。
#-----------------------------------------------------------------------

#-----完成判定----------------------------------------------------------
●完成判定
　　完成＝０。
　　数を０から１５まで繰り返す。
　　　　もし、駒[数]が数ならば、完成は完成＋１。
　　ここまで。
　　もし、完成＝１６ならば、
　　　　「canvas#cv15」のDOM要素取得。それへ描画開始。
　　　　色＝駒色[３]。「#{色}」へ塗り色設定。[0,0,駒サイズ,駒サイズ]に四角描画。
　　　　ｘ＝２５。ｙ＝６８。黒色へ塗り色設定。[ｘ,ｙ]へ「★」の文字描画。
　　　　「おめでとう！」と言う。
　　　　新規ゲーム待ち＝オン。
　　ここまで。
ここまで。
#-----------------------------------------------------------------------
    </script>

    <H1>なでしこ３で１５パズル　ver.1.01</H1>
    <HR>
      <div id="game" class="game" style="text-align: center;"></div>

　どうでしょう。問題なく同じに動いてると、思うんだけど・・

http://www.geocities.jp/snowdrops890/wnako3_test/15puzzle_1_01.html

　無理矢理感が完全に払拭されたわけでもないけど、コードのダサい見た目も解消されて行数も節約できて、そしてコレなら１００個とか作っても大丈夫・・かも？！（まぢか；）