Hatena::Groupnadesiko

雪乃☆雫のなでしこ日和

2019-08-30

なでしこ3で画面サイズの取得

| 10:25

 前に、画面のサイズに合わせてSameGameの駒数の上限を決められるようにできるだろうかとゆうことを書いたんだけど、どうもそうゆう命令は無いっぽかった。

 でも、それJavascriptで行う術を発見したので、JS実行で簡単にできるように出来そうだよ☆

 とゆうワケで、こんな感じ。

#-----------------------------------------------
#デスクトップの幅と高さ
#https://javascript.programmer-reference.com/js-window-screen-width-height/
#-----------------------------------------------
「※ディスプレイのサイズ」を表示
デスクトップ幅を表示デスクトップ高さを表示。

●デスクトップ幅
  「window.screen.width」をJS実行。
ここまで。

●デスクトップ高さ
  「window.screen.height」をJS実行。
ここまで。

 これで十分なんとか出来そうだけど、続いて、ブラウザのサイズを得る命令もあったので、それもやってみる。

#-----------------------------------------------
#ブラウザの幅と高さ
#https://javascript.programmer-reference.com/js-window-outerwidth-innerwidth/
#-----------------------------------------------
「※ブラウザ全体の横幅と縦幅」を表示ブラウザ全体幅を表示ブラウザ全体高さを表示。

「※ブラウザ表示領域の横幅と縦幅」を表示ブラウザ内部幅を表示ブラウザ内部高さを表示。

#ブラウザ全体の横幅と縦幅を取得する
●ブラウザ全体幅
  「window.outerWidth」をJS実行。
ここまで。

●ブラウザ全体高さ
  「window.outerHeight」をJS実行。
ここまで。

#ブラウザ表示領域の横幅と縦幅を取得する
●ブラウザ内部幅
  「window.innerWidth」をJS実行。
ここまで。

●ブラウザ内部高さ
  「window.innerHeight」をJS実行。
ここまで。

 ところが、ブラウザ表示領域、というのにはスクロールバーも含まれるらしい。

 含まれないようには出来ないのかなーと思ったら、ありました!

 てゆうか、めちゃくちゃいろんな種類が・・・(@_@)

 取りあえず、幅も高さも共通して「ブラウザ内の表示域(スクロールバーを除く)」となっているのはコレだった。

#-----------------------------------------------
#ブラウザ内の表示域(スクロールバーを除く)
#https://web-designer.cman.jp/javascript_ref/window/size/
#-----------------------------------------------
「※ブラウザ内の表示域(スクロールバーを除く)」を表示。
クライアント幅を表示。
クライアント高さを表示。

●クライアント幅
  「document.documentElement.clientWidth」をJS実行。
ここまで。

●クライアント高さ
  「document.documentElement.clientHeight」をJS実行。
ここまで。

 ひとまず、このくらい出来たら良いかな?

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

2019-08-29

なで☆がめ ver.1 とりあえず完成~☆

| 16:09

 ナゾは解明しないけど、取りあえず、スコアを表示する欄と、成績表表示機能を付け、体裁を整えてver.1の完成だ~。(とゆうことにするw)

#なで☆がめ ver.1
#---設定----------------------------------------
駒数x=6。駒数y=9。駒数=駒数x*駒数y。
駒w=40。駒h=40。駒色=配列。消駒=配列。
画面w=駒w*駒数x。画面h=駒h*駒数y。

余白=20。部品間隔=10。ラベル高さ=30。メニュー高さ=25。
母艦w=画面w+余白*2。母艦h=画面h+余白+部品間隔*2+ラベル高さ+メニュー高さ。

色一覧=["",["#FF6699","♥"],["#8888FF","♣"],["#66EE66","♠"],["#FFCC66","♦"]]。
探索済一覧=配列。消色=。個数=0。スコア=0。
終了フラグ=オフ。カウンタ=0。順位=0。
成績=配列。ハイスコア表示件数=10。ハイスコアフラグ=0。

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

