Hatena::Groupnadesiko

雪乃☆雫のなでしこ日和

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