Hatena::Groupnadesiko

雪乃☆雫のなでしこ日和

2017/09/14 (木)

なでしこ3でも15パズルを作るよ!

| 07:31 | なでしこ3でも15パズルを作るよ! - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - なでしこ3でも15パズルを作るよ! - 雪乃☆雫のなでしこ日和 なでしこ3でも15パズルを作るよ! - 雪乃☆雫のなでしこ日和 のブックマークコメント

 ちょっと無理矢理な感じもするケド、イベントが使えるようになったことで出来そう感がでてきたので、やっぱりゲームが作りたいなぁ~

 ・・・っとゆうわけで、でんせつの15パズルをなでしこ3でも作ってみたよ!

 ちなみに何が伝説かって、これがワタシが最初に作ったプログラムだったんだけど、それがなんと、の当時のなでしこコミュニティーコンテストで最優秀賞を頂戴してしまったとゆう・・・(自慢かよ!?;)

 ・・・いやしかし、一体ナゼなのか、もって分からんね;

 おらく、初心者のしろーとが、結構こだわってノリノリで作ってたので、後も精進しろよとゆうことだったに違いないね。

 っ、それはともかく15パズルです。

 そうそう、なんとなでしこ3では、「配列入れ替え」が無くなってしまったんだね。

 15パズルは基本的に、配列入れ替えをしてはそれを画面に反映するの繰り返しなのですよ。

 もっとも、考えたら、入れ替えたい二つを別々の変数に一時記憶して、ばくりっこするだけのカンタンな関数でしたが。

 とりあえず、単に15パズルの出来るver.1の段階まで。

<script type="なでしこ">

#---宣言------
駒=配列。
駒サイズ=100。
駒色=["AAAAFF","FFAAAA","FFDDAA","AAFFAA","DDDDDD"]
アキ=15。
新規ゲーム待ち=オン。

#---イベント設定------
数を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のマウス押下時。
ここまで。

●マウス押下時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のマウス押下時。
ここまで。
#-----------------------------------------------------------------------

#-----完成判定----------------------------------------------------------
●完成判定
  完成=0。
  数を0から15まで繰り返す。
    もし、駒[数]が数ならば、完成は完成+1。
  ここまで。
  もし、完成=16ならば、
    「canvas#cv15」のDOM要素取得。それへ描画開始。
    色=駒色[3]。「#{色}」へ塗り色設定。[0,0,駒サイズ,駒サイズ]に四角描画。
    x=25。y=68。黒色塗り色設定。[x,y]へ「★」の文字描画。
    「おめでとう!」と言う。
    新規ゲーム待ち=オン。
  ここまで。
ここまで。
#-----------------------------------------------------------------------
</script>



<CENTER><H1>なでしこ3で15パズル 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>

 マウスの判定が・・・・・・(爆)

 いろいろ試したけど、やっぱりこれ以外ではうまく出来なかった。

 15パズルくらいまでは、まだこれでもイイですけれどねぇ~;;;

 でもとりあえずは希望通りに、15パズルで遊ぶことは出来ます♪

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


 いちおう、またスマホにも対応してみた。

 だけど、スマホの場合は、「onmousedown」も「onclick」も同じくタップ(?)指を離した時に発動するみたいなんだよね。してスマホだと、どうしてもフリック(?)しゅっと駒を動かしたくなっちゃうんで、かえって動かないってゆうね;

 ・・・だから、なんぼでもアプリが転がってるだろとか言わないで~。折角スマホとかでも動くよ!っていうのがウリなんだから、ちょこっと試してみたいってゆうか。

 でっ、結局一番時が掛かったのは、なでしこのことではなく、幅はいいんだけど、横持ちした場合に縦(狭い方)に合わせて縮小するには一体どうしたらいいんすかってことでしたとさ;

 縦の場合は、<html>や<body>はもとより、上位の要素全てに、「height」の設定が必要となるようです。

 幅420px以下と高さ420px以下と、別っこに設定してるので、どっちも420px以下の画面では、駒の比率が変なことになりますが、んなちっちゃこい端末って、ないよね?!


 そう言えば、文字描画」のyの値は、文字の下側の値みたいなんだよね。

 なでしこ1では、x,yで左上の位置を指定することになっていたんだけど、なでしこ3では文字の左下の位置を指定しなければならないようです。

 途中で文字の大きさを変えたりした時にも文字の底辺が揃えやすいから、こっちの方がイイかもしないけど、要注意です。

canvas#nako3_canvas_1」のDOM要素取得。それへ描画開始。
赤色線色設定。白色塗り色設定。
y=24。
[0,y]から[300,y]へ描画。
黒色塗り色設定。「{y}px Aria」に描画フォント設定。
[0,y]へ「いろはにほへと」の文字描画。
「12px Aria」に描画フォント設定。
[y*7,y]へ「ちりぬるを」の文字描画

公式ページの簡易エディタで動きます。

https://nadesi.com/doc3/index.php?%E3%81%AA%E3%81%A7%E3%81%97%E3%81%933%E7%B0%A1%E6%98%93%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF

トラックバック - http://nadesiko.g.hatena.ne.jp/snowdrops89/20170914