Hatena::Groupnadesiko

雪乃☆雫のなでしこ日和

2019-08-21

SAMEGAMEを作るよ!

| 11:13

 プロデルで「さめがめ」(SAMEGAME)を作る

https://wp.utopiat.net/2019/08/597/

・・・とゆう記事が、ついったーで流れてきたので、なでしこ3でも作ってみようと思い立ったのでした。

 ぷぷぷろでる~、同じ日本語で書かれてるからって、見たら分かるってもんでも無いね;

 しかしまあ、ロジックは大体この記事の通りにやらせてもらうつもりですよ~。


 がっ。

 とりあえず、それっぽい画面を表示させてみようとしたところが、いきなりはまりましたよ(;∀;)

 まだ記事で言うところの、「ランダムの色のバブルを敷き詰める」ってなくだりです。

 まあ、敷き詰めるのは問題ありません。

 繰り返しでHTMLcanvasを連番に作ってHTML設定し、しかる後にCSSも繰り返しで設定すれば良いですね。

 だけど・・・

 マウスのイベントも、繰り返しで設定しようと思ったら、出来なかったorz

#イベントの動的な設定がうまくいかない・・・
#---設定------
駒数x=6。駒数y=9。駒数=駒数x*駒数y。
駒w=40。駒h=40。
色一覧=[赤色,青色,緑色,黄色]。
画面w=駒w*駒数x。画面h=駒h*駒数y。

#---HTML作成-----
HTML=「<div id="base"><div id="game">」
数を0から駒数-1まで繰り返す。
  HTMLHTMLに「<canvas id="cv{数}" width="{駒w}" height="{駒h}"></canvas>」を一行追加ここまで。
HTMLHTMLに「</div></div>」を一行追加。
「#nako3_div_1」にHTMLHTML設定。

#---CSS設定-----
「#base」に{
  "margin": "auto",
  "幅": "{画面w}px",
  "高さ": "{画面h}px",
  "border": "5px solid #999999"
}をDOMスタイル一括設定。
「#game」に{
  "position": "absolute"
}をDOMスタイル一括設定。

数を0から駒数-1まで繰り返す。
 駒x=数%駒数x*駒h。
 駒y=((数/駒数x)を切捨)*駒w。
 色番号=4の乱数。

 「#cv{数}」に{
  "position": "absolute",
  "z-index": "1",
  "top": "{駒y}px",
  "left": "{駒x}px",
  "background-color": "#FFFFFF",
  }をDOMスタイル一括設定。

 「#cv{数}」へ描画開始。
 色一覧[色番号]に塗り色設定。
 [駒w/2,駒h/2]へ駒w/2の描画。

 #---イベント-----
 「#cv{数}」をクリックした時には、
   数を駒消去。//数を言う。
 ここまで。
ここまで。

●(Noを)駒消去
 「#cv{No}」へ描画開始。
 白色塗り色設定。
 [駒w/2,駒h/2]へ駒w/2の描画。
ここまで。

http://snowdrops.starfree.jp/wnako3_test/19_samegame0.html

 どこをクリックしても、一番右下の駒の色が変わっちゃうんだよね。

 どうやら、「クリックした時には」の中の「数」は、実際にクリックされた時の「数」の値になるっぽい。

 繰り返しが完了した最後の値が適用されるんだから、右下になっちゃう道理です。

 よく考えたら、なでしこ1でも動的に作ったGUIは扱いが違ったのだし、ふつーには出来ないことなのかも知れない

 しかし、どうすりゃいいんだ?

 よくわからん(@_@)

 結構なんだかんだしたんだけど、頭悪すぎて全くひらめかないので、やはり、15パズルの時からの伝家の宝刀、「ナデシコする」でやっちゃいますよ!w

#① ランダムの色のバブルを敷き詰める
#---設定------
駒数x=6。駒数y=9。駒数=駒数x*駒数y。
駒w=40。駒h=40。
色一覧=[赤色,青色,緑色,黄色]。
画面w=駒w*駒数x。画面h=駒h*駒数y。

#---HTML作成-----
マウス押下関数HTML=「<div id="base"><div id="game">」
数を0から駒数-1まで繰り返す。
  マウス押下関数=マウス押下関数に「●マウス押下時{数}{改行}  {数}を駒消去。{改行}ここまで。{改行}{改行}」を一行追加。
  HTMLHTMLに「<canvas id="cv{数}" width="{駒w}" height="{駒h}"></canvas>」を一行追加ここまで。
HTMLHTMLに「</div></div>」を一行追加。
マウス押下関数ナデシコする。
「#nako3_div_1」にHTMLHTML設定。

#---CSS設定-----
「#base」に{
  "margin": "auto",
  "幅": "{画面w}px",
  "高さ": "{画面h}px",
  "border": "5px solid #999999"
}をDOMスタイル一括設定。
「#game」に{
  "position": "absolute"
}をDOMスタイル一括設定。

数を0から駒数-1まで繰り返す。
 駒x=数%駒数x*駒h。
 駒y=((数/駒数x)を切捨)*駒w。
 色番号=4の乱数。

 「#cv{数}」に{
  "position": "absolute",
  "z-index": "1",
  "top": "{駒y}px",
  "left": "{駒x}px",
  "background-color": "#FFFFFF",
  }をDOMスタイル一括設定。

 「#cv{数}」へ描画開始。
 色一覧[色番号]に塗り色設定。
 [駒w/2,駒h/2]へ駒w/2の描画。

 #---イベント-----
 「#cv{数}」の「onclick」に「マウス押下時{数}」をDOMイベント設定。
ここまで。

●(Noを)駒消去
 「#cv{No}」へ描画開始。
 白色塗り色設定。
 [駒w/2,駒h/2]へ駒w/2の描画。
ここまで。

 DOMイベント設定は度、引数ある関数が呼べないっぽいので、関数を呼ぶためだけの関数を繰り返しでテキストに作り、ナデシコするとゆう無理矢理系です~;

http://snowdrops.starfree.jp/wnako3_test/19_samegame0.html

 取りあえず、それっぽい画面を表示して、クリックしたら、の駒の色が変わるってだけのこってす。

 元の記事では、駒を二次元配列で扱っていましたが、canvasのIDを連番で設定して操作したい都合上、一次元配列にしています。

 これを、X軸の駒数で割った余りがx、割った整数部分がyですぞ。

 駒数xを+-すれば、Yを+-しているのと同じコトになりますよ。

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