Hatena::Groupnadesiko

雪乃☆雫のなでしこ日和

2019-09-13

なで☆がめ ver.1.3で完成☆ あとハッシュの初期化とかselectedの設定のこととか

| 02:38

 成績表のデータは、二次元配列から、ジェイソンさんのハッシュ型に変更しようと思ったんですよ。

 最初、なんかワケ分からんと思ったけど、INIのようにキーでアクセス出来るのみならず、ハッシュの中にさらに配列を持たせたりと、なかなかの便利仕様っぽい☆

 まあ、なんか、こんなようなことです。

成績={
"6×9":[
  {"score":222,"date":"2019/08/30"},
  {"score":100,"date":"2019/09/12"},
  {"score":"","date":""}
 ]
"32×13":[
  {"score":698,"date":"2019/09/10"},
  {"score":555,"date":"2019/09/11"},
  {"score":412,"date":"2019/08/31"}
 ]
}
成績を反復
 ステージ=対象キー。
 成績["{ステージ}"]を反復
   「{ステージ} {対象["score"]}点 {対象["date"]}」を表示。
 ここまで。
ここまで。

 こうすると、各ステージごとのデータを別々に、一元管理できそうですね☆

 ところがですよ。

 上のように、直接値を入れるんじゃ無いような時には、配列の場合は、まず、「成績=配列」みたいな感じで初期化してやらなきゃなりません。なでしこ1では配列の宣言なしでも動いたけど、なでしこ3では絶対必要です。

 ハッシュも同様のようでした。(エラー出る)

 でも、ハッシュ的なのは無いっぽい。

 ででで、一応「配列」でも動いたかに思えたんだけどやっぱりダメで。

 どーしたらいいんだよと悩んでいたんですが、突然分かりました!