#---CSS設定-------------------------------------
「#base」に{
  "margin": "auto",
  "幅": "{母艦w}px",
  "高さ": "{母艦h}px",
  "border": "5px ridge #999999",
  "背景色": "#FFDDCC",
}をDOMスタイル一括設定。
「#bokan」に{
  "position": "absolute"
}をDOMスタイル一括設定。

「#game」に{
  "position": "absolute",
  "幅": "{画面w+2}px",
  "高さ": "{画面h+2}px",
  "top": "{母艦h-画面h-余白-メニュー高さ}px",
  "左": "{余白}px",
  "背景色": "#FFFFFF",
}をDOMスタイル一括設定。

数を0から駒数-1まで繰り返す。
 駒x=数%駒数x*駒h。
 駒y=((数/駒数x)を切捨)*駒w。
 「#cv{数}」に{
  "position": "absolute",
  "z-index": "1",
  "幅": "{駒w-2}px",
  "高さ": "{駒h-2}px",
  "top": "{駒y}px",
  "left": "{駒x}px",
  "border": "2px solid #FFFFFF",
  "border-radius": "0.5em",
  "font-size": "30px"
  "font-weight": "nomal",
  "cursor": "default",
  "色": "#FFFFFF",
  "text-align": "center",
  }をDOMスタイル一括設定。

 #---イベント-----
 探索済一覧[数]=0。
 「#cv{数}」の「onclick」に「マウス押下時{数}」をDOMイベント設定。
ここまで。

#---GUI作成-------------------------------------
「#bokan」へDOM親要素設定。

#---スコア表示-----
「SCORE」のラベル作成して、スコアラベル代入。
スコアラベルに{
  "position": "absolute",
  "幅": "95px",
  "高さ": "{ラベル高さ}px",
  "top": "{部品間隔}px",
  "left": "{余白}px",
  "font-size": "24px",
  "font-weight": "bold",
  "色": "#CC4433",
  "text-shadow": "2px 2px 1px #FFFFFF";  /* 水平方向の距離,垂直方向の距離,影のぼかし半径,影の色*/
}をDOMスタイル一括設定。

「{スコア}」のラベル作成して、スコア表示代入。
スコア表示に{
  "position": "absolute",
  "幅": "80px",
  "高さ": "{ラベル高さ}px",
  "top": "{部品間隔}px",
  "left": "115px",
  "padding": "0px 10px",  /* 上下、左右*/
  "font-size": "24px",
  "font-weight": "bold",
  "背景色": "#FFEEDD",
  "色": "#882211",
  "text-align": "right",
}をDOMスタイル一括設定。

#---ゲームオーバー表示-----
「GAME OVER」のラベル作成して、ゲームオーバー代入。
ゲームオーバーに{
  "position": "absolute",
  "幅": "{母艦w-20}px",
  "高さ": "100px",
  "top": "{母艦h/2-100}px",
  "left": "0px",
  "padding": "30px 10px",  /* 上下、左右*/
  "font-size": "24px",
  "font-weight": "bold",
  "背景色": "rgba(0, 0, 0, 0.7)",
  "色": "#FFEEEE",
  "text-align": "center",
  "z-index": "-1",
  "transition": "opacity 0.5s, transform 0.5s",    /* 0.5秒かけて透明度とサイズの変化 */
  "opacity": "0",
  "transform": "scale(0.1)",    /* 0.1に縮小 */
}をDOMスタイル一括設定。

「もう一度?」のボタン作成して、リトライボタン代入。
リトライボタンに{
  "position": "absolute",
  "幅": "100px",
  "top": "{母艦h/2+10}px",
  "左": "{母艦w/2-50}px",
  "z-index": "-1",
}をDOMスタイル一括設定。
リトライボタンをクリックした時には、
  オフにゲームオーバー表示。
  新規ゲーム。
ここまで。

#---メニューボタン-----
「成績表示」のボタン作成して、成績表示ボタン代入。
成績表示ボタンに{
  "position": "absolute",
  "幅": "80px",
  "高さ": "25px",
  "左": "0px",
  "top": "{母艦h-25}px",
}をDOMスタイル一括設定。
成績表示ボタンをクリックした時には、
  順位でハイスコア表示ここまで。

