2019-08-29
なで☆がめ ver.1 とりあえず完成～☆
ナゾは解明しないけど、取りあえず、スコアを表示する欄と、成績表表示機能を付け、体裁を整えてver.1の完成だ～。（とゆうことにするｗ）
#なで☆がめ 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","♦"]]。 探索済一覧＝空配列。消色＝空。個数＝０。スコア＝０。 終了フラグ＝オフ。カウンタ＝０。順位＝０。 成績＝空配列。ハイスコア表示件数＝10。ハイスコアフラグ＝０。 #---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スタイル一括設定。 #---ゲームオーバー表示----- 「ＧＡＭＥ ＯＶＥＲ」のラベル作成して、ゲームオーバーに代入。 ゲームオーバーに{ "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から駒数-1まで繰り返す。 色番号＝4の乱数。 駒色[数]＝色番号+1。 数へ駒描画。 ここまで。 ここまで。 ●(Noの)マウス押下時。 消色＝駒色[No]。個数＝１。消駒＝空配列。 //初期化。 もし、終了フラグ＝オフならば、 もし、駒色[No]＝空でなければ、 Noの同色探索。駒詰。全駒再描画。 スコア＝スコア＋(個数-1)^2。 スコア表示にスコアをテキスト設定。 もし、（終了判定）がはいならば、 終了フラグはオン。終了処理。 ここまで。 ここまで。 ここまで。 ここまで。 ●終了処理 もし、（全消判定）がはいならば、 ゲームオーバーの「色」に「#FFDDDD」をDOMスタイル設定。 ゲームオーバーに「全消し！<BR>Bonus +100」をテキスト設定。 オンにゲームオーバー表示。 //全消しボーナス カウンタ＝０。 1.3秒後には、 0.01秒タイマー開始した時には（タイマーID） スコア＝スコア＋1。カウンタ＝カウンタ＋１。 スコア表示にスコアをテキスト設定。 もし、カウンタ＝１００ならば、 タイマーIDのタイマー停止。 0.5秒後には 最終処理。 ここまで。 ここまで。 ここまで。 ここまで。 違えば、 ゲームオーバーの「色」に「#DDDDFF」をDOMスタイル設定。 ゲームオーバーに「ＧＡＭＥ ＯＶＥＲ」をテキスト設定。 オンにゲームオーバー表示。 0.5秒後には 最終処理。 ここまで。 ここまで。 ここまで。 ●最終処理 成績記録。順位はそれ。 リトライボタンの「z-index」に「3」をDOMスタイル設定。 もし、順位＝０でなければ、順位でハイスコア表示。 ここまで。 ●（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で戻る。 ここまで。 #----------------------------------------------- ●成績記録 順位＝０。 数を(ハイスコア表示件数)から１まで繰り返す。 もし、（成績[数-1][0]＜スコア）または(成績[数-1][0]＝空)ならば、 順位＝数。 違えば、 抜ける。 ここまで。 ここまで。 数を(ハイスコア表示件数)から１まで繰り返す。 もし、順位＝０でなければ、 もし、順位＜数ならば、 成績[数-1]＝成績[数-2]。 違えば、もし、順位＝数ならば、 成績[数-1]＝[スコア,"{今日}","{駒数x}×{駒数y}"]。 抜ける。 ここまで。 ここまで。 ここまで。 「なで☆がめ成績表」に成績をローカルストレージ保存。 順位で戻る。 ここまで。 ●成績リセット 「成績をリセットしてもいい？」と二択。 もし、それがはいならば、成績初期化。 ここまで。 ●成績初期化 成績＝空配列。 (ハイスコア表示件数)回 C=回数-1 成績[C]＝空配列。 ３回 成績[C][回数-1]＝空。 ここまで。 ここまで。 「なで☆がめ成績表」に成績をローカルストレージ保存。 ここまで。 #----------------------------------------------- ●(Noの)同色探索 X=No%駒数x。Y=(No/駒数x)を切捨。 もし、(探索済一覧[No]＝1)または、(駒色[No]＝空)ならば、 戻る。 違えば、 探索済一覧[No]＝1。 # 上下左右に同じ色の駒があるかどうかチェックする もし、(X-1≧０)かつ(駒色[No-1]＝消色)かつ(探索済一覧[No-1]≠1)ならば、 #左 個数＝個数＋１。(No-1)の同色探索。 ここまで。 もし、(X+1＜駒数x)かつ(駒色[No+1]＝消色)かつ(探索済一覧[No+1]≠1)ならば、 #右 個数＝個数＋１。(No+1)の同色探索。 ここまで。 もし、(Y-1≧０)かつ(駒色[No-駒数x]＝消色)かつ(探索済一覧[No-駒数x]≠1)ならば、 #上 個数＝個数＋１。(No-駒数x)の同色探索。 ここまで。 もし、(Y+1＜駒数y)かつ(駒色[No+駒数x]＝消色)かつ(探索済一覧[No+駒数x]≠1)ならば、 #下 個数＝個数＋１。(No+駒数x)の同色探索。 ここまで。 もし、個数＝１でなければ、 駒色[No]＝空。消駒[No]＝１。 ここまで。 戻る。 ここまで。 ここまで。 ●駒詰 # 消えた分だけ下に詰める Noを駒数xから駒数-1まで繰り返す。 Y=(No/駒数x)を切捨。 もし、(消駒[No]＝１)ならば、 # 上部の駒を１個下にずらす。 移動元＝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)]＝空。 ここまで。 移動元＝移動元＋１。移動先＝移動先＋１。 ここまで。 ここまで。 ここまで。 ここまで。 ●終了判定 Noを0から駒数-1まで繰り返す。 X=No%駒数x。Y=(No/駒数x)を切捨。 もし、駒色[No]＝空でなければ、 # 上下左右に同じ色の駒があるかどうかチェックする もし、X＝０ならば、 #左端 もし、(駒色[No]＝駒色[No+1])または(駒色[No]＝駒色[No-駒数x])または(駒色[No]＝駒色[No+駒数x])ならば、 いいえで戻る。 ここまで。 違えば、もし、X＝駒数x-1ならば、 #右端 もし、(駒色[No]＝駒色[No-1])または(駒色[No]＝駒色[No-駒数x])または(駒色[No]＝駒色[No+駒数x])ならば、 いいえで戻る。 ここまで。 違えば、もし、Y＝０ならば、 #上端 もし、(駒色[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だって問題ないのに一体何故なのだ～（？＿？）
しようが無いから、外部サイトも登録しといた。
いろんな媒体で動くのが、なでしこ３の素晴らしい点だけど、様々な環境で同じように動かせるように作るというのは、なかなか大変なことなんだなぁ・・・むむむ。
「言う」のダイアログで色々情報を表示させるのも、ブラウザ依存になるから、見た目の問題だけでは無く、色々挙動が変わるしね。
コメントを書く
トラックバック - http://nadesiko.g.hatena.ne.jp/snowdrops89/20190829