2017/09/14 (木)
なでしこ３でも１５パズルを作るよ！
ちょっと無理矢理な感じもするケド、イベントが使えるようになったことで出来そう感がでてきたので、やっぱりゲームが作りたいなぁ～
・・・っとゆうわけで、でんせつの１５パズルをなでしこ３でも作ってみたよ！
ちなみに何が伝説かって、これがワタシが最初に作ったプログラムだったんだけど、それがなんと、その当時のなでしこコミュニティーコンテストで最優秀賞を頂戴してしまったとゆう・・・（自慢かよ！？；）
・・・いやしかし、一体ナゼなのか、今もって分からんね；
おそらく、初心者のしろーとが、結構こだわってノリノリで作ってたので、今後も精進しろよとゆうことだったに違いないね。
そうそう、なんとなでしこ３では、「配列入れ替え」が無くなってしまったんだね。
１５パズルは基本的に、配列入れ替えをしてはそれを画面に反映するの繰り返しなのですよ。
もっとも、考えたら、入れ替えたい二つを別々の変数に一時記憶して、ばくりっこするだけの超カンタンな関数でしたが。
とりあえず、単に１５パズルの出来るver.1の段階まで。
<script type="なでしこ"> #---宣言------ 駒＝空配列。 駒サイズ＝１００。 駒色＝["AAAAFF","FFAAAA","FFDDAA","AAFFAA","DDDDDD"] アキ＝１５。 新規ゲーム待ち＝オン。 #---イベント設定------ 数を０から１５まで繰り返す。 「#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＝アキならば、３で駒入替。 駒描画。完成判定。 ここまで。 ここまで。 もし、新規ゲーム待ち＝オンならば、 #なぜか「違えば」がうまく出来ない？ 「もう一度？」で二択。 もし、それがはいならば、新規ゲーム。 ここまで。 ここまで。 ●マウス押下時0 0のマウス押下時。 ここまで。 ●マウス押下時1 1のマウス押下時。 ここまで。 ●マウス押下時2 2のマウス押下時。 ここまで。 ●マウス押下時3 3のマウス押下時。 ここまで。 ●マウス押下時4 4のマウス押下時。 ここまで。 ●マウス押下時5 5のマウス押下時。 ここまで。 ●マウス押下時6 6のマウス押下時。 ここまで。 ●マウス押下時7 7のマウス押下時。 ここまで。 ●マウス押下時8 8のマウス押下時。 ここまで。 ●マウス押下時9 9のマウス押下時。 ここまで。 ●マウス押下時10 10のマウス押下時。 ここまで。 ●マウス押下時11 11のマウス押下時。 ここまで。 ●マウス押下時12 12のマウス押下時。 ここまで。 ●マウス押下時13 13のマウス押下時。 ここまで。 ●マウス押下時14 14のマウス押下時。 ここまで。 ●マウス押下時15 15のマウス押下時。 ここまで。 #----------------------------------------------------------------------- #-----完成判定---------------------------------------------------------- ●完成判定 完成＝０。 数を０から１５まで繰り返す。 もし、駒[数]が数ならば、完成は完成＋１。 ここまで。 もし、完成＝１６ならば、 「canvas#cv15」のDOM要素取得。それへ描画開始。 色＝駒色[３]。「#{色}」へ塗り色設定。[0,0,駒サイズ,駒サイズ]に四角描画。 ｘ＝２５。ｙ＝６８。黒色へ塗り色設定。[ｘ,ｙ]へ「★」の文字描画。 「おめでとう！」と言う。 新規ゲーム待ち＝オン。 ここまで。 ここまで。 #----------------------------------------------------------------------- </script> <CENTER><H1>なでしこ３で１５パズル ver.1</H1></CENTER> <div class="game" style="text-align: center;"> <canvas id="cv0" width="100" height="100"></canvas> <canvas id="cv1" width="100" height="100"></canvas> <canvas id="cv2" width="100" height="100"></canvas> <canvas id="cv3" width="100" height="100"></canvas> <BR> <canvas id="cv4" width="100" height="100"></canvas> <canvas id="cv5" width="100" height="100"></canvas> <canvas id="cv6" width="100" height="100"></canvas> <canvas id="cv7" width="100" height="100"></canvas> <BR> <canvas id="cv8" width="100" height="100"></canvas> <canvas id="cv9" width="100" height="100"></canvas> <canvas id="cv10" width="100" height="100"></canvas> <canvas id="cv11" width="100" height="100"></canvas> <BR> <canvas id="cv12" width="100" height="100"></canvas> <canvas id="cv13" width="100" height="100"></canvas> <canvas id="cv14" width="100" height="100"></canvas> <canvas id="cv15" width="100" height="100"></canvas> </div>
マウスの判定が・・・・・・（爆）
いろいろ試したけど、やっぱりこれ以外ではうまく出来なかった。
１５パズルくらいまでは、まだこれでもイイですけれどねぇ～；；；
でもとりあえずは希望通りに、１５パズルで遊ぶことは出来ます♪
http://www.geocities.jp/snowdrops890/wnako3_test/15puzzle_1_00.html
いちおう、またスマホにも対応してみた。
だけど、スマホの場合は、「onmousedown」も「onclick」も同じくタップ（？）指を離した時に発動するみたいなんだよね。そしてスマホだと、どうしてもフリック（？）しゅっと駒を動かしたくなっちゃうんで、かえって動かないってゆうね；
・・・だから、なんぼでもアプリが転がってるだろとか言わないで～。折角スマホとかでも動くよ！っていうのがウリなんだから、ちょこっと試してみたいってゆうか。
でっ、結局一番時間が掛かったのは、なでしこのことではなく、幅はいいんだけど、横持ちした場合に縦（狭い方）に合わせて縮小するには一体どうしたらいいんすかってことでしたとさ；
縦の場合は、<html>や<body>はもとより、上位の要素全てに、「height」の設定が必要となるようです。
幅420px以下と高さ420px以下と、別っこに設定してるので、どっちも420px以下の画面では、駒の比率が変なことになりますが、そんなちっちゃこい端末って、ないよね？！
そう言えば、「文字描画」のｙの値は、文字の下側の値みたいなんだよね。
なでしこ１では、x,yで左上の位置を指定することになっていたんだけど、なでしこ３では文字の左下の位置を指定しなければならないようです。
途中で文字の大きさを変えたりした時にも文字の底辺が揃えやすいから、こっちの方がイイかもしれないけど、要注意です。
「canvas#nako3_canvas_1」のDOM要素取得。それへ描画開始。 赤色に線色設定。白色に塗り色設定。 y=24。 [0,y]から[300,y]へ線描画。 黒色に塗り色設定。「{y}px Aria」に描画フォント設定。 [0,y]へ「いろはにほへと」の文字描画。 「12px Aria」に描画フォント設定。 [y*7,y]へ「ちりぬるを」の文字描画。
公式ページの簡易エディタで動きます。
