2019-08-29
なで☆がめ ver.1 とりあえず完成~☆
ナゾは解明しないけど、取りあえず、スコアを表示する欄と、成績表表示機能を付け、体裁を整えて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まで繰り返す。 マウス押下関数=マウス押下関数に「●マウス押下時{数}{改行} {数}のマウス押下時。{改行}ここまで。{改行}{改行}」を一行追加。 HTML=HTMLに「<div id="cv{数}"></div>」を一行追加。 ここまで。 HTML=HTMLに「</div></div></div>」を一行追加。 マウス押下関数をナデシコする。 「#nako3_div_1」にHTMLをHTML設定。 #---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系のブラウザだと、なぜか動かないのである。IEもFirefoxも動くし、自分とこのHPのはchromeだって問題ないのに一体何故なのだ~(?_?)
しようが無いから、外部サイトも登録しといた。
いろんな媒体で動くのが、なでしこ3の素晴らしい点だけど、様々な環境で同じように動かせるように作るというのは、なかなか大変なことなんだなぁ・・・むむむ。
「言う」のダイアログで色々情報を表示させるのも、ブラウザ依存になるから、見た目の問題だけでは無く、色々挙動が変わるしね。
コメントを書く
トラックバック - http://nadesiko.g.hatena.ne.jp/snowdrops89/20190829