「リセット」のボタン作成して、成績リセットボタン代入。
成績リセットボタンに{
  "position": "absolute",
  "幅": "80px",
  "高さ": "25px",
  "左": "80px",
  "top": "{母艦h-25}px",
}をDOMスタイル一括設定。
成績リセットボタンをクリックした時には、
  成績リセット。
ここまで。

「遊び方」のボタン作成して、ルールボタン代入。
ルールボタンに{
  "position": "absolute",
  "幅": "60px",
  "高さ": "25px",
  "左": "{母艦w-60}px",
  "top": "{母艦h-25}px",
}をDOMスタイル一括設定。
ルールボタンをクリックした時には、
 「いわゆるSameGameのルール。
駒をクリックすると、それと上下左右で隣接する同じ色の駒が一緒に消えます。
消せる駒が無くなったらゲームオーバー。
同時に消える駒が多ければ多いほど高得点になりますが、画面上から全ての駒を消すことが出来ればボーナス点が入りますので、よく考えて全消しを目指しましょう。(必ず全消し出来るわけではありませんが)」と言うここまで。


#---成績読み込み--------------------------------
//「なで☆がめ成績表」のローカルストレージキー削除。
成績=「なで☆がめ成績表」をローカルストレージ読むもし、(成績=undefined)または(成績=ならば、成績初期化。

#-----------------------------------------------
新規ゲーム。
●新規ゲーム
 終了フラグはオフ。順位=0。
 スコア=0。スコア表示にスコアをテキスト設定。
 数を0から駒数-1まで繰り返す。
  色番号=4の乱数。
  駒色[数]=色番号+1。
  数へ駒描画。
 ここまで。
ここまで。

●(Noの)マウス押下時。
 消色=駒色[No]。個数=1。消駒=配列。  //初期化。
 もし終了フラグ=オフならば、
  もし、駒色[No]=でなければ、
   Noの同色探索。駒詰。全駒再描画。
   スコア=スコア+(個数-1)^2。
   スコア表示にスコアをテキスト設定。
   もし、(終了判定)がはいならば、
    終了フラグはオン終了処理。
   ここまで。
  ここまで。
 ここまで。
ここまで。

●終了処理
    もし、(全消判定)がはいならば、
     ゲームオーバーの「色」に「#FFDDDD」をDOMスタイル設定。
     ゲームオーバーに「全消し!<BR>Bonus +100」をテキスト設定。
     オンにゲームオーバー表示。
     //全消しボーナス
     カウンタ=0。
     1.3秒後には、
      0.01秒タイマー開始した時には(タイマーID)
       スコア=スコア+1。カウンタ=カウンタ+1。
       スコア表示にスコアをテキスト設定。
       もし、カウンタ=100ならば、
         タイマーIDのタイマー停止。
         0.5秒後には
          最終処理。
         ここまで。
       ここまで。
      ここまで。
     ここまで。
    違えば、
     ゲームオーバーの「色」に「#DDDDFF」をDOMスタイル設定。
     ゲームオーバーに「GAME OVER」をテキスト設定。
     オンにゲームオーバー表示。
     0.5秒後には
       最終処理。
     ここまで。
    ここまで。
ここまで。

●最終処理
 成績記録。順位はそれ。
 リトライボタンの「z-index」に「3」をDOMスタイル設定。
 もし、順位=0でなければ、順位でハイスコア表示ここまで。

●(Aに)ゲームオーバー表示
  もし、A=オンならば、
    ゲームオーバーの「z-index」に「2」をDOMスタイル設定。
    ゲームオーバーの「opacity」に「1」をDOMスタイル設定。
    ゲームオーバーの「transform」に「scale(1)」をDOMスタイル設定。
  違えば、
    ゲームオーバーの「opacity」に「0」をDOMスタイル設定。
    ゲームオーバーの「transform」に「scale(0.1)」をDOMスタイル設定。
    リトライボタンの「z-index」に「-1」をDOMスタイル設定。
  ここまで。
ここまで。

●(順位で)ハイスコア表示
  ハイスコア=「  ★☆★ ハイスコア ★☆★{改行}{改行}」。
  (ハイスコア表示件数)
    順=回数。
    もし、順位=順ならば=「★」
    違えば。
    得点=成績[順-1][0]。
    もし、得点=ならば、得点=「----」。
    違えば、得点=「{得点}」を3で文字列右寄せ。
    日付=成績[順-1][1]
    もし、日付=ならば、日付=「------/----/----」。
    順=「{順}」を2で文字列右寄せ。
    ハイスコア=ハイスコアに「{順}位 {得点}点 {日付} {}」を一行追加。
  ここまで。
  ハイスコアを言うここまで。

●(Sを数で)文字列右寄せ
  スペース=。
  もし、(Sの文字数)<数ならば、
   (数-(Sの文字数))
    スペース=スペースに「  」を追加。
   ここまで。
  ここまで。
  スペース&Sで戻るここまで。
#-----------------------------------------------
●成績記録
  順位=0。
  数を(ハイスコア表示件数)から1まで繰り返す。
    もし、(成績[数-1][0]<スコア)または(成績[数-1][0]=)ならば、
      順位=数。
    違えば、
      抜ける。
    ここまで。
  ここまで。
  数を(ハイスコア表示件数)から1まで繰り返す。
    もし、順位=0でなければ、
      もし、順位<数ならば、
        成績[数-1]=成績[数-2]。
      違えばもし、順位=数ならば、
        成績[数-1]=[スコア,"{今日}","{駒数x}×{駒数y}"]。
        抜ける。
      ここまで。
    ここまで。
  ここまで。
  「なで☆がめ成績表」に成績をローカルストレージ保存。
  順位で戻るここまで。

●成績リセット
  「成績をリセットしてもいい?」と二択。
  もしそれはいならば、成績初期化。
ここまで。

●成績初期化
  成績=配列。
  (ハイスコア表示件数)
    C=回数-1
    成績[C]=配列。
    3
      成績[C][回数-1]=。
    ここまで。
  ここまで。
  「なで☆がめ成績表」に成績をローカルストレージ保存ここまで。
#-----------------------------------------------
●(Noの)同色探索
 X=No%駒数x。Y=(No/駒数x)を切捨。
 もし、(探索済一覧[No]=1)または、(駒色[No]=)ならば、
   戻る。
 違えば、
   探索済一覧[No]=1。
   # 上下左右に同じ色の駒があるかどうかチェックする
   もし、(X-1≧0)かつ(駒色[No-1]=消色)かつ(探索済一覧[No-1]≠1)ならば、        #左
     個数=個数+1。(No-1)の同色探索。
   ここまで。
   もし、(X+1<駒数x)かつ(駒色[No+1]=消色)かつ(探索済一覧[No+1]≠1)ならば、      #右
     個数=個数+1。(No+1)の同色探索。
   ここまで。
   もし、(Y-1≧0)かつ(駒色[No-駒数x]=消色)かつ(探索済一覧[No-駒数x]≠1)ならば、    #上
     個数=個数+1。(No-駒数x)の同色探索。
   ここまで。
   もし、(Y+1<駒数y)かつ(駒色[No+駒数x]=消色)かつ(探索済一覧[No+駒数x]≠1)ならば、  #下
     個数=個数+1。(No+駒数x)の同色探索。
   ここまで。
   もし、個数=1でなければ、
     駒色[No]=。消駒[No]=1。
   ここまで。
   戻る。
 ここまで。
ここまで。

●駒詰
 # 消えた分だけ下に詰める
 Noを駒数xから駒数-1まで繰り返す。
  Y=(No/駒数x)を切捨。
  もし、(消駒[No]=1)ならば、
    # 上部の駒を1個下にずらす。
    移動元=No-駒数x。移動先=No。
    (Y)   #上部に残ってる駒の数。
      駒色[移動先]=駒色[移動元]。
      駒色[移動元]=。
      移動元=移動元-駒数x。移動先=移動先-駒数x。
    ここまで。
  ここまで。
 ここまで。

 #全部消えた列を左に詰める
 Noを(駒数-2)から(駒数-駒数x)まで繰り返す。  #一番下がなら全部消えてる
  X=No%駒数x+1。
  もし、(駒色[No]=)ならば、
    移動元=No+1。移動先=No。
    (駒数x-X)    #右側に残ってる列数。
      (駒数y)    #一列全てをずらす。
        駒色[移動先-駒数x*(回数-1)]=駒色[移動元-駒数x*(回数-1)]。
        駒色[移動元-駒数x*(回数-1)]=。
      ここまで。
      移動元=移動元+1。移動先=移動先+1。
    ここまで。
  ここまで。
 ここまで。
ここまで。

●終了判定
 Noを0から駒数-1まで繰り返す。
  X=No%駒数x。Y=(No/駒数x)を切捨。
  もし、駒色[No]=でなければ、
   # 上下左右に同じ色の駒があるかどうかチェックする
   もし、X=0ならば、         #左端
    もし、(駒色[No]=駒色[No+1])または(駒色[No]=駒色[No-駒数x])または(駒色[No]=駒色[No+駒数x])ならば、
     いいえ戻る。
    ここまで。
   違えばもし、X=駒数x-1ならば、   #右端
    もし、(駒色[No]=駒色[No-1])または(駒色[No]=駒色[No-駒数x])または(駒色[No]=駒色[No+駒数x])ならば、
     いいえ戻る。
    ここまで。
   違えばもし、Y=0ならば、     #上端
    もし、(駒色[No]=駒色[No-1])または(駒色[No]=駒色[No+1])または(駒色[No]=駒色[No+駒数x])ならば、
     いいえ戻る。
    ここまで。
   違えばもし、Y=駒数y-1ならば、   #下端
    もし、(駒色[No]=駒色[No-1])または(駒色[No]=駒色[No+1])または(駒色[No]=駒色[No-駒数x])ならば、
     いいえ戻る。
    ここまで。
   違えば、
    もし、(駒色[No]=駒色[No-1])または(駒色[No]=駒色[No+1])または(駒色[No]=駒色[No-駒数x])または(駒色[No]=駒色[No+駒数x])ならば、
     いいえ戻る。
    ここまで。
   ここまで。
  ここまで。
 ここまで。
 はい戻るここまで。

●全消判定
 Noを0から駒数-1まで繰り返す。
  もし、駒色[No]=でなければ、
    いいえ戻る。
  ここまで。
 ここまで。
 はい戻るここまで。
#-----------------------------------------------
●全駒再描画
  Noを0から駒数-1まで繰り返す。
   探索済一覧[No]=0。
   もし、駒色[No]=ならば、
     Noを駒消去。
   違えば、
     Noへ駒描画。
   ここまで。
  ここまで。
ここまで。

●(Noへ)駒描画
 色番号=駒色[No]。
 「#cv{No}」の「背景色」に色一覧[色番号][0]をDOMスタイル設定。
 「#cv{No}」に色一覧[色番号][1]をテキスト設定。
ここまで。

●(Noを)駒消去
 「#cv{No}」の「背景色」に白色DOMスタイル設定。
 「#cv{No}」にをテキスト設定。
ここまで。
#-----------------------------------------------------------------------

http://snowdrops.starfree.jp/nako3/nadegame_1_00.html

 どうかな? 一応、ちゃんと動いているとは思うんだけど。

 駒は画像にしようと思ってたけど、用意するのが面倒だからやめて、canvasすらやめてdivにCSSで角丸設定をした。角丸四角が無いからさ~。


 プログラム版にも投稿してみたんだけど、こっちでも謎が発生だ。

http://www.eznavi.net/app/index2.php?pagetop=51&only=one

 chrome系のブラウザだと、なぜか動かないのであるIEFirefoxも動くし、自分とこのHPのはchromeだって問題ないのに一体何故なのだ~(?_?)

 しようが無いから、外部サイトも登録しといた。


 いろんな媒体で動くのが、なでしこ3の素晴らしい点だけど、様々な環境で同じように動かせるように作るというのは、なかなか大変なことなんだなぁ・・・むむむ。

 「言う」のダイアログで色々情報を表示させるのも、ブラウザ依存になるから、見た目の問題だけでは無く、色々挙動が変わるしね。

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

2019-08-27

「DOM要素作成」と「DOM子要素追加」の使い方

| 09:18

 始めに作ったHTMLに、要素を追加したい時、どうするのかという

 HTML設定だと、追加ではなくまるっと書き換えてしまうから、困ったもんだって感じなんですよねー。

 「DOM要素作成」とか「DOM子要素追加」とか、それっぽい名称の命令はあるものの、説明は何も無いし、どうするもんだかさっぱり分からずで、しようが無いから元のHTML追加した形のHTMLを作って、っくり再設定するか、予め追加するためのdivなどを設けたHTMLにして置くなどしていましたが、このほどようやく使い方を理解したので、メモっておく。

#「DOM要素作成」と「DOM子要素追加」の使い方

#①追加したいDOMを新規作成する。
EL=「button」のDOM要素作成。
ELに「OK」をテキスト設定。
ELの「id」に「OK_btn」をDOM属性設定。 //idを設定

#②追加したい先のDOM要素を取得する。
PA=「nako3_div_1」のDOM要素ID取得。

#③「②」で取得したPAへ「①」で作成したELを追加する。
PAへELをDOM子要素追加。
//DOM親要素へELをDOM子要素追加。 //(DOM親要素なら直に追加出来る)

#使えるようになる!
「#OK_btn」をクリックした時には、「OK」と言う

 タブン、Javascriptの分かる人には、ふつーに分かることだったっぽい(?)

 ・・・でも、結局HTML設定してそう(^▽^;



 あっ、前終了判定が違ってました;;;

 端っこにある駒の時の処理が抜けてました。

 毎忘れる。進歩がない(´д`;)

 一次元の配列で二次元のにしてるから、行をまたいだ向こうっかわの列を参照しちゃうんだよね。

 まあSameGameだと、んなに駒が残ること自体が滅多にないけど、奇跡的な残りっぷりだった場合、消せる駒は無いけどゲームオーバーないとゆう事件が発生する可能性も、あることはある

終了判定
 Noを0から駒数-1まで繰り返す。
  X=No%駒数x。Y=(No/駒数x)を切捨。
  もし、駒色[No]=でなければ、
   # 上下左右に同じ色の駒があるかどうかチェックする
   もし、X=0ならば、         #左端
    もし、(駒色[No]=駒色[No+1])または(駒色[No]=駒色[No-駒数x])または(駒色[No]=駒色[No+駒数x])ならば、
     いいえ戻る。
    ここまで。
   違えばもし、X=駒数x-1ならば、   #右端
    もし、(駒色[No]=駒色[No-1])または(駒色[No]=駒色[No-駒数x])または(駒色[No]=駒色[No+駒数x])ならば、
     いいえ戻る。
    ここまで。
   違えばもし、Y=0ならば、     #上端
    もし、(駒色[No]=駒色[No-1])または(駒色[No]=駒色[No+1])または(駒色[No]=駒色[No+駒数x])ならば、
     いいえ戻る。
    ここまで。
   違えばもし、Y=駒数y-1ならば、   #下端
    もし、(駒色[No]=駒色[No-1])または(駒色[No]=駒色[No+1])または(駒色[No]=駒色[No-駒数x])ならば、
     いいえ戻る。
    ここまで。
   違えば、
    もし、(駒色[No]=駒色[No-1])または(駒色[No]=駒色[No+1])または(駒色[No]=駒色[No-駒数x])または(駒色[No]=駒色[No+駒数x])ならば、
     いいえ戻る。
    ここまで。
   ここまで。
  ここまで。
 ここまで。
 はい戻るここまで。

 無駄っぽいケド、まあいいや~;



 それから、部品作成で、謎現象が発生だ~。

 いや、作成自体にはナゾはないんですが。

 テキスト取得やテキスト設定が、できないことがあるんだよね。

 エディタ入力したテキストを取得して、難易度(駒数)を変えられるようにしたいってだけのことなんですが。

 しかも、エラーも出さずにこでプログラムが止まっちまうんだから、困ったもんだ。

 なんでそうなるのか、わからんねヽ(;´Д`)ノ

 現象再現させるコードを作ってみたいが、なかなか再現しない。逆に再現させられたら、あっさり原因が発覚するような気もするけど。


 どうも、いっぱい部品作った、下の方の部品で起こるような気がする。

 作る順番を変えたらふつーに通ったり、度別の部品がおかしくなったりもする。

 しかも、代入した変数名では取得も設定もできないのに、要素を調査して、密かに付けられている「nadesi-dom-*」のIDを指定したら、普通に通ったりもするΣ(゜д゜;

 これが一番納得いかんね(@_@)


 うーん、難易度(駒数)の変更はなしにして、取りあえず完成にすっかな・・・

 部品作成使わずに、全部HTMLにしたら案外普通にできるような気もするけど、このナゾ現象以外にも、駒数増えたら得点は当然多くなるんだから、ハイスコア表示はどのようにしたらいいんだろう、とか、画面のサイズに合わせて、あんまりバカみたいな数は指定出来ないようにしたいけどできるんだろうか・・・とかとか、この機能に関してはムダに色々悩みが深いんだよねw

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

2019-08-22

大体遊べる感じに☆

| 16:08

 さてさて・・・


 昨日のはクリックした駒を消すだけだったケド、再帰関数でもって同じ色の駒を辿って全て消します。

 ぷろでるさんのコードが全然分からないけど、まあこうゆうこってしょう。

 「」は消された場所で、「消色」は、消したい色です。

 コラムスと違って、連鎖しないし4方向しか無いからカンタンです♪

 あ~、コラムス!

 色々、ロジックを考え直すところや、機能を追加することや、考えていたけど、取りあえず遊べる感じになったことで安心して放置したな~;;;

#②同じ色のバブルを消す
●(Noの)同色探索
 X=No%駒数x。Y=(No/駒数x)を切捨。
 もし、(探索済一覧[No]=1)または、(駒色[No]=)ならば、
   戻る。
 違えば、
   探索済一覧[No]=1。
   # 上下左右に同じ色の駒があるかどうかチェックする
   もし、(X-1≧0)かつ(駒色[No-1]=消色)かつ(探索済一覧[No-1]≠1)ならば、        #左
     個数=個数+1。(No-1)の同色探索。
   ここまで。
   もし、(X+1<駒数x)かつ(駒色[No+1]=消色)かつ(探索済一覧[No+1]≠1)ならば、      #右
     個数=個数+1。(No+1)の同色探索。
   ここまで。
   もし、(Y-1≧0)かつ(駒色[No-駒数x]=消色)かつ(探索済一覧[No-駒数x]≠1)ならば、    #上
     個数=個数+1。(No-駒数x)の同色探索。
   ここまで。
   もし、(Y+1<駒数y)かつ(駒色[No+駒数x]=消色)かつ(探索済一覧[No+駒数x]≠1)ならば、  #下
     個数=個数+1。(No+駒数x)の同色探索。
   ここまで。
   もし、個数=1でなければ、駒色[No]=。
   戻る。
 ここまで。
ここまで。

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



 でっ、消した部分を詰めます。

 駒色を下から(駒色配列を逆順に)いっこいっこ調べていって、(消した駒)を発見したら、度は上方向へを数えつつ探索し、じゃ無い駒を発見したら、の上を全部の数だけ下にずらす、としてみたんだけども、どうだろう;

 上部にが増えてくるにつれ、無意味にも全て下にずらしてることになっちゃうけど、ま、いっか(^▽^;

 しかも、上部の部分でも、いちいち上方向への調査が発生してしまうのか・・・

 ・・・消した駒のデータを別に持って、それを参照した方が無駄が無くて済むのか・・・まっ、いっか(えっΣ(゜д゜;)

 案外、消した駒を発見するや否や、問答無用で上部を一個下にずらす、としたほうが、プログラムはずっと短くて済んでいいような気もしてきた。

#③消した部分に残っているバブルを詰める
●駒詰
 # 消えた分だけ下に詰める
 Noを駒数-1から0まで繰り返す。
  Y=(No/駒数x)を切捨。
  もし、(駒色[No]=)かつ(Y>0)ならば、
   # 消す駒を数える。
   消去数=0。
   Cを0からYまで繰り返す。
    もし、駒色[No-C*駒数x]=ならば、
      消去数=消去数+1。
    違えば、
      # 上部の駒を消去数個分下にずらす。
      移動元=No-C*駒数x。移動先=No。
      (Y-消去数+1)   #上部に残ってる駒の数。
        駒色[移動先]=駒色[移動元]。
        駒色[移動元]=。
        移動元=移動元-駒数x。移動先=移動先-駒数x。
      ここまで。
      抜ける。
    ここまで。
   ここまで。
  ここまで。
 ここまで。

 #全部消えた列を左に詰める
 Noを(駒数-1-駒数x)から(駒数-1)まで繰り返す。  #一番下がなら全部消えてる
  X=No%駒数x。
  もし、(駒色[No]=)かつ(X<駒数x-1)ならば、
   # 消す列を数える。
   消去数=0。
   Cを0から(駒数x-1-X)まで繰り返す。
    もし、駒色[No+C]=ならば、
      消去数=消去数+1。
    違えば、
      #右の列を消去数分左にずらす。
      移動元=No+消去数。移動先=No。
      (駒数x-X-消去数)    #右側に残ってる列数。
        (駒数y)        #一列全てをずらす。
         駒色[移動先-駒数x*(回数-1)]=駒色[移動元-駒数x*(回数-1)]。
         駒色[移動元-駒数x*(回数-1)]=。
        ここまで。
        移動元=移動元+1。移動先=移動先+1。
      ここまで。
      抜ける。
    ここまで。
   ここまで。
  ここまで。
 ここまで。
ここまで。

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



 全駒を調査して、上下左右に同じ色の駒がいっこも無かったら、もう消せる駒が無くゲームオーバー

 沢山消すと高得点になるのは良いけど、目に付く沢山消せるところを早まって消しちゃった場合より、丁寧に消してって全部消すことが出来た場合の方がスコアが低いとかは納得いかないので、全消しボーナスを付けたいと思う。

 コレは終了判定で一緒に出来る気がするけど、それぞれ「はい」「いいえ」で戻り値を得られた方が楽っぽいので別の関数にしちゃった;

#④消せるバブルが残っているかチェックする
●終了判定
 Noを0から駒数-1まで繰り返す。
  もし、駒色[No]=でなければ、
   # 上下左右に同じ色の駒があるかどうかチェックする
   もし、(駒色[No]=駒色[No-1])または(駒色[No]=駒色[No+1])または(駒色[No]=駒色[No-駒数x])または(駒色[No]=駒色[No+駒数x])ならば、
     いいえ戻る。
   ここまで。
  ここまで。
 ここまで。
 はい戻るここまで。

●全消判定
 Noを0から駒数-1まで繰り返す。
  もし、駒色[No]=でなければ、
    いいえ戻る。
  ここまで。
 ここまで。
 はい戻るここまで。

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

 これで、とりあえず遊べる感じになったと思います☆

 駒消してないじゃん白丸じゃん、とか言わないで~。線色も変えれば良いだけなんだけど、駒は●じゃ無い物に変えるつもりなので、駒描画と駒消去はまるっと書き換える予定だから、てきとーこいてんです;

 後は、スコアもちゃんと表示する欄を作ったり、ハイスコアをローカルストレージに記録したりして、完成、かな?

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

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