2019-08-21
SAMEGAMEを作るよ！
プロデルで「さめがめ」(SAMEGAME)を作る
https://wp.utopiat.net/2019/08/597/
・・・とゆう記事が、ついったーで流れてきたので、なでしこ３でも作ってみようと思い立ったのでした。
ぷぷぷろでる～、同じ日本語で書かれてるからって、見たら分かるってもんでも無いね；
しかしまあ、ロジックは大体この記事の通りにやらせてもらうつもりですよ～。
がっ。
とりあえず、それっぽい画面を表示させてみようとしたところが、いきなりはまりましたよ(；∀；)
まだ記事で言うところの、「ランダムの色のバブルを敷き詰める」ってなくだりです。
まあ、敷き詰めるのは問題ありません。
「繰り返し」と「一行追加」でHTMLのcanvasを連番に作って「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まで繰り返す。 HTML＝HTMLに「<canvas id="cv{数}" width="{駒w}" height="{駒h}"></canvas>」を一行追加。 ここまで。 HTML＝HTMLに「</div></div>」を一行追加。 「#nako3_div_1」にHTMLをHTML設定。 #---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
どこをクリックしても、一番右下の駒の色が変わっちゃうんだよね。
どうやら、「クリックした時には」の中の「数」は、実際にクリックされた時の「数」の値になるっぽい（？）
繰り返しが完了した最後の値が適用されるんだから、右下になっちゃう道理です。
よく考えたら、なでしこ１でも動的に作ったGUIは扱いが違ったのだし、ふつーには出来ないことなのかも知れない。
しかし、どうすりゃいいんだ？
よくわからん（＠＿＠）
結構なんだかんだしたんだけど、頭悪すぎて全くひらめかないので、やはり、１５パズルの時からの伝家の宝刀、「ナデシコする」でやっちゃいますよ！ｗ
#① ランダムの色のバブルを敷き詰める #---設定------ 駒数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まで繰り返す。 マウス押下関数＝マウス押下関数に「●マウス押下時{数}{改行} {数}を駒消去。{改行}ここまで。{改行}{改行}」を一行追加。 HTML＝HTMLに「<canvas id="cv{数}" width="{駒w}" height="{駒h}"></canvas>」を一行追加。 ここまで。 HTML＝HTMLに「</div></div>」を一行追加。 マウス押下関数をナデシコする。 「#nako3_div_1」にHTMLをHTML設定。 #---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を＋－しているのと同じコトになりますよ。