Hatena::Groupnadesiko

雪乃☆雫のなでしこ日和

2017/09/15 (金)

15パズル改 ~canvasと関数を動的に(?)作るよ!

| 08:31 | 15パズル改 ~canvasと関数を動的に(?)作るよ! - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - 15パズル改 ~canvasと関数を動的に(?)作るよ! - 雪乃☆雫のなでしこ日和 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