2017-09-15
15パズル改 ~canvasと関数を動的に(?)作るよ!
ひっ、ひらめきました!w
DOMイベント設定に指定する関数には引数がつけれないっぽいとか、DOM要素作成でcanvasを作ると、後から(実際の)サイズは変えれないラシイとか、いろいろと散々ぼやいた末に、ほぼヤケクソでマウスクリックようの関数と<canvas>タグをそれぞれ16個並べて無理矢理感満載の15パズルを作ったわけですが・・・
DOM_HTML設定はDOM_HTML設定で、上書きで前のが消えてしまうから出来ないと思っていたんだけど、何のことは無い、変数に一行追加で作っていって、最後にまとめてDOM_HTML設定すればいいんじゃ?!
そしてそして、関数の方も同様にして「ナデシコする」で設置できました!
そっこー書き換え(^▽^;;
<script type="なでしこ"> #---宣言------ 駒=空配列。 駒サイズ=100。 駒色=["AAAAFF","FFAAAA","FFDDAA","AAFFAA","DDDDDD"] アキ=15。 新規ゲーム待ち=オン。 #---canvasとマウス押下関数の設置------ ※ ココです★ マウス押下関数=空。 キャンバスHTML=空。 数を0から15まで繰り返す。 マウス押下関数=マウス押下関数に「●マウス押下時{数}{改行} {数}のマウス押下時。{改行}ここまで。{改行}{改行}」を一行追加。 もし、回数%4=0ならば、 キャンバス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設定 #---イベント設定------ 数を0から15まで繰り返す。 「#cv{数}」の「onmousedown」に「マウス押下時{数}」をDOMイベント設定。 ここまで。 新規ゲーム。 #-----新規ゲーム-------------------------------------------------------- ●新規ゲーム #---初期化------ アキ=15。 #アキ位置を初期化。 数を0から15まで繰り返す。 #駒位置を初期化 駒[数]=数。 ここまで。 #---問題作成------ 1000回 rは4の乱数。rで駒入替。 ここまで。 駒描画。新規ゲーム待ち=オフ。 ここまで。 ●駒描画 #---画面描画------ 数を0から15まで繰り返す。 「canvas#cv{数}」のDOM要素取得。それへ描画開始。 もし、駒[数]<15ならば、色=駒色[駒[数]/4を切捨] 違えば、色=駒色[4] 「#{色}」へ塗り色設定。[0,0,駒サイズ,駒サイズ]に四角描画。 「bold 48px MS ゴシック」に描画フォント設定。 もし、駒[数]<9ならば、x=37。 違えば、x=22。 y=70。 #文字描画のyは、文字の下部なのか? もし、駒[数]<15ならば、 黒色へ塗り色設定。[x,y]へ駒[数]+1の文字描画。 ここまで。 ここまで。 ここまで。 #----------------------------------------------------------------------- #-----駒入れ替え-------------------------------------------------------- ●駒入替(方向で) もし、(方向=0)かつ(アキ/4≧1)ならば、 駒のアキとアキ-4を配列入替。 アキ=アキ-4。 違えば、もし、(方向=1)かつ(アキ/4<3)ならば、 駒のアキとアキ+4を配列入替。 アキ=アキ+4。 違えば、もし、(方向=2)かつ(アキ%4>0)ならば、 駒のアキとアキ-1を配列入替。 アキ=アキ-1。 違えば、もし、(方向が=3)かつ(アキ%4<3)ならば、 駒のアキとアキ+1を配列入替。 #右の駒と入れ替え アキ=アキ+1。 ここまで。 ここまで。 #なでしこ3に「配列入れ替え」はない。 ●配列入替(AのIとJを) II=A[I]。JJ=A[J]。 A[I]=JJ。A[J]=II。 ここまで。 #----------------------------------------------------------------------- #-----マウス判定-------------------------------------------------------- ●マウス押下時(Noの) もし、新規ゲーム待ち=オフならば、 もし、駒[No]<15ならば、 もし、No+4=アキならば、0で駒入替。 もし、No-4=アキならば、1で駒入替。 もし、No+1=アキならば、2で駒入替。 もし、No-1=アキならば、3で駒入替。 駒描画。完成判定。 ここまで。 ここまで。 もし、新規ゲーム待ち=オンならば、 #なぜか「違えば」がうまく出来ない? 「もう一度?」で二択。 もし、それがはいならば、新規ゲーム。 ここまで。 ここまで。 #----------------------------------------------------------------------- #-----完成判定---------------------------------------------------------- ●完成判定 完成=0。 数を0から15まで繰り返す。 もし、駒[数]が数ならば、完成は完成+1。 ここまで。 もし、完成=16ならば、 「canvas#cv15」のDOM要素取得。それへ描画開始。 色=駒色[3]。「#{色}」へ塗り色設定。[0,0,駒サイズ,駒サイズ]に四角描画。 x=25。y=68。黒色へ塗り色設定。[x,y]へ「★」の文字描画。 「おめでとう!」と言う。 新規ゲーム待ち=オン。 ここまで。 ここまで。 #----------------------------------------------------------------------- </script> <H1>なでしこ3で15パズル 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
無理矢理感が完全に払拭されたわけでもないけど、コードのダサい見た目も解消されて行数も節約できて、そしてコレなら100個とか作っても大丈夫・・かも?!(まぢか;)
コメントを書く
トラックバック - http://nadesiko.g.hatena.ne.jp/snowdrops89/20170915
リンク元
- 14 https://www.google.co.jp/
- 5 http://www.eznavi.net/bbs/index2.php?pagetop=304&only=one
- 4 http://nadesiko.g.hatena.ne.jp/keyword/メニュー一括作成
- 2 http://nadesiko.g.hatena.ne.jp/keyword/窓最前面
- 2 http://nadesiko.g.hatena.ne.jp/keyword/違えば
- 2 http://nadesiko.g.hatena.ne.jp/keyword/フォルダ選択
- 2 http://nadesiko.g.hatena.ne.jp/
- 1 http://search.yahoo.co.jp/
- 1 https://nadesiko.g.hatena.ne.jp/keyword/これ
- 1 http://www.google.co.jp/search?q=なでしこ+非同期&lr=lang_ja&hl=ja&tbs=lr:lang_1ja