Hatena::Groupnadesiko

雪乃☆雫のなでしこ日和

2017/09/21 (木)

15パズル完成☆ (なでしこ3 ver.0.1.5)

| 10:04 | 15パズル完成☆ (なでしこ3 ver.0.1.5) - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - 15パズル完成☆ (なでしこ3 ver.0.1.5) - 雪乃☆雫のなでしこ日和 15パズル完成☆ (なでしこ3 ver.0.1.5) - 雪乃☆雫のなでしこ日和 のブックマークコメント

 さて、んなわけでタイマーが使えるようになったので、タイムトライアル機能をつけまして、ローカルストレージに成績表の記録をして、表示できるようにした♪


 ・・・と、あっさり書きましたが、逆順での繰り返しが出来ないと知るまで、だいぶはまりました(ToT)

 なんで、できないんだろう・・・

 反復より繰り返すが圧倒的に便利な場面って、逆にカウントしたい時だとおもってたんだけど・・・

#-------------------------------------
Nを5から1まで繰り返す
  Nを表示ここまで。
#-------------------------------------

 エラーも出ませんが、何も表示されません~。

 1から5ならもちろん問題は無く・・・ってか、公式ページのサンプルのとうりなので;

https://nadesi.com/doc3/index.php?%E7%B9%B0%E3%82%8A%E8%BF%94%E3%81%97%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6

 まあ、出来ないと分かれば、最大値から回数を引いていけばOKなんですが~;

 ↑0.1.6で対応され、問題なくできるようになりました!(10/7追記)



 それから、ついでに調子に乗って、効果音を鳴らす機能をつけましたw

 効果音を作るのに無駄に時を使ったケド、やっぱしょぼいな~;;;

 とゆうわけで、チェックボックスでオフオンできるようにwww

 ・・・など、これまで学んだことを色々盛り込んで、取りあえずこんな感じ。

<script type="なでしこ">
#---宣言------
駒=配列。
駒サイズ=100。
駒色=["#AAAAFF","#FFAAAA","#FFDDAA","#AAFFAA","#DDDDDD"]
アキ=15。
新規ゲーム待ち=オン。
手数=0。経過=0。分=0。秒=0。
手数順位=0。タイム順位=0。
成績=配列表示順位数=3。
効果音フラグ=オン。
クリック音=「http://www.geocities.jp/snowdrops890/audio/click_116_6G.mp3」
エラー音=「http://www.geocities.jp/snowdrops890/audio/Bu_71_3C.mp3」
完成音=「http://www.geocities.jp/snowdrops890/audio/Fanfare_53.mp3」
ハイスコア音=「http://www.geocities.jp/snowdrops890/audio/Congratulation_53.mp3」

#---canvasとマウス押下関数の設置------
マウス押下関数。
キャンバスHTML。
数を0から15まで繰り返す。
  マウス押下関数=マウス押下関数に「●マウス押下時{数}{改行}  {数}のマウス押下時。{改行}ここまで。{改行}{改行}」を一行追加。
  もし回数%4=0ならば、
      キャンバスHTML=キャンバスHTMLに「<canvas id="cv{数}" width="100" height="100"></canvas>{改行}<BR>」を一行追加。
  違えば、
      キャンバスHTML=キャンバスHTMLに「<canvas id="cv{数}" width="100" height="100"></canvas>」を一行追加。
  ここまで。
ここまで。
マウス押下関数ナデシコする。
「#game」にキャンバスHTMLをDOM_HTML設定

#---イベント設定------
数を0から15まで繰り返す。
  「#cv{数}」の「onmousedown」に「マウス押下時{数}」をDOMイベント設定。
ここまで。
「#newgame」の「onclick」に「新規ゲーム」をDOMイベント設定。
「#seiseki」の「onclick」に「成績表表示」をDOMイベント設定。
「#reset」の「onclick」に「成績リセット」をDOMイベント設定。
「#se」の「onchange」に「効果音オフオン」をDOMイベント設定。