成績={}

 コレですwww

 そうさ。「配列」だって「[]」ってコトなんだよね? あああ(´д`)



 さて、気を取り直して。

 これさえ分かれば、データの読み書き部分はさくっと変更出来ました。

 で、成績表の表示も、「言う」では限界があるので、自前のフォームを作ってセレクトボックスで切り替えられるようにしようという

 ここで! なんと!! ついに!!!

 実装当初から分からんとぼやいていた、部品作成で作ったセレクトボックスの、selectedの付け方が分かりました!(喜)

 selectedとゆうのは、選択状態の初期値です。

 HTML的に言うと、<select>タグ配下の<option>タグに「selected」属性を設定するってことで、後から動的に変更しようとすると、IDとかを指定して「DOM属性設定」とゆう感じなんだけど、セレクトボックス作成で作った場合には<option>にIDは付いてないんで、どーしたらいいんだと、結局自前でHTML設定したりしてたんだけども。

 なななんと、セレクトボックスの「value」に選択状態にしたいオプションのvalueの値を設定するだけで良かったんです! なんと~。

 なでしこ3では、表示するテキストと同じ物が自動的に<option>タグvalue値として設定されているので、

["A","B","C"]のセレクトボックス作成し、テストに代入
テストの「value」に「B」をDOM属性設定。

 こんだけ!

 おおぉ、なんてこった。簡単じゃん;



 んなこんなで・・・

#なで☆がめ ver.1.3

#---設定----------------------------------------
余白=20。部品間隔=10。ラベル高さ=30。メニュー高さ=25。
駒w=40。駒h=40。駒色=配列。消駒=配列。

最小駒数x=5。最小駒数y=5。
最大駒数x=((クライアント幅-余白*4)/駒w)を切捨。
最大駒数y=((クライアント高さ-余白-部品間隔*2-ラベル高さ-メニュー高さ)/駒h)を切捨。
駒数x=6。駒数y=9。駒数=駒数x*駒数y。
画面w=駒w*駒数x。画面h=駒h*駒数y。
母艦w=画面w+余白*2。//母艦wを言う
母艦h=画面h+余白+部品間隔*2+ラベル高さ+メニュー高さ。

色一覧=["",["#FF6699","♥"],["#8888FF","♣"],["#66EE66","♠"],["#FFCC66","♦"]]。
探索済一覧=配列。消色=。個数=0。スコア=0。
終了フラグ=オフ。カウンタ=0。順位=0。
ハイスコア表示件数=10。ハイスコアフラグ=0。
ステージ=「{駒数x}×{駒数y}」。ステージ一覧=配列。

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

#---HTML作成------------------------------------
HTML=「<div id="base"><div id="bokan"><div id="game"></div></div></div>」
「#nako3_div_1」にHTMLHTML設定。

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

#---難易度変更-----
「X:」のラベル作成して、xラベル代入。
xラベルに{
  "position": "absolute",
  "font-size": "14px",
}をDOMスタイル一括設定。

「* Y:」のラベル作成して、yラベル代入。
yラベルに{
  "position": "absolute",
  "幅": "120px",
  "font-size": "14px",
}をDOMスタイル一括設定。

「({最小駒数x}~{最大駒数x})」のラベル作成して、x駒数ラベル代入。
x駒数ラベルに{
  "position": "absolute",
  "font-size": "10px",
  "幅": "50px",
}をDOMスタイル一括設定。

「({最小駒数y}~{最大駒数y})」のラベル作成して、y駒数ラベル代入。
y駒数ラベルに{
  "position": "absolute",
  "font-size": "10px",
  "幅": "50px",
}をDOMスタイル一括設定。

「{駒数x}」のエディタ作成して、xエディタ代入。
xエディタに{
  "position": "absolute",
  "幅": "25px",
  "高さ": "15px",
}をDOMスタイル一括設定。

「{駒数y}」のエディタ作成して、yエディタ代入。
yエディタに{
  "position": "absolute",
  "幅": "25px",
  "高さ": "15px",
}をDOMスタイル一括設定。

「難易度変更」のボタン作成して、難易度ボタン代入。
難易度ボタンに{
  "position": "absolute",
  "幅": "100px",
  "高さ": "25px",
}を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スタイル一括設定。

#---成績表ポップアップ-----
EL=「div」のDOM要素作成。ID=「pop-up」
ELの「id」にIDをDOM属性設定。
DOM親要素へELをDOM子要素追加。
IDへDOM親要素設定
Sのラベル作成し、成績テキストに代入。
「OK」のボタン作成し、OKボタン代入。
「#pop-up」をオフに可視変更。

 mgn=20。
 Tw=250。Th=200。           //テキスト
 Bw=60。Bh=25。            //OKボタン
 Pw=Tw+mgn。Ph=Th+Bh+15+mgn*2。   //ポップアップ

「#pop-up」に{
  "position": "absolute",
  "幅": "{Pw}px",
  "高さ": "{Ph}px",
  "top": "{母艦h/2-Ph/2}px",
  "左": "{母艦w/2-Pw/2}px",
  "背景色": "#FFFFDD",
  "border": "1px solid #666699"
  "border-top": "15px solid #666699"
}をDOMスタイル一括設定。

成績テキストに{
  "position": "absolute",
  "幅": "{Tw}px",
  "高さ": "{Th}px",
  "top": "{Ph/2-Th/2-Bh/2+10}px",
  "左": "{Pw/2-Tw/2}px",
  "font-size": "16px",
  "font-family": "monospace",
  "line-height": "1em",
  "letter-spacing": "0em",
  "背景色": "#FFFFDD",
}をDOMスタイル一括設定。

 OKボタンに{
  "position": "absolute",
  "幅": "{Bw}px",
  "高さ": "{Bh}px",
  "top": "{Ph-Bh-5}px",
  "左": "{Pw/2-Bw/2}px",
}をDOMスタイル一括設定。

#---セレクトボックス-----
「ステージ:」のラベル作成し、ステージラベル代入。

C=0。
成績を反復
 ステージ一覧[C]=対象キー
 C=C+1。
ここまで。

ステージ一覧のセレクトボックス作成し、成績セレクトに代入。
成績セレクトの「onchange」に「表示ステージ変更」をDOMイベント設定。
成績セレクトをオフに可視変更。


#---イベント------------------------------------
OKボタンをクリックした時には
 成績表閉じる。
ここまで。

リトライボタンをクリックした時には、
  オフにゲームオーバー表示。
  新規ゲーム。
ここまで。

成績表示ボタンをクリックした時には、
  成績セレクトをオンに可視変更。
  順位でステージのハイスコア表示ここまで。

成績リセットボタンをクリックした時には、
  成績リセット。
ここまで。

ルールボタンをクリックした時には、
 「【なで☆がめ】
いわゆるSameGameのルール。
駒をクリックすると、それと上下左右で隣接する同じ色の駒が一緒に消えます。
消せる駒が無くなったらゲームオーバー。
同時に消える駒が多ければ多いほど高得点になりますが、画面上から全ての駒を消すことが出来ればボーナス点が入りますので、よく考えて全消しを目指しましょう。(必ず全消し出来るわけではありませんが)」と言うここまで。

難易度ボタンをクリックした時には、
  x=xエディタのテキスト取得。y=yエディタのテキスト取得。
  もし、x>最大駒数xならば、xエディタに最大駒数xをテキスト設定。
  もし、x<最小駒数xならば、xエディタに最小駒数xをテキスト設定。
  もし、y>最大駒数yならば、yエディタに最大駒数yをテキスト設定。
  もし、y<最小駒数yならば、yエディタに最小駒数yをテキスト設定。
  x=xエディタのテキスト取得。y=yエディタのテキスト取得。

  「{x}*{y}に駒数変更して新規ゲームを始めます」で二択。
  もしそれはいならば、
   駒数x=x。駒数y=y。駒色=配列。ステージ=「{駒数x}×{駒数y}」。
   もし、(成績["{ステージ}"]=undefined)ならば、
     ステージを成績初期化。
     EL=「option」のDOM要素作成。
     ELにステージをテキスト設定。
     ELの「value」にステージをDOM属性設定。
     ELの「selected」に「true」をDOM属性設定。
     成績セレクトへELをDOM子要素追加。
   ここまで。
   CSS設定。駒作成。駒設定。新規ゲーム。
  違えば、
   xエディタに駒数xをテキスト設定。yエディタに駒数yをテキスト設定。
  ここまで。
ここまで。



#-----------------------------------------------
CSS設定。駒作成。駒設定。
新規ゲーム。
●新規ゲーム
 終了フラグはオフ。順位=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スタイル設定。
    ゲームオーバーの「transform」に「scale(1)」をDOMスタイル設定。
  違えば、
    ゲームオーバーオフに可視変更。
    ゲームオーバーの「transform」に「scale(0.1)」をDOMスタイル設定。
    リトライボタンの「z-index」に「-1」をDOMスタイル設定。
  ここまで。
ここまで。

●(順位でステージの)ハイスコア表示
  ハイスコア=「  ★☆★ ハイスコア ★☆★{改行}{改行}」。
  (ハイスコア表示件数)
    順=回数。
    もし、順位=順ならば=「😃」
    違えば=「 」。
    得点=成績["{ステージ}"][順-1]["score"]。
    もし、得点=ならば、得点=「----」。
    違えば、得点=「{得点}」を4で文字列右寄せ。
    日付=成績["{ステージ}"][順-1]["date"]
    もし、日付=ならば、日付=「----/--/--」。
    順=「{順}」を2で文字列右寄せ。
    ハイスコア=ハイスコアに「{}{順}位 {得点}点 {日付}」を一行追加。
  ここまで。
  ハイスコア=ハイスコアの改行を「<BR>」に置換。
  成績テキストにハイスコアをテキスト設定。
  成績表開くここまで。

●(Sを数で)文字列右寄せ
  スペース=。
  もし、(Sの文字数)<数ならば、
   (数-(Sの文字数))
    スペース=スペースに「&nbsp;」を追加。
   ここまで。
  ここまで。
  スペース&Sで戻るここまで。
#-----------------------------------------------
●表示ステージ変更
 ステージ=成績セレクトのテキスト取得。
 もし、ステージ=「{駒数x}×{駒数y}」ならば、
  順位でステージのハイスコア表示。
 違えば、
  0でステージのハイスコア表示。
 ここまで。
ここまで。

●成績表閉じる
 ステージ=「{駒数x}×{駒数y}」
 ステージラベルに「ステージ:」をテキスト設定。
 「#pop-up」をオフに可視変更。
 「#pop-up」の「z-index」に「-1」をDOMスタイル設定。 //最背面
 成績セレクトをオフに可視変更。
ここまで。

●成績表開く
 成績セレクトの「value」にステージをDOM属性設定。
 「#pop-up」をオンに可視変更。
 「#pop-up」の「z-index」に「99」をDOMスタイル設定。 //最前面
ここまで。
#-----------------------------------------------
●(ステージへ)成績記録
  順位=0。
  数を(ハイスコア表示件数)から1まで繰り返す。
    もし、(成績["{ステージ}"][数-1]["score"]<スコア)または(成績["{ステージ}"][数-1]["score"]=)ならば、
      順位=数。
    違えば、
      抜ける
    ここまで。
  ここまで。
  数を(ハイスコア表示件数)から1まで繰り返す。
    もし、順位=0でなければ、
      もし、順位<数ならば、
        成績["{ステージ}"][数-1]["score"]=成績["{ステージ}"][数-2]["score"]。
        成績["{ステージ}"][数-1]["date"]=成績["{ステージ}"][数-2]["date"]。
      違えばもし、順位=数ならば、
        成績["{ステージ}"][数-1]["score"]=スコア。
        成績["{ステージ}"][数-1]["date"]=今日。
        抜ける。
      ここまで。
    ここまで。
  ここまで。
  「なで☆がめ成績表2」に成績をローカルストレージ保存。
  順位で戻るここまで。

●成績リセット
  「成績をリセットしてもいい?」と二択。
  もしそれはいならば、
    「なで☆がめ成績表2」をローカルストレージキー削除。
    成績={}。ステージを成績初期化。
  ここまで。
ここまで。

●(ステージを)成績初期化
 成績["{ステージ}"]=配列。
 (ハイスコア表示件数)
  C=回数-1。
  成績["{ステージ}"][C]={}。
  成績["{ステージ}"][C]["score"]=。
  成績["{ステージ}"][C]["date"]=。
 ここまで。
ここまで。

#-----------------------------------------------
●(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]=でなければ、
    いいえ戻る。
  ここまで。
 ここまで。
 はい戻るここまで。
#-----------------------------------------------
●CSS設定
 駒数=駒数x*駒数y。画面w=駒w*駒数x。画面h=駒h*駒数y。
 母艦w=画面w+余白*2。//母艦wを言う
 もし母艦w<480ならばメニュー高さ=50。  //駒数11未満
 違えばメニュー高さ=25。
 母艦h=画面h+余白+部品間隔*2+ラベル高さ+メニュー高さ。

 「#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スタイル一括設定。

 ゲームオーバーに{
  "幅": "{母艦w-20}px",
  "top": "{母艦h/2-100}px",
}をDOMスタイル一括設定。

リトライボタンに{
  "top": "{母艦h/2+10}px",
  "左": "{母艦w/2-50}px",
}をDOMスタイル一括設定。

成績表示ボタンに{
  "top": "{母艦h-25}px",
}をDOMスタイル一括設定。

成績リセットボタンに{
  "top": "{母艦h-25}px",
}をDOMスタイル一括設定。

ルールボタンに{
  "左": "{母艦w-60}px",
  "top": "{母艦h-25}px",
}をDOMスタイル一括設定。

「#pop-up」に{
  "top": "{母艦h/2-Ph/2}px",
  "左": "{母艦w/2-Pw/2}px",
}をDOMスタイル一括設定。


 もし母艦w<480ならば、
  xラベルに{
  "左": "{母艦w-235}px",
  "top": "{母艦h-25-部品間隔-18}px",
}をDOMスタイル一括設定。

  yラベルに{
  "左": "{母艦w-178}px",
  "top": "{母艦h-25-部品間隔-18}px",
}をDOMスタイル一括設定。

  x駒数ラベルに{
  "左": "{母艦w-215}px",
  "top": "{母艦h-40-部品間隔-18}px",
}をDOMスタイル一括設定。

  y駒数ラベルに{
  "左": "{母艦w-140}px",
  "top": "{母艦h-40-部品間隔-18}px",
}をDOMスタイル一括設定。

  xエディタに{
  "左": "{母艦w-215}px",
  "top": "{母艦h-25-部品間隔-18}px",
}をDOMスタイル一括設定。

  yエディタに{
  "左": "{母艦w-140}px",
  "top": "{母艦h-25-部品間隔-18}px",
}をDOMスタイル一括設定。

  難易度ボタンに{
  "左": "{母艦w-100}px",
  "top": "{母艦h-25-部品間隔-22}px",
}をDOMスタイル一括設定。

 違えば、
  xラベルに{
  "左": "185px",
  "top": "{母艦h-23}px",
}をDOMスタイル一括設定。

  yラベルに{
  "左": "240px",
  "top": "{母艦h-23}px",
}をDOMスタイル一括設定。

  x駒数ラベルに{
  "左": "205px",
  "top": "{母艦h-38}px",
}をDOMスタイル一括設定。

  y駒数ラベルに{
  "左": "275px",
  "top": "{母艦h-38}px",
}をDOMスタイル一括設定。

  xエディタに{
  "左": "205px",
  "top": "{母艦h-23}px",
}をDOMスタイル一括設定。

  yエディタに{
  "左": "278px",
  "top": "{母艦h-23}px",
}をDOMスタイル一括設定。

  難易度ボタンに{
  "左": "320px",
  "top": "{母艦h-25}px",
}をDOMスタイル一括設定。

 ここまで。
ここまで。

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

●駒設定
 数を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イベント設定。
 ここまで。
ここまで。

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

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

●(Noを)駒消去
 「#cv{No}」の「背景色」に白色DOMスタイル設定。
 「#cv{No}」にをテキスト設定。
ここまで。
#-----------------------------------------------
●クライアント幅
  「document.documentElement.clientWidth」をJS実行。
ここまで。

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

●(GUIをAに)可視変更
  もし、A=オンならば
    GUIの「opacity」に「1」をDOMスタイル設定。
  違えば、
    GUIの「opacity」に「0」をDOMスタイル設定。
  ここまで。
ここまで。
#-----------------------------------------------------------------------

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

 スマホでやると、難易度変更、直接エディタ数値を入れて変更する仕様は、ちょっと面倒っぽかったけど、かといって、パソコンで無闇に長いセレクトボックスとかもアレだしねー。

 これで一応「なで☆がめ」は、完成としたい。

 珍しく、最後まで飽きずに作ったね(!?)

ゲスト



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