#---データ読み込み------
成績=「15パズル成績表」をローカルストレージ読むもし、(成績=undefined)または(成績=ならば、成績初期化。

#---メイン------
「タイムトライアル」を1秒毎。
新規ゲーム。

#-----新規ゲーム--------------------------------------------------------
●新規ゲーム
  #---初期化------
  手数=0。「#tekazu」に手数をDOMテキスト設定。
  経過=0。「#time」に「00:00」をDOMテキスト設定。
  アキ=15。            #アキ位置を初期化。
  数を0から15まで繰り返す。    #駒位置を初期化
    駒[数]=数。
  ここまで。

  #---問題作成------
  効果音フラグは効果音フラグ*-1。
  1000
    rは4の乱数。rで駒入替。
  ここまで。

  駒描画。
  効果音フラグは効果音フラグ*-1。
ここまで。

●駒描画
  #---画面描画------
  数を0から15まで繰り返す。
    「canvas#cv{数}」のDOM要素取得。それへ描画開始。
    もし、駒[数]<15ならば、色=駒色[駒[数]/4を切捨]
    違えば、色=駒色[4]
    色へ塗り色設定。[0,0,駒サイズ,駒サイズ]に四角描画。
    「bold 48px MS ゴシック」に描画フォント設定。
    もし、駒[数]<9ならば、x=37。
    違えば、x=22。
    y=70。            #文字描画のyは、文字の下部なのか?
    もし、駒[数]<15ならば、
      黒色塗り色設定。[x,y]へ駒[数]+1の文字描画。
    ここまで。
  ここまで。
ここまで。
#-----------------------------------------------------------------------

#-----駒入れ替え--------------------------------------------------------
●駒入替(方向で)
  もし、(方向=0)かつ(アキ/4≧1)ならば、
    駒のアキとアキ-4を配列入替。
    アキ=アキ-4。
  違えばもし、(方向=1)かつ(アキ/4<3)ならば、
    駒のアキとアキ+4を配列入替。
    アキ=アキ+4。
  違えばもし、(方向=2)かつ(アキ%4>0)ならば、
    駒のアキとアキ-1を配列入替。
    アキ=アキ-1。
  違えばもし、(方向が=3)かつ(アキ%4<3)ならば、
    駒のアキとアキ+1を配列入替。    #右の駒と入れ替え
    アキ=アキ+1。
  違えば、
    もし、効果音フラグ=オンならば、「#se」に「<audio src="{エラー音}" autoplay></audio>」をDOM_HTML設定。
  ここまで。
ここまで。

#なでしこ3に「配列入れ替え」はない。
●配列入替(AのIとJを)
  もし、効果音フラグ=オンならば、「#se」に「<audio src="{クリック音}" autoplay></audio>」をDOM_HTML設定。
  II=A[I]。JJ=A[J]。
  A[I]=JJ。A[J]=II。
ここまで。
#-----------------------------------------------------------------------

#-----マウス判定--------------------------------------------------------
●マウス押下時(Noの)
  もし、手数=0ならば、
    新規ゲーム待ち=オフ。
  ここまで。
  もし、(新規ゲーム待ち=オフ)かつ(駒[No]<15)ならば、
    もし、No+4=アキならば、
      0で駒入替。駒描画。完成判定。
    違えばもし、No-4=アキならば、
      1で駒入替。駒描画。完成判定。
    違えばもし、No+1=アキならば、
      2で駒入替。駒描画。完成判定。
    違えばもし、No-1=アキならば、
      3で駒入替。駒描画。完成判定。
    違えば、
      もし、効果音フラグ=オンならば、「#se」に「<audio src="{エラー音}" autoplay></audio>」をDOM_HTML設定。
    ここまで。
  ここまで。
ここまで。
#-----------------------------------------------------------------------

#-----完成判定----------------------------------------------------------
●完成判定
  手数=手数+1。「#tekazu」に手数をDOMテキスト設定。

  完成=0。
  数を0から15まで繰り返す。
    もし、駒[数]が数ならば、完成は完成+1。
  ここまで。
  もし、完成=16ならば、
    「canvas#cv15」のDOM要素取得。それへ描画開始。
    色=駒色[3]。色へ塗り色設定。[0,0,駒サイズ,駒サイズ]に四角描画。
    x=25。y=68。黒色塗り色設定。[x,y]へ「★」の文字描画。
    新規ゲーム待ち=オン。
    成績表記録。

    #表示させる文字の設定
    もし、手数順位=0ならば、
      手数成績=「{改行} 手数{手数}手です」
    違えば、
      手数成績=「{改行} 手数{手数}手は{改行}   歴代{手数順位}位の成績です」
    ここまで。

    もし、タイム順位=0ならば、
      タイム成績=「{改行} タイム{分}分{秒}秒です」
    違えば、
      タイム順位=タイム順位-表示順位数
      タイム成績=「{改行} タイム{分}分{秒}秒は{改行}   歴代{タイム順位}位の成績です」
    ここまで。

    #表示させる
    もし、(手数順位=0)かつ(タイム順位=0)ならば、
      もし、効果音フラグ=オンならば、「#se」に「<audio src="{完成音}" autoplay></audio>」をDOM_HTML設定。
      「おめでとう。完成です!{改行}{手数成績}{タイム成績}」と言う。
    違えばもし、(手数順位=1)または(タイム順位=1)ならば、
      もし、効果音フラグ=オンならば、「#se」に「<audio src="{ハイスコア音}" autoplay></audio>」をDOM_HTML設定。
      「ハイスコアが出ました!{改行}おめでとう。新記録です!!{改行}{手数成績}{タイム成績}」と言う。
      成績表表示。
    違えば、
      もし、効果音フラグ=オンならば、「#se」に「<audio src="{ハイスコア音}" autoplay></audio>」をDOM_HTML設定。
      「ハイスコアが出ました!{改行}おめでとう。{改行}{手数成績}{タイム成績}」と言う。
      成績表表示。
    ここまで。
  「#se」に「<audio src="" autoplay></audio>」をDOM_HTML設定。    #音止める
  ここまで。
ここまで。
#-----------------------------------------------------------------------

#-----タイムトライアル--------------------------------------------------
●タイムトライアル
  もし、新規ゲーム待ち=オフならば、
    経過=経過+1。
    分=経過/60を切捨。
    秒=経過%60。
    分=分を2でゼロ埋め。秒=秒を2でゼロ埋め。    #時を00:00で表示させる。
    「#time」に「{分}:{秒}」をDOMテキスト設定。
  ここまで。
ここまで。
#-----------------------------------------------------------------------

#-----成績表記録--------------------------------------------------------
●成績表記録
  #手数のハイスコア
  手数順位=0。
//  数を表示順位数から1まで繰り返す。   #逆順での繰り返しが出来ない?
  (表示順位数)
    数=表示順位数-(回数-1)
    もし、(成績[数-1]>手数)または(成績[数-1]=0)ならば、
      手数順位=数。
    ここまで。
  ここまで。
//  数を表示順位数から1まで繰り返す。
  (表示順位数)
    数=表示順位数-(回数-1)
    もし、手数順位=0でなければ、
      もし、手数順位=数ならば、
        成績[数-1]=手数。
      ここまで。
      もし、手数順位<数ならば、
        成績[数-1]=成績[数-2]。
      ここまで。
    ここまで。
  ここまで。

  #タイムのハイスコア
  タイム順位=0
//  数を(表示順位数*2)から(表示順位数+1)まで繰り返す。
  (表示順位数)
    数=表示順位数*2-(回数-1)
    もし、(成績[数-1]>経過)または(成績[数-1]=0)ならば、
      タイム順位=数。
    ここまで。
  ここまで。
//  数を(表示順位数*2)から(表示順位数+1)まで繰り返す。
  (表示順位数)
    数=表示順位数*2-(回数-1)
    もし、タイム順位=0でなければ、
      もし、タイム順位=数ならば、
        成績[数-1]=経過。
      ここまで。
      もし、タイム順位<数ならば、
        成績[数-1]=成績[数-2]
      ここまで。
    ここまで。
  ここまで。
  「15パズル成績表」に成績をローカルストレージ保存ここまで。
#-----------------------------------------------------------------------

#-----成績表表示--------------------------------------------------------
●成績表表示
  成績表=「★☆★成績表★☆★{改行}{改行}◎手数のハイスコア{改行}」  #どうも変数がアルファベット一文字の時、正常動作しないことがあるみたい?
  数を1から表示順位数まで繰り返す
    手=成績[数-1]
    もし、手が0ならば、
      成績表=「{成績表} {数}位  ---手{改行}」
    違えば、
      成績表=「{成績表} {数}位  {手}手{改行}」
    ここまで。
  ここまで。
  
  成績表=「{成績表}{改行}◎タイムのハイスコア{改行}」
  数を(表示順位数+1)から(表示順位数*2)まで繰り返す。
    分=成績[数-1]/60を切捨。
    秒=成績[数-1]%60。
    分=分を2でゼロ埋め。秒=秒を2でゼロ埋め。
    順位=数-表示順位数
    もし、成績[数-1]が0ならば、
      成績表=「{成績表} {順位}位  --分--秒{改行}」
    違えば、
      成績表=「{成績表} {順位}位  {分}分{秒}秒{改行}」
    ここまで。
  ここまで。
  成績表を言うここまで。
#-----------------------------------------------------------------------

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

●成績初期化
  成績=配列。
  (表示順位数*2)
    数=回数-1。
    成績[数]=0。
  ここまで。
  「15パズル成績表」にをローカルストレージ保存ここまで。
#-----------------------------------------------------------------------
●効果音オフオン
  もし、効果音フラグ=オンならば、効果音フラグ=オフ。
  違えば、効果音フラグ=オンここまで。
#-----------------------------------------------------------------------
</script>

<style type="text/css">
<!--
html, body		{ height: 100%; }
body			{background-color: #FFFFFF;}
div.cnt			{width: 420px; margin:auto;}
div.menu		{width: 420px; margin:auto;}
div.game		{width: 420px; margin:auto;}

/*画面幅が420px以下*/
@media (max-width: 420px) {
  body			{width:100%;}
  div.cnt		{width: 100%;}
  div.menu		{width: 100%;}
  div.game		{width: 100%;}
  canvas		{width: 23%;}
  h1			{font-size: 150%;}
}
/*画面高さが420px以下*/
@media (max-height: 420px) {
  div.game		{ height: 100%;}
  canvas		{ height:24%;}
  h1			{font-size: 150%;}
}
 -->
</style>
    <center><H1>15パズル</H1></center>
    <BR>
      <div class="cnt" style="font-weight: bold; margin-bottom: 5px">
        <label>タイムトライアル:<input id="time" type="text" maxlength="5" size="8"></label> 
        <label>手数:<input id="tekazu" type="text" maxlength="5" size="5"></label>
      </div>
      <div id="game" class="game"></div>
      <div class="menu">
        <button id="newgame">新規ゲーム</button>
        <button id="seiseki">成績表表示</button>
        <button id="reset">成績リセット</button>
        <BR>
        <label style="font-size:small;"><input type="checkbox" id="se" checked="checked">効果音を鳴らす?</label>
      </div>
      <div id="se"></div>

http://www.geocities.jp/snowdrops890/wnako3_test/15puzzle_1_50.html

 どうかな? だいぶ遊んだので、うまくいってると思うんだけど・・・

 やっぱりハイスコアの表示あると、俄然やる気がでるんですよwww


 好きな画像に変えるなどは、現状では難しそうな気がするため、取りあえずここまで~。

 なでしこ1と違って、座標がHTMLCSSで相対指定(?)みたいな感じだから、CSSが無いと、表示がへんちくりんなことになってしまう。

 CSSは学び始めたばっかりなんで、あんまり良い書き方じゃないもしないけど、気にしないで!

 とりあえず、自分の環境で思ったような表示になることだけ優先しましたΣ(゜д゜;えっ;

 スタイルシートの意味なし!(爆)

 DOMスタイル設定で出来そうな部分も多いけど、ちょこっとだとタグに直接書いちゃった方が早かったり、なでしこだと全部ID振らなきゃない(?)とか、まとめて指定出来ないっぽいことなどあって、HTMLのほうに書いちゃう方が、楽なんだよね~;

 なでしこでは、途中で変えたりするような部分だけすればいいかなあ・・・とか。

 プロパティ(?)も値もCSSのとうりだから、HTML埋め込みでやる場合には、全部なでしこで指定するメリットはあんまりないよね。出来れば、基本的なヤツだけでも、なでしこっぽく日本語で書けるようになったらいいですねぇ☆

ゲスト



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