Hatena::Groupnadesiko

雪乃☆雫のなでしこ日和

2017/10/10 (火)

続・IEなんてキライw

| 08:56 | 続・IEなんてキライw - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - 続・IEなんてキライw - 雪乃☆雫のなでしこ日和 続・IEなんてキライw - 雪乃☆雫のなでしこ日和 のブックマークコメント

 昨日の続きです。

 ひらめかないし、ナゾも解明しないけど、なんか・・・できるようになっちゃいました(?_?)

 昨日書き忘れたけど、まず書いておかなければならなかったことは、IEはローカルではローカルストレージが動かないらしいんですよ(ややこやしい;)

 なので、HDDのHTMLファイルをダブルクリックして実行してもダメなんですよね。

 動作確認が、面倒すぎですね!!(´д`;

 しかし、もちろん、問題はこではありません。

 いち早く(?)それを知り、こかっ!と、ジオシティーズにUPしてお試ししてみましたが、やっぱりダメだったのです。

 最小限のプログラムで色々なパターンをいろいろお試ししましたが、とにかくダメでした。

 でも、うちのIEでローカルストレージが使えない設定になってるとかじゃ無いんです。簡易エディタでは動くわけですからね。制作サイトのエディタでも動いて、HTML埋め込みがどうこうって問題でも無いことが分かりました。

 それで、もしIEさまがジオシティーズを無料のHPだし安全ではないかなんか認識しておいで遊ばすのかしらとか考えて、それならなでしこだけじゃ無く、Javascriptも動かなくなるハズと、Javascriptでローカルストレージを使うサンプルを拾ってきて、意味も分からずコピペし、ジオシティーズにアップロードしてみたんですよ。

 ちなみに、コレです。

http://html5.imedia-web.net/sample/webstrage/post_2.html

 そうしたら・・・なななんと、ちゃんと動くじゃありませんか?!

 えー? じゃじゃじゃあ、やっぱりなでしこの問題なのなのかなー? ・・・と思いつつ、も一度試してみたら、あら不思議。までうんともすんとも言わなかったなでしこのコードも、全部問題なく動くようになりましたとさw(゜o゜)w

 なでしこのコードはもちろんまったく変更しておらず、アップロードし直してさえいないのにですよっ!!!

 ナゾは深まるばかりです。

 Javascriptはいっこも分かりませんが、何らかのまじないが使われているのでしょうか・・・(?_?)

 動いても、これっぽっちもうれしくないってのも珍しい(爆)

 別にワタシ自身IEなんかこの先も使う予定は無いし、とりあえず動くようになることよりも、なんで動かないのか、ソレをどーしたら動くように出来るのかを知ることの方が、重要だったわけなんですが・・・┐( ̄ヘ ̄)┌




 これまで、お試しで作ったコードを全てIEで動くようにし替えるのはめんどーだし、なにより、もともとなでしこ3の各バージョンごと色々お試ししては、動いたの動かないのとぼやいている記事の付属物なので、やめた~w

 とりあえず、問題のローカルストレージのテストと、一通りはプログラムとして完成させたモノだけ。

ローカルストレージテスト:http://www.geocities.jp/snowdrops890/nako3/test_localStorage.html

バイオリズム:http://www.geocities.jp/snowdrops890/nako3/Biorhythm0_1_5.html

実体参照変換:http://www.geocities.jp/snowdrops890/nako3/html_escape.html

15パズル:http://www.geocities.jp/snowdrops890/nako3/15puzzle_1_50.html

なこタイマーhttp://www.geocities.jp/snowdrops890/nako3/nako_timer.html

 ・・・どうですかねえ。

 機会があったら、別のパソコン(実家とかw)のIEで試してみたいとおもう。

通りすがり通りすがり2017/10/11 21:30wnako3を?run付きで呼び出した時のスクリプトの実行のタイミングに問題があるようで、まったく実行しなかったり、pluginの命令が使えなかったりするようです。なので、以下を行ってみてください。
1.とりあえず、?runを外す。
2.以下のファイルもscriptのsrcに指定して読み込むようにする。内容は、?runの時の処理を書き直したものです。記述場所はwnako3.jsの近くがわかりやすいです(動作する上ではどこでもよいです)
weyk.la.coocan.jp/weyk/nadesiko3/release/wnako3_runner.js

wnako3_runnerを読み込む=?runとほぼ同じ効果になります。
htmlファイルを全部読み込み終わって、一通り解析が済んでから実行しはじめます。
画像の読み込みや、配置(レイアウトの決定)はまだなので、その辺を扱いたい場合は、なでしこのscript側に「delay」を付けてみてください。実行をし始めるタイミングが、それらのあとになります。
※srcに画像ファイルのURLを指定していて幅や高さ指定をしていないimgタグの幅や高さを取得しようとすると差が出たりします。

雪乃☆雫雪乃☆雫2017/10/12 00:47ありがとうございます!
また、いろいろお試ししてみます~☆

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

2017/10/09 (月)

IE×ローカルストレージは難しい・・・

| 08:30 | IE×ローカルストレージは難しい・・・ - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - IE×ローカルストレージは難しい・・・ - 雪乃☆雫のなでしこ日和 IE×ローカルストレージは難しい・・・ - 雪乃☆雫のなでしこ日和 のブックマークコメント

 前に、E11ではまったく動かんとゆう話を書きましたが、

https://nadesiko.g.hatena.ne.jp/snowdrops89/20170922/1506085208

 バージョン0.1.6で、サポートされました☆

 しかし~、やっぱりIEでは思ったように動かないモノが多数だったので、いっこいっこナゾを解明。

 まず、簡易エディタでは問題ないのですが、なぜかHTML埋め込みにしたタートルグラフィックスが動きません。簡易エディタで動く以上、こっち側の環境的な問題っぽい。

 どうやら、「この Web ページはスクリプトや ActiveX コントロールを実行しないように制限されています」的なお知らせが悪さをしている気配。

 他のプログラムは、許可してやればの後ふつーに動くんだけど、タートルグラフィックスだけはダメ。リロードしてもダメ。だけど、一旦許可されたタブに、HTMLファイルをドラッグドロップして開いたら、なんと動いたのです。

 なんにしても、許可しても許可しても、毎メッセージが出てくるのにはうんざりなので、色々調べて「インターネットオプション」→「詳細設定」→「マイ コンピューターのファイルでのアクティブ コンテンツの実行を許可する」にチェックをつけて、お知らせが表示されないように設定してみたら解消☆ 無事に動くようになりました。

 それから、バイオリズムやタイマーが軒並みダメだとおもったら、プラグインがやはり動いてないようだったので、とりあえず自前の関数し替えてみたら、タイマーは問題なく動くように☆

 Google Chromeさんでは問題となっていた、ポップアップと同時にオーディオを鳴らす件も問題ありませんでした。

 でも、最大の問題は、ローカルストレージでした。

 これも、なんと簡易エディタでは問題ありません。

#-----------------------------------------------------------
「名前」をローカルストレージ読む。
名前=それもし、名前=undefinedならば、
  「名前は?」と尋ねる。
  名前=それ。
  「名前」にそれをローカルストレージ保存ここまで。
「こんにちは{名前}さん」と言う
#-----------------------------------------------------------

 ちゃんと一目は名前を聞いてきて、二目以降はローカルストレージの情報を元に名前を言ってくれます。

 だから、やっぱりこっち側の問題っぽいのだけれど、HTML埋め込みの実行では、うんともすんとも言いません。

 とにかくローカルストレージの読み書きがまったく行えてないようで、しかも、単に無視されるんならまだしも、の命令があると、以降の命令も全て実行されずに止まってしまうってんだから、困ったもんです(--;

 IEの設定も、もう余計なお知らせは上がらないし、もちろんDOMストレージは有効になっているし、後は一体何をどうしたらいいのか、まったくお手上げ~ヽ(;´Д`)ノ

 ローカルストレージは、バイオリズムでも15パズルでも使っているので、実にどうもよろしくありませんが、これ以上はワタシの知恵では難しそうなので、ナゾの解明は一旦断念orz

 しかも、後に設定の仕方が分かってウチでは動くよーになっても、他の人達はやっぱり、「動かないじゃん」てなる人が発生するってコトだよね。

 IEキライ。なんかもう、Firefox推奨ですってコトにしたくなってきた~(えっ;)

kujirahandkujirahand2017/10/11 02:22簡易エディタでは問題なくて、ドラッグ&ドロップで動かない件は、たぶん、URLがfile://から始まっているからではないでしょうか?PC内でローカルサーバー立ち上げて、localhostでHTMLを閲覧すれば、セキュリティ問題は解決するかもです。これは、IE11だけでなく、Chromeでもエラーがでるはず。

kujirahandkujirahand2017/10/11 02:24・・・って、翌日の投稿で既に解決済みですね。よく見てなくて、コメント欄汚してスミマセン!

雪乃☆雫雪乃☆雫2017/10/11 15:11コメントありがとうございます!
いえいえ、とってもうれしいです!!(≧▽≦)
chromeさんではナゼか無問題だったのですよね~。
ソレもまた、深遠なるナゾでございます・・・

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

2017/10/02 (月)

なこタイマー(Chromeでもちゃんと鳴らす!)

| 12:15 | なこタイマー(Chromeでもちゃんと鳴らす!) - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - なこタイマー(Chromeでもちゃんと鳴らす!) - 雪乃☆雫のなでしこ日和 なこタイマー(Chromeでもちゃんと鳴らす!) - 雪乃☆雫のなでしこ日和 のブックマークコメント

 前に「秒毎」の実験で、お試しに作ってみたラーメンタイマーが、Firefoxならいいんですが、Google Chromeだと音が鳴らないとゆう話を書きました。

https://nadesiko.g.hatena.ne.jp/snowdrops89/20170922/1506085208

 アラートのポップアップが優先されて、オーディオの再生などが後しになっちゃうラシイというコトで、たとえばaudioにonplayingのイベントをつけて、のイベントでポップアップさせてみたらどうだろうと思ったら、ちょこっとだけ音が鳴って止まり、ポップアップが上がり、ダイアログを消すとまた音が鳴り始めてonplayingが発生して、またポップアップが・・・とゆうひどいことになりました;;;

 くっ、くろーむさぁん・・・ヽ(;´Д`)ノ

 どうやら後しっていうよりか、ポップアップが開いてるは、再生がとまっちゃうようです。


 ・・・とゆうわけで、やっぱりもう諦めて言わせるのはやめました;

 だいたい、追加のダイアログを表示ない的なチェックボックスをオンにしてしまったら、表示されんくなっちゃうしね。(言う無限ループが発生しちゃった時なんかは助かるけどねw)

 canvasの上にボタンを置いて、それっぽくしてみたw

 こんなものでも表示する位置を決めるに付いては、前学んだ重ね合わせやpositionの設定などで結構無駄に知恵を使いました。

 してして、近頃のラーメンは、3分とは限らないですよねぇ~。

 ちょっと良さげなのはたいてい4分とか長めになっているし、新幹印のなんと1分で出来る焼きば弁当もあるしね~。3分待つのだよって時代じゃナイ!

 とゆうワケで、丸いボタンとかも使ってちょっと可愛くしてみたりと、最近学んだことをいろいろ盛り込んで、キッチンタイマーに改造してみた。

 100ショップに売ってそうなチープさですが、電池切れの心配がない点がすぐれていますwww

<!-- うぇいくさまの日付時計算プラグイン -->
<script src="http://weyk.la.coocan.jp/weyk/nadesiko3/release/plugin_weykdatetime.js"></script>
<!-- type="なでしこ" のスクリプトが実行される -->
<script type="なでしこ">
#-----------------------------------------------------------------------
# なこタイマー
#-----------------------------------------------------------------------

#---宣言------
分=0を2でゼロ埋め。秒=0を2でゼロ埋めタイマーオフ終了=0。

#-----ポップアップウィンドウ表示位置------------------------------------
「#popup_base」の「width」に「160px」をDOMスタイル設定。
「#popup_base」の「margin」に「auto」をDOMスタイル設定。  #子要素でポジションを絶対にしてもleftの値をつけなければこのマージンが反映される

#-----タイマー設置------------------------------------------------------
「#timer」の「background-color」に「#FFEEEE」をDOMスタイル設定。
「#timer」の「width」に「200px」をDOMスタイル設定。
「#timer」の「padding」に「10px」をDOMスタイル設定。
「#timer」の「margin」に「auto」をDOMスタイル設定。
「#timer」の「border-radius」に「20px」をDOMスタイル設定。
「#timer」の「border」に「2px ridge #FF9999」をDOMスタイル設定。
タイマー部品配置。

●タイマー部品配置
  #readonlyは、設置時に指定しないとダメっぽい? disabledはできるのに、なんでだ;
  タイマー部品=「
<ul class="btn_base" style="height:50px">
  <li><input id="time" type="text" readonly="readonly"></li>
  <li><a id="reset" class="btn">リセット</a></li>
</ul>
<ul class="btn_base">
  <li><a id="mb" class="btn">分</a></li>
  <li><a id="sb" class="btn">秒</a></li>
  <li><a id="start" class="btn">スタート</a></li>
</ul>
<div id="alarm"></div>」
  「#timer」にタイマー部品をDOM_HTML設定。
  「#alarm」にをDOM_HTML設定。
  「#start」に「スタート」をDOMテキスト設定。
  「#time」に「{分}:{秒}」をDOMテキスト設定。

#---スタイル設定------
  「#time」の「width」に「110px」をDOMスタイル設定。
  「#time」の「font-size」に「32px」をDOMスタイル設定。
  「#time」の「text-align」に「center」をDOMスタイル設定。
  「#start」の「width」に「78px」をDOMスタイル設定。
  「#reset」の「width」に「45px」をDOMスタイル設定。

#---イベント設定------
  「#mb」の「onclick」に「分設定」をDOMイベント設定。
  「#sb」の「onclick」に「秒設定」をDOMイベント設定。
  「#start」の「onclick」に「タイマーオフオン」をDOMイベント設定。
  「#reset」の「onclick」に「リセット」をDOMイベント設定。
ここまで。
#-----------------------------------------------------------------------

#-----タイマー本体------------------------------------------------------
「ナコタイマー」を1秒毎。

●ナコタイマー
  もしタイマーオンならば、
    終了秒差を残秒数に代入。
    もし、残秒数<0ならば、
      「#title」に「時です!! - なこタイマー」をDOMテキスト設定。
      「#alarm」に「<audio src="http://www.geocities.jp/snowdrops890/audio/alarm_75_8C.mp3" autoplay></audio>」をDOM_HTML設定。
      タイマーオフ。ポップアップウィンドウ表示。
    違えば、
      分=残秒数/60を切捨を2でゼロ埋め。秒=残秒数%60を2でゼロ埋め。
      「#time」に「{分}:{秒}」をDOMテキスト設定。
    ここまで。
  ここまで。
ここまで。
#-----------------------------------------------------------------------

#-----ボタンイベント----------------------------------------------------
●タイマーオフオン
  もし、(分=0)かつ(秒=0)でなければ、
    もしタイマーオフならば、
      タイマーオン。
      に「+0:{分}:{秒}」を時間加算して終了代入。
      「#start」に「一時停止」をDOMテキスト設定。
      「#mb」の「color」に「#EEEEEE」をDOMスタイル設定。
      「#sb」の「color」に「#EEEEEE」をDOMスタイル設定。
      「#reset」の「color」に「#EEEEEE」をDOMスタイル設定。
      「#on_btn」に「.btn:active{波カッコ}box-shadow: 0 2px 0 #CC6666; top:0px;」をDOM_HTML設定。   #ボタン押した時の動きをオフ。
      「#on_btn」に「#start:active{波カッコ}box-shadow:none; top:2px;」をDOM_HTML設定。        #スタートボタンだけは押せるようにする。
    違えば、
      タイマーオフ。
      「#start」に「スタート」をDOMテキスト設定。
      「#mb」の「color」に「#FFFFFF」をDOMスタイル設定。
      「#sb」の「color」に「#FFFFFF」をDOMスタイル設定。
      「#reset」の「color」に「#FFFFFF」をDOMスタイル設定。
      「#on_btn」に「.btn:active{波カッコ}box-shadow:none; top:2px;」をDOM_HTML設定。
    ここまで。
  ここまで。
ここまで。

●分設定
 もしタイマーオフならば、
  「#time」のDOMテキスト取得。
  分はそれの2だけ文字左部分整数変換。
  もし、分が99ならば、分=0。
  違えば、分=分+1。
  分=分を2でゼロ埋め。
  「#time」に「{分}:{秒}」をDOMテキスト設定。
 ここまで。
ここまで。

●秒設定
 もしタイマーオフならば、
  「#time」のDOMテキスト取得。
  秒はそれの2だけ文字右部分整数変換。
  もし、秒が59ならば、秒=0。
  違えば、秒=秒+1。
  秒=秒を2でゼロ埋め。
  「#time」に「{分}:{秒}」をDOMテキスト設定。
 ここまで。
ここまで。

●リセット
 もしタイマーオフならば、
  分=0を2でゼロ埋め。秒=0を2でゼロ埋め。
  「#time」に「{分}:{秒}」をDOMテキスト設定。
 ここまで。
ここまで。

#-----------------------------------------------------------------------
●ポップアップウィンドウ表示
  ポップアップ=「<div id="popup_area">
<canvas id="alart" width="160px" height="120px"></canvas>
<button id="stop">OK</button>
</div>」
  「#popup_base」にポップアップをDOM_HTML設定。

  「#popup_area」の「position」に「absolute」をDOMスタイル設定。  #絶対位置指定でポップアップを表示する位置を指定。
  「#popup_area」の「width」に「160px」をDOMスタイル設定。
  「#popup_area」の「top」に「350px」をDOMスタイル設定。

  「#alart」の「position」に「absolute」をDOMスタイル設定。     #絶対位置指定したエリアの子要素にすると、子の絶対位置指定は親が基準になる。
  「#alart」の「z-index」に「2」をDOMスタイル設定。
  「#stop」の「position」に「absolute」をDOMスタイル設定。
  「#stop」の「width」に「60px」をDOMスタイル設定。
  「#stop」の「top」に「90px」をDOMスタイル設定。
  「#stop」の「left」に「50px」をDOMスタイル設定。
  「#stop」の「z-index」に「3」をDOMスタイル設定。
  「#stop」の「onclick」に「アラームストップ」をDOMイベント設定。

  「canvas#alart」のDOM要素取得。それへ描画開始。
  「#FFFFEE」に塗り色設定。
  [0,0,160,120]に四角描画。
  「#224477」に塗り色設定。
  [0,0,160,18]に四角描画。
  「bold 12px Aria」に描画フォント設定。
  白色塗り色設定。
  [5,15]に「なこタイマー」を文字描画。
  黒色塗り色設定。
  [50,60]に「時です!!」を文字描画ここまで。

●アラームストップ
  「#title」に「なこタイマー」をDOMテキスト設定。
  「#popup_base」にをDOM_HTML設定。
  「#alarm」にをDOM_HTML設定。
  タイマー部品配置。
  「#on_btn」に「.btn:active{波カッコ}box-shadow:none; top:2px;」をDOM_HTML設定。
ここまで。
#-----------------------------------------------------------------------
</script>
<style type="text/css">
<!--
a.btn {
    position:relative;                 /* 相対位置への配置(凹むボタンでtopの位置を変えるのに必要) */
    display:table-cell;                /* コレを設定しないとwidthとheightの設定が効かない。 */
    cursor:pointer;                    /* カーソルを手の形に。 */

    width:30px;                        /* ボタンの幅。 */
    height:30px;                       /* ボタンの高さ。 */
    border-radius:18px;                /* 角丸設定(ボタンサイズの半分よりもちょい大きめのほうが綺麗な丸になるっぽい) */
    background-color: #FFCCCC;         /* ボタンの色。 */
    border:1px solid #FF9999;          /* ボタン線色。 */
    box-shadow:0 2px 0 #CC6666;        /* ボタンの影設定。 */

    color: #FFFFFF;                    /* 文字色。*/
    font-weight:bold;                  /* 文字太さ。*/
    font-size:14px;                    /* フォントサイズ。*/
    text-shadow:0 1px 1px rgba(0, 0, 0, .3);      /* 文字の影設定。*/
    text-align:center;                 /* 横方向文字揃え。 */
    vertical-align:middle;             /* 縦方向文字揃え。 */
    text-decoration:none;              /* 装飾無し(aタグには大抵下とかが付いてるので解除する) */
}
ul.btn_base{
    list-style:none;            /* noneにしないリストの●が付いちゃう。 */
    padding:0px;                /* 左を0にしないリストのインデントが入っちゃう。 */
    height:35px;                /* ボタンのサイズ+ボーダー+影 */
    margin-top:5px;
    margin-bottom:0px;
}
ul.btn_base li{
    float:left;                 /* 左にり込む(横に並べる) */
    margin-left:20px;
}
ul.btn_base li:first-child{
    margin-left:10px;
}
 -->
</style>
<style type="text/css" id="on_btn">
<!--
.btn:active {
    top: 2px;
    box-shadow: none;
}
 -->
</style>

  <center><H1 id="title">なこタイマー</H1></center>
  <HR>
  <div id="timer"></div>
  <div id="popup_base"></div>
  <HR>

http://www.geocities.jp/snowdrops890/wnako3_test/nako_timer.html

※リンク先のものは、違うタブを開いていてもそれと分かりやすいよう、アラームが鳴ると同時にタイトルの文字を変えているのですが、掲載したコードでは、eznavi.netの制作サイトのエディタに貼付けて動くように、H1の文字を変えるようにしています。



 15パズルの成績発表も、のうちこんな感じで直す予定だけど、それよりも、なんとか画像を使って出来ないかを考え中~。

 重ね合わせで、裏画面は使えそうだけど、画像部分コピーみたいな命令が追加されないと、やっぱり難しいかなあ・・・?

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

2017/09/27 (水)

重ね合わせと文字遅延描画の実験

| 14:50 | 重ね合わせと文字遅延描画の実験 - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - 重ね合わせと文字遅延描画の実験 - 雪乃☆雫のなでしこ日和 重ね合わせと文字遅延描画の実験 - 雪乃☆雫のなでしこ日和 のブックマークコメント

 前、丸ボタンの押すと凹む動作のために、positionとtopの値を設定することを学んで気が付いたんですが、positionの値にabsoluteを指定すると、絶対位置を指定をすることが出来るんですね。

 して、z-indexで重ね合わせの順番も指定できるようです。

 そうすると、canvasの上にボタンを乗っけたりも出来るだろうし、なんと透明色が使えるので、画像合成しなくても、背景にキャラや文字を重ねたりができそう

 ・・・と思って、やってみた。

<script type="なでしこ">
#-----------------------------------------------------------------------
「canvas#cv_1」のDOM要素取得。
「canvas#cv_2」のDOM要素取得。

#背景を一旦白く。
「cv_1」へ描画開始。
白色線色設定。
白色塗り色設定。
[0,0,640,480]へ四角描画。

#裏でテキストウィンドウ作成。
「cv_2」へ描画開始。
「rgba(0,0,0,.5)」に線色設定。
「rgba(0,0,0,.5)」に塗り色設定。
[0,320,640,160]へ四角描画。

#背景を描画。
「cv_1」へ描画開始。
[0,0]に「../image/kaminoko.jpg」の画像描画。

#テキストウィンドウを表に出す。
「テキストウィンドウ」を1秒後。

#文字をテキストウィンドウに描画
 描画文字=配列。文字X=0。文字Y=0。数=0。
 文字サイズ=36。
1.5秒後には
 「cv_2」へ描画開始。
 「{文字サイズ}px MS Pゴシック」に描画フォント設定。
 白色塗り色設定。
// [30,380]に「ここは神の子池です。」を文字描画。
 30,380に「ここは神の子池です。」を文字遅延描画ここまで。
#-----------------------------------------------------------------------
●テキストウィンドウ
  「#cv_2」の「z-index」に「2」をDOMスタイル設定。
ここまで。
#-----------------------------------------------------------------------
●文字遅延描画(X,YにSを)
  描画文字=Sを文字列分解。
  文字X=X。文字Y=Y。
  遅延描画反映。
ここまで。

●遅延描画反映
  数2=描画文字の配列要素数。  #「描画文字の配列要素数」を直接入れたらダメみたい?
  もし、数<数2ならば、
    [文字X,文字Y]に描画文字[数]を文字描画。
    数=数+1。文字X=文字X+文字サイズ。
    「遅延描画反映」を0.2秒後。
  ここまで。
ここまで。
#-----------------------------------------------------------------------
</script>

<H1>なでしこ3てすと~重ね合わせの実験(文字遅延描画も)</H1>
<HR>
<style type="text/css">
#cv_1 {
  position:absolute;
  top: 230px;
  left: 100px;
  z-index: 1;
}
#cv_2 {
  position:absolute;
  top: 230px;
  left: 100px;
  z-index: -1;
}
</style>
<div style="height:550px">
  <canvas id="cv_1" width="640px" height="480px"></canvas>
  <canvas id="cv_2" width="640px" height="480px"></canvas>
</div>

http://www.geocities.jp/snowdrops890/wnako3_test/07_layer_test_01.html


 しかし・・・うーん、そうとうに無理矢理すぎる;

 とくに、文字遅延描画は美しくない~(--;

 文字幅取得が無いので、ピクセルで指定してますが、文字によってはだいぶ延びした感じになっちゃいますね。

 それに、秒待つが無くて、秒後や秒毎でと考えますが、なかなか難しいです・・・><

 秒後は、秒待つと違ってプログラムは止まらないので、の下の命令が先にどんどこ実行されてしまうんだよね


 topの値は、最初パソコン上では100くらいで良さげでしたが、ジオシティーズにUPしてみたら、広告が入るのでタイトルに被っちゃいまして、下げました。

 しかし、度コレをパソコン上で実行したら、これまたタイトルの下が延びした感じになっちゃう。

 絶対指定だと、そうゆうのも全部やらないと、おかしなコトになっちゃうんですねー。


 でも、まあ、取りあえず出来るってコトは分かりました!

 ノベルゲームというのは、あまり現実的じゃありませんが、それっぽい演出くらいには使えそう

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

2017/09/25 (月)

丸いボタンを作りたい!

| 09:11 | 丸いボタンを作りたい! - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - 丸いボタンを作りたい! - 雪乃☆雫のなでしこ日和 丸いボタンを作りたい! - 雪乃☆雫のなでしこ日和 のブックマークコメント

 だって、本来ボタンって、丸いモノでしょ。

 服のボタンなら、四角い方が珍しいくらい。

 ・・・それはともかく、画像ボタンとかはあるけど、ボタン自体は結局四角くなってしまうため、丸とか、あと楕や角丸の形で凹むボタンが欲しいなあと思って、かなり無理矢理系で作ってみたはいいけれど、使いどころが無いまま放置してあったのを、ちょこっと手直しして、なんとなくUPしてみる。(なでしこ1)

#-----------------------------------------------------------
# イメージボタン
#-----------------------------------------------------------
#  画像ボタンとかは、ボタン自体は四角になってしまうため、
# 丸や楕、角丸の形で凹むボタンとして作成したものです。
#  画像も使えますが、周囲にアンチエイリアスのかかってない
# 単純形状のものに限ります。(影が変になるんで)
#★便利機能としてイメージのサイズに合わせて、図形描画位置と、文字描画位置を取得する関数追加。
#-----------------------------------------------------------------------
●イメージボタン作成({数値=$FFFFFF}地色に{グループ=?}OBJから{数値=1}影幅,{数値=$000000}影色で)
  OBJの白色を$FFFFFEに画像色置換。 #白色は地色に置換されてしまうための措置;
  マスクをイメージとして作成。マスクの可視はオフ。マスクの画像はOBJ→名前。
  処理用をイメージとして作成。処理用の可視はオフ。処理用の画像はOBJ→名前。

 #マスク作成
  マスクの0,0を点取得。
  マスクをそれ画像マスク作成。

 #ボタン押下時の画像を作成
  #影の部分
  マスクを処理用の0,0へ画像コピー。
  処理用の黒色を影色に画像色置換。

  #ボタン画像を影幅分ずらした位置に合成
  マスクを画像ネガポジ。
  マスクをOBJの0,0へ画像ANDコピー。
  マスクを画像ネガポジ。
  マスクを処理用の影幅,影幅へ画像ANDコピー。
  OBJを処理用の影幅,影幅へ画像ORコピー。

 #ボタンの透明色を地色に変換
  マスクをOBJの0,0へ画像ORコピー。
  OBJの白色を地色に画像色置換。

 #ボタン押下時ようのイメージ作成
  ON用=「{OBJ→名前}ON」。
  「{ON用}をイメージとして作成。{ON用}の可視はオン。OBJを最前面。
{ON用}の位置はOBJ→位置。{ON用}の幅はOBJ→幅。{ON用}の高さはOBJ→高さ。

#処理用を元のボタンに合わせて切り抜く。
マスクを{ON用}の0,0へ画像ANDコピー。
処理用を{ON用}の0,0へ画像ORコピー。
{ON用}の白色を地色に画像色置換。

#ボタン押下のマウスイベント
OBJ→マウス押した時は~自身→可視はオフ。
OBJ→マウス離した時は~自身→可視はオン。」をナデシコする。

 #マスクと処理用は壊す。
  VCL_FREE(マスク)
  VCL_FREE(処理用)

●イメージボタン可視設定({グループ=?}OBJを|OBJのAに|Aで)
  ON用=「{OBJ→名前}ON」
  「もし、A=オンならば、OBJ→可視はオン。{ON用}→可視はオン違えば、OBJ→可視はオフ。{ON用}→可視はオフ。」をナデシコする。

●イメージボタン位置変更({グループ=?}OBJを|OBJのx,yに|x,yで)
  ON用=「{OBJ→名前}ON」
  「OBJ→位置は"{x},{y}"。{ON用}→位置は"{x},{y}"」をナデシコする。
#-----------------------------------------------------------------------
#-----------------------------------------------------------
x1とは整数。y1とは整数。x2とは整数。y2とは整数mxとは整数。myとは整数。
*イメージボタン描画位置取得({グループ=?}OBJの)
  x1=(線太さ/2)。y1=(線太さ/2)。x2=(OBJ→幅-線太さ/2)。y2=(OBJ→高さ-線太さ/2)。
  
*イメージボタンテキスト位置取得(Sで{グループ=?}OBJの)
  mx=(OBJ→幅/2)-(Sの文字幅取得/2)。my=(OBJ→高さ/2)-(Sの文字高さ取得/2)
#-----------------------------------------------------------

#以下はテスト

丸ボタンとはイメージ
これについて
  位置は"10,10"。幅は50。高さは50。可視はオン。
  緑色画面クリア。
  塗り色白色線色黒色線太さは2。
  丸ボタンイメージボタン描画位置取得。
  x1,y1からx2,y2へ。
  文字色赤色文字書体は「|20|太字」
  「OK」で丸ボタンイメージボタンテキスト位置取得。
  mx,myへ「OK」を文字描画。
  クリックした時は~
    自身の可視はオン。  #処理によっては必要。(ダイアログ表示秒待つ命令でウェイトがかかる時とか、処理が終わるまでボタンが押ささったままになっちゃうんで)
    10,10で丸ボタンイメージボタン位置変更。
    「OK!」と言う。

角丸ボタンとはイメージ
これについて
  位置は"100,15"。幅は90。高さは40。可視はオン。
  緑色画面クリア。
  塗り色ウィンドウ背景色線色黒色線太さは3。
  角丸ボタンイメージボタン描画位置取得。
  x1,y1からx2,y2へ20,30で角丸四角
  文字色黒色文字書体は「|12|」
  「ON/OFF」で角丸ボタンイメージボタンテキスト位置取得。
  mx,myへ「ON/OFF」を文字描画。
  クリックした時は~
    もし、丸ボタンの可視=オンならば
      オフで丸ボタンイメージボタン可視設定。
    違えば、
      丸ボタンオンイメージボタン可視設定。

楕ボタンとはイメージこれについて
  位置は"210,10"。幅は80。高さは50。可視はオン。
  白色画面クリア。
  塗り色は$FFAAAA。線色は$993333。線太さは2。
  楕ボタンイメージボタン描画位置取得。
  x1,y1からx2,y2へ
  文字色は$660000。文字書体は「|12|」
  「↓移動」で楕ボタンイメージボタンテキスト位置取得。
  mx,myへ「↓移動」を文字描画。
  クリックした時は~
    次位置=丸ボタンのY
    次位置=次位置+10
    10,次位置で丸ボタンイメージボタン位置変更。

母艦を$FFCCCCで画面クリア
$FFCCCCに丸ボタンからイメージボタン作成。
$FFCCCCに角丸ボタンからイメージボタン作成。
$FFCCCCに楕ボタンから2,$660000でイメージボタン作成

 ・・・どうかな~?

 元の画像から、無理矢理影付きの画像を自動生成してるんだよねぇ~w



 なでしこ3は、DOMスタイル設定ができるから、CSSを使ってもっとカンタンに作れそう

 っとゆうわけで、とりあえずこんな感じ。

http://www.geocities.jp/snowdrops890/wnako3_test/06_maru_button.html

(本当は、もうちょっと丁寧に、マウス乗った時は、ボーダーと影の色も一緒に薄めるようにしたほうがよさそう


 して、のコードは・・・

 こっコードはっ・・・・・・

<style type="text/css">
<!--
#btn {
    position:relative;                  /* 相対位置への配置(凹むボタンでtopの位置を変えるのに必要) */
    display:table-cell;                 /* コレを設定しないとwidthとheightの設定が効かない。 */
    cursor:pointer;                     /* カーソルを手の形に。 */

    width:50px;                         /* ボタンの幅。 */
    height:50px;                        /* ボタンの高さ。 */
    border-radius:30px;                 /* 角丸設定(ボタンサイズの半分よりもちょい大きめのほうが綺麗な丸になるっぽい) */
    background-color: #FFCCCC;          /* ボタンの色。 */
    border:1px solid #FF9999;           /* ボタン線色。 */
    box-shadow:1px 2px 0 #CC6666;       /* ボタンの影設定。 */

    color: #FFFFFF;                     /* 文字色。*/
    font-weight:bold;                   /* 文字太さ。*/
    font-size:24px;                     /* フォントサイズ。*/
    text-shadow:0 1px 1px rgba(0,0,0,.3);      /* 文字の影設定。*/
    text-align:center;                  /* 横方向文字揃え。 */
    vertical-align:middle;              /* 縦方向文字揃え。 */
    text-decoration:none;               /* 装飾無し(aタグには大抵下とかが付いてるので解除する) */
}
#btn:hover {                         /* マウス乗った時 */
    background-color: #FFDDDD;          /* ボタンの色を薄くする。 */
}
#btn:active {                        /* マウス押した時 */
    top: 2px;                           /* ボタン位置を下げる。 */
    box-shadow:none;                    /* 影を消す。 */
}
 -->
</style>

<!-- 丸いボタン -->
<a id="btn">OK</a>

 ・・・こんだけです。

 ええ、こんだけです。なでしこいりません。CSSだけで出来ましたw

 ってか、トランジョンとか、アニメーションとかあって、もっと凝ったことがCSSだけでもなんぼでもできるっぽいです。すごいな。

 でっでもっ、いちおうコレを全部DOMスタイル設定でやってみようと思ったんです。

 だけど、うまく出来ませんでした。しくしくしく。

 どうやら、:hover:activeは、設定できないっぽくて・・・(?)

 それに・・・はIDを振っているけど、たぶんボタンって複数あって、みんな同じよーなデザインに揃えるのがふつーだから、classでまとめて設定すると思うんだけど、コレもどうやらDOMスタイル設定ではできないっぽい・・・(?)

 ならば、DOM_HTML設定を使えば・・・とも思ったのですが、ココで浮上したのがまた、例の波カッコ閉じが使えない問題です(´д`; ←0.1.6で対応されました!

 前に、背景色設定をした時には、取りあえず閉じなくても通ったんだけど、最低でも:hover:activeとで項目が二つとゆうことになると、閉じないわけにはいないでしょ。

 それぞれにstyleタグを用意して別々にDOM_HTML設定する・・・などという方法も考えられましたが、あんまりにもやっつけ感が過ぎる上に、別に背に腹は替えられないって状況でもないんで、試してません;

 うまくなでしこで設定できるようなら、いつも使うような定型のボタンを、この見てるだけで具合わるくなるCSSをいちいちやらなくても、日本語だけで色とか文字とかサイズとかを設定して使える関数が作れるんじゃないかと思ったんだけどね。

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

2017/09/22 (金)

違うブラウザでやってみた

| 22:00 | 違うブラウザでやってみた - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - 違うブラウザでやってみた - 雪乃☆雫のなでしこ日和 違うブラウザでやってみた - 雪乃☆雫のなでしこ日和 のブックマークコメント

 ウチのブラウザは、長年Firefoxでした。

 違うのだと、果たしてどうなんですかね? ・・・っと試してみたら、なななんとIE11では、まったく動きませんでしたΣ(゜д゜;

 まいくろふと様だけにセキュリティ的な何かのブロックなんでしょうか。いちおうJavascriptは有効になってるハズなんだけど・・・(?_?)

 簡易エディタで「こんにちは」と言わせることさえ出来ません。

 なんか、「'Symbol' は定義されていません。」なるエラーメッセージがっ。

 何をどうしたらよいのか、まったく分かりませぬ~。しくしくしく。

  ↑0.1.6でIE11に対応されました! ・・・が、やっぱり動かないモノが多数~。なでしこなのか、IE11の設定なのか、CSSなのか要研究。(10/7追記)


 ・・・さて、気を取り直してGoogleChrome

 こちらは無事に表示されまして、動きました。

 がっ、ラーメンタイマーが鳴りません。

 ファイル自体は、再生できるようなんですが。

 15パズルは・・・クリック音やビープは鳴るのに、完成した時の音が鳴りません。

 どうやら、どちらもの後で音を消してるのが良くないっぽい。

 Firefoxでは、プログラムに書いた順番どうりに、まずは音が再生されてから「言う」のポップアップが開き、プログラムは停止状態で、ダイアログを閉じるのを待って次の音を消す部分が実行される・・・的な流れなんですが、Chromeでは、まずポップアップが開いてしまうみたい。して、ダイアログを閉じると、音声が再生されるんだけど、の後すぐに音を消しているので、結果音が鳴らないとゆうことになってるようです。

 なので、音を消す(audioタグを消す)部分を無くすれば、音は鳴ります。

 でも、ラーメンタイマーなんてポップアップを消した後に音が鳴ったって、まったく意味無いですよね;

 オーディオの再生だけじゃなく、15パズルの手数の書き換えや、駒入替の描画や、最後の駒の描画などが、「言う」の後に行われているようです。

 オーディオの再生言うの直前ですけど、完成判定の一番最初の手数表示や、むしろ完成判定より前に行われてるはずの駒入替の描画も、後しになってるんですね。

 まあ、待つような命令は一個も入ってないんで、書いた順番どうりに実行される保証はないってことですか。

 言うで、表示されるべき成績の作成はちゃんと言うの前に行われているようで表示に問題は無く、たぶんだけどDOM要素へ何かしている部分が後しになってるっぽいです。

 コレはどうやら、なでしこがってことでは無く、phpで作られたらしいタイマーが、Chromeではやっぱり同様の挙動をしているようなので(ポップアップを閉じた後でアラームが鳴り出すw)Chromeの仕様みたいな(?)

 うーん、どうしたらいいんですかね。

 Chromeでの避法がわかったとしても、じゃじゃじゃあまた別のブラウザは?って話になるワケだ。

 いい加減、「言う」頼みはやめて、別の方法で成績表を表示させるべき時なのかもwww

 ・・・昨日書いたCSSの設定がうまくいってますかねー?的なつもりで、ちょこっとお試ししてみただけだったのに、こんなことが発覚するとは・・・(´д`;;;

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

2017/09/19 (火)

なでしこ3でラーメンタイマー。音も鳴らすよ!

| 07:58 | なでしこ3でラーメンタイマー。音も鳴らすよ! - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - なでしこ3でラーメンタイマー。音も鳴らすよ! - 雪乃☆雫のなでしこ日和 なでしこ3でラーメンタイマー。音も鳴らすよ! - 雪乃☆雫のなでしこ日和 のブックマークコメント

 なでしこ1で作った15パズルは、手数のカウント機能とタイムトライアル機能がありました。

 手数のカウントは、すぐにもカンタンにつけれる予定なんだけど、タイマーはどうしたらいいんですかね・・・っと見ていくと、「秒毎」とゆう命令がありました!

 文字通り指定した秒毎に、指定した関数を繰り返し実行するというものです。

 マニュアルの利用例に、「」を1秒毎表示する、時計のサンプルが載っています。

https://nadesi.com/doc3/index.php?plugin_system%252F%E7%A7%92%E6%AF%8E

 ほぼ、コレだ! と思うところなのですが、しかし、コレを止める命令がないっぽい?

 なでしこ1のタイマー部品なら、「停止」が出来たんだけど・・・こっちは、一実行したら、もう永久に続けるしかない的な・・・???(´д`;

 時計と違って、完成したら、止めなくちゃ。

 でもまあ、フラグを立てて、必要の無い時にはなにもしないようにしておけば、取りあえずタイマーとして使えそう


 とゆうわけで、タイマーの実験として3分固定のカウントダウンタイマー。いわゆるラーメンタイマーを作ってみました。

 ところで、先に作った時間加算関数に、とんでもない違いが発覚Σ(゜д゜;

 なななんと、秒のところにもナゼか60を掛けてしまっていたので、秒を加算減算するような計算の場合は、結果が大変なことに・・・;;;

 既にモノスゴクこっりと直していますw

 でも、も実際に使っているのはプラグインの方。

 むむむぅ、便利~♪

#-----------------------------------------------------------------------
<!-- なでしこを使うために必要なスクリプト -->
<script src="https://nadesi.com/v3/0.1.5/release/wnako3.js?run"></script>
<!-- うぇいくさまの日付時計算プラグイン -->
<script src="http://weyk.la.coocan.jp/weyk/nadesiko3/release/plugin_weykdatetime.js"></script>
<!-- type="なでしこ" のスクリプトが実行される -->
<script type="なでしこ">
#-----------------------------------------------------------------------
# ここになでしこのプログラムを記述
#-----------------------------------------------------------------------
分=3。秒=0。

終了=0。秒=秒を2でゼロ埋めタイマーオフ。
「#time」に「{分}:{秒}」をDOMテキスト設定。
スタートボタン作成。

「ラーメンタイマー」を1秒毎。

●タイマー開始
  タイマーオン。
  「#start」の「disabled」を「disabled」にDOM属性設定。  #スタートボタンを押せなくする。
  に「+0:{分}:{秒}」を時間加算して終了代入ここまで。

●ラーメンタイマー
  もしタイマーオンならば、
    終了秒差を残秒数に代入。
    もし、残秒数<0ならば、
      「ラーメンできたよ!!」と言う。
      タイマーオフ。「#time」に「{分}:{秒}」をDOMテキスト設定。
      スタートボタン作成。
    違えば、
      残分=残秒数/60を切捨。残秒=残秒数%60を2でゼロ埋め。
      「#time」に「{残分}:{残秒}」をDOMテキスト設定。
    ここまで。
  ここまで。
ここまで。

●スタートボタン作成
  「#button」に「<button id="start">スタート!</button>」をDOM_HTML設定。
  「#start」の「onclick」に「タイマー開始」をDOMイベント設定。
ここまで。
#-----------------------------------------------------------------------
</script>

<body>
    <H1>なでしこ3てすと~ラーメンタイマー</H1>
    <HR>
    <input id="time" type="text" readonly="on" size="4" style="font-size:32px; text-align:center;">
    <span id="button"></span>
#-----------------------------------------------------------------------

 先に書いたとうり、タイマーとゆう変数オフオンをつけてラーメンタイマー関数し、オンの時だけ処理を行うようにしただけです。

 うまくいっているっぽいです。

 コレで同様にして、15パズルのタイムトライアルも作れそう


 タイマーってる時にスタートボタンを押すとリセットしてしまうので、押せないように、タイマー開始時にスタートボタンの属性を「disabled」にしてみました。

 とっところが、この「disabled」はオンオフするような性質のものではないらしく、属性「disabled」の値は「disabled」に固定・・・ってか、値なしで属性だけ書いてもOKなヤツらしいのですよ。

 一応念のため、「off」とか「false」とか「no」とかとか試したけどダメっぽい。一旦無効化したら、もう二度と有効化できないのかい???

 しようが無いので、やっつけで、もういちど<div>にスタートボタンを作り直すことに。

 上書きされて無効化した前のボタンは消えて、新しいスタートボタンが出来る感じですケド、見た目的には希望どうりです☆


 よしよし♪ ・・・と思ったのですが、ラーメンタイマー的には、タイマー終了時に音が鳴らないとかどうなんですか;

 タイマー終わるのを睨んでるくらいなら、時計見てるのといっこも変わらん;;;

 なでしこ3に音を出す的な命令は無いのですが、HTML5はなんと<audio>タグで音を鳴らすことが出来るようです!

 タイマー終了時に、このaudioを設置してやれば、音を鳴らせるんじゃないですか?!

 とゆうわけで、ボタンの下にアラーム用のdivを作り、「ラーメンできたよ!!」と言う前に、DOM_HTML設定でaudioを設置。

 「controls」属性をつけなければ、画面上には何も表示しませんが、「autoplay」属性をつけておくことで、設置と同時に鳴り始めます。

 よくある開くと同時に勝手に音が鳴り出すページは、こうゆう仕組みか?!

 アラームの停止は、やっぱりを設定することで、audioを消すコトにw

●ラーメンタイマー
  もしタイマーオンならば、
    終了秒差を残秒数に代入。
    もし、残秒数<0ならば、
      「#alarm」に「<audio src="alarm_75_8C.mp3" autoplay></audio>」をDOM_HTML設定。
      「ラーメンできたよ!!」と言う。
      「#alarm」にをDOM_HTML設定。
      タイマーオフ。「#time」に「{分}:{秒}」をDOMテキスト設定。
      スタートボタン作成。
    違えば、
      残分=残秒数/60を切捨。残秒=残秒数%60を2でゼロ埋め。
      「#time」に「{残分}:{残秒}」をDOMテキスト設定。
    ここまで。
  ここまで。
ここまで。

 そういえば、「サクラ」がバージョンアップしてたよ!

http://oto.chu.jp/top/

 ・・・といっても、素養が無いので、とうてい曲など作れないんですが、たったこんだけで、アラームっぽい音が完成w

 サクラは、ドレミで入れれんのが本当にいいよねぇ~♪

音色75 音階8 音符16 ン4【8【4 ド】【2 ッ】】

 なでしこ1ならこのまま鳴らせたんだけど・・・(なでしこで鳴らす場合は、音色は数値にしないとダメ)

 なでしこ3もストトン表記でMML演奏出来るようにならないかなぁ~w

 ともかく、MMLどころかaudioはMIDIファイルも鳴らせないっぽいので、何かでmp3とかに変換しなきゃないですねー。

 サクラでmp3保存できたらとても便利なんですが。

 でもまあ、無料で変換してくれるサイトもフリーソフトもいろいろありますからねぇ~☆


 でっ、ラーメンタイマー、音が鳴るバージョン。

http://www.geocities.jp/snowdrops890/wnako3_test/05_RamenTimer.html

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

2017/09/15 (金)

15パズル改 ~canvasと関数を動的に(?)作るよ!

| 08:31 | 15パズル改 ~canvasと関数を動的に(?)作るよ! - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - 15パズル改 ~canvasと関数を動的に(?)作るよ! - 雪乃☆雫のなでしこ日和 15パズル改 ~canvasと関数を動的に(?)作るよ! - 雪乃☆雫のなでしこ日和 のブックマークコメント

 ひっ、ひらめきました!w

 DOMイベント設定に指定する関数には引数がつけれないっぽいとか、DOM要素作成canvasを作ると、後から(実際の)サイズは変えれないラシイとか、いろいろと散々ぼやいた末に、ほぼヤケクソでマウスクリックようの関数と<canvas>タグをそれぞれ16個並べて無理矢理感満載の15パズルを作ったわけですが・・・

 DOM_HTML設定はDOM_HTML設定で、上書きで前のが消えてしまうから出来ないと思っていたんだけど、何のことは無い、変数一行追加で作っていって、最後にまとめてDOM_HTML設定すればいいんじゃ?!

 してして、関数の方も同様にして「ナデシコする」で設置できました!

 っこー書き換え(^▽^;;

<script type="なでしこ">
#---宣言------
駒=配列。
駒サイズ=100。
駒色=["AAAAFF","FFAAAA","FFDDAA","AAFFAA","DDDDDD"]
アキ=15。
新規ゲーム待ち=オン。

#---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イベント設定。
ここまで。

新規ゲーム。

#-----新規ゲーム--------------------------------------------------------
●新規ゲーム
  #---初期化------
  アキ=15。            #アキ位置を初期化。
  数を0から15まで繰り返す。    #駒位置を初期化
    駒[数]=数。
  ここまで。

  #---問題作成------
  1000
    rは4の乱数。rで駒入替。
  ここまで。

  駒描画。新規ゲーム待ち=オフここまで。

●駒描画
  #---画面描画------
  数を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。
  ここまで。
ここまで。

#なでしこ3に「配列入れ替え」はない。
●配列入替(AのIとJを)
  II=A[I]。JJ=A[J]。
  A[I]=JJ。A[J]=II。
ここまで。
#-----------------------------------------------------------------------

#-----マウス判定--------------------------------------------------------
●マウス押下時(Noの)
  もし、新規ゲーム待ち=オフならば、
    もし、駒[No]<15ならば、
      もし、No+4=アキならば、0で駒入替。
      もし、No-4=アキならば、1で駒入替。
      もし、No+1=アキならば、2で駒入替。
      もし、No-1=アキならば、3で駒入替。
      駒描画。完成判定。
    ここまで。
  ここまで。
  もし、新規ゲーム待ち=オンならば、   #なぜか「違えば」がうまく出来ない?
    「もう一度?」で二択。
    もしそれはいならば、新規ゲーム。
  ここまで。
ここまで。
#-----------------------------------------------------------------------

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

    <H1>なでしこ3で15パズル ver.1.01</H1>
    <HR>
      <div id="game" class="game" style="text-align: center;"></div>

 どうでしょう。問題なく同じに動いてると、思うんだけど・・

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


 無理矢理感が完全に払拭されたわけでもないけど、コードのダサい見た目も解消されて行数も節約できて、してコレなら100個とか作っても大丈夫・・かも?!(まぢか;)

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

2017/09/14 (木)

なでしこ3でも15パズルを作るよ!

| 07:31 | なでしこ3でも15パズルを作るよ! - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - なでしこ3でも15パズルを作るよ! - 雪乃☆雫のなでしこ日和 なでしこ3でも15パズルを作るよ! - 雪乃☆雫のなでしこ日和 のブックマークコメント

 ちょっと無理矢理な感じもするケド、イベントが使えるようになったことで出来そう感がでてきたので、やっぱりゲームが作りたいなぁ~

 ・・・っとゆうわけで、でんせつの15パズルをなでしこ3でも作ってみたよ!

 ちなみに何が伝説かって、これがワタシが最初に作ったプログラムだったんだけど、それがなんと、の当時のなでしこコミュニティーコンテストで最優秀賞を頂戴してしまったとゆう・・・(自慢かよ!?;)

 ・・・いやしかし、一体ナゼなのか、もって分からんね;

 おらく、初心者のしろーとが、結構こだわってノリノリで作ってたので、後も精進しろよとゆうことだったに違いないね。

 っ、それはともかく15パズルです。

 そうそう、なんとなでしこ3では、「配列入れ替え」が無くなってしまったんだね。

 15パズルは基本的に、配列入れ替えをしてはそれを画面に反映するの繰り返しなのですよ。

 もっとも、考えたら、入れ替えたい二つを別々の変数に一時記憶して、ばくりっこするだけのカンタンな関数でしたが。

 とりあえず、単に15パズルの出来るver.1の段階まで。

<script type="なでしこ">

#---宣言------
駒=配列。
駒サイズ=100。
駒色=["AAAAFF","FFAAAA","FFDDAA","AAFFAA","DDDDDD"]
アキ=15。
新規ゲーム待ち=オン。

#---イベント設定------
数を0から15まで繰り返す。
  「#cv{数}」の「onmousedown」に「マウス押下時{数}」をDOMイベント設定。
ここまで。

新規ゲーム。

#-----新規ゲーム--------------------------------------------------------
●新規ゲーム
  #---初期化------
  アキ=15。            #アキ位置を初期化。
  数を0から15まで繰り返す。    #駒位置を初期化
    駒[数]=数。
  ここまで。

  #---問題作成------
  1000
    rは4の乱数。rで駒入替。
  ここまで。

  駒描画。新規ゲーム待ち=オフここまで。

●駒描画
  #---画面描画------
  数を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。
    ここまで。
  ここまで。
ここまで。

#なでしこ3に「配列入れ替え」はない。
●配列入替(AのIとJを)
  II=A[I]。JJ=A[J]。
  A[I]=JJ。A[J]=II。
ここまで。
#-----------------------------------------------------------------------

#-----マウス判定--------------------------------------------------------
●マウス押下時(Noの)
  もし、新規ゲーム待ち=オフならば、
    もし、駒[No]<15ならば、
      もし、No+4=アキならば、0で駒入替。
      もし、No-4=アキならば、1で駒入替。
      もし、No+1=アキならば、2で駒入替。
      もし、No-1=アキならば、3で駒入替。
      駒描画。完成判定。
    ここまで。
  ここまで。
  もし、新規ゲーム待ち=オンならば、   #なぜか「違えば」がうまく出来ない?
    「もう一度?」で二択。
    もしそれはいならば、新規ゲーム。
  ここまで。
ここまで。

●マウス押下時0
  0のマウス押下時。
ここまで。

●マウス押下時1
  1のマウス押下時。
ここまで。

●マウス押下時2
  2のマウス押下時。
ここまで。

●マウス押下時3
  3のマウス押下時。
ここまで。

●マウス押下時4
  4のマウス押下時。
ここまで。

●マウス押下時5
  5のマウス押下時。
ここまで。

●マウス押下時6
  6のマウス押下時。
ここまで。

●マウス押下時7
  7のマウス押下時。
ここまで。

●マウス押下時8
  8のマウス押下時。
ここまで。

●マウス押下時9
  9のマウス押下時。
ここまで。

●マウス押下時10
  10のマウス押下時。
ここまで。

●マウス押下時11
  11のマウス押下時。
ここまで。

●マウス押下時12
  12のマウス押下時。
ここまで。

●マウス押下時13
  13のマウス押下時。
ここまで。

●マウス押下時14
  14のマウス押下時。
ここまで。

●マウス押下時15
  15のマウス押下時。
ここまで。
#-----------------------------------------------------------------------

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



<CENTER><H1>なでしこ3で15パズル ver.1</H1></CENTER>
<div class="game" style="text-align: center;">
    <canvas id="cv0" width="100" height="100"></canvas>
    <canvas id="cv1" width="100" height="100"></canvas>
    <canvas id="cv2" width="100" height="100"></canvas>
    <canvas id="cv3" width="100" height="100"></canvas>
    <BR>
    <canvas id="cv4" width="100" height="100"></canvas>
    <canvas id="cv5" width="100" height="100"></canvas>
    <canvas id="cv6" width="100" height="100"></canvas>
    <canvas id="cv7" width="100" height="100"></canvas>
    <BR>
    <canvas id="cv8" width="100" height="100"></canvas>
    <canvas id="cv9" width="100" height="100"></canvas>
    <canvas id="cv10" width="100" height="100"></canvas>
    <canvas id="cv11" width="100" height="100"></canvas>
    <BR>
    <canvas id="cv12" width="100" height="100"></canvas>
    <canvas id="cv13" width="100" height="100"></canvas>
    <canvas id="cv14" width="100" height="100"></canvas>
    <canvas id="cv15" width="100" height="100"></canvas>
</div>

 マウスの判定が・・・・・・(爆)

 いろいろ試したけど、やっぱりこれ以外ではうまく出来なかった。

 15パズルくらいまでは、まだこれでもイイですけれどねぇ~;;;

 でもとりあえずは希望通りに、15パズルで遊ぶことは出来ます♪

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


 いちおう、またスマホにも対応してみた。

 だけど、スマホの場合は、「onmousedown」も「onclick」も同じくタップ(?)指を離した時に発動するみたいなんだよね。してスマホだと、どうしてもフリック(?)しゅっと駒を動かしたくなっちゃうんで、かえって動かないってゆうね;

 ・・・だから、なんぼでもアプリが転がってるだろとか言わないで~。折角スマホとかでも動くよ!っていうのがウリなんだから、ちょこっと試してみたいってゆうか。

 でっ、結局一番時が掛かったのは、なでしこのことではなく、幅はいいんだけど、横持ちした場合に縦(狭い方)に合わせて縮小するには一体どうしたらいいんすかってことでしたとさ;

 縦の場合は、<html>や<body>はもとより、上位の要素全てに、「height」の設定が必要となるようです。

 幅420px以下と高さ420px以下と、別っこに設定してるので、どっちも420px以下の画面では、駒の比率が変なことになりますが、んなちっちゃこい端末って、ないよね?!


 そう言えば、文字描画」のyの値は、文字の下側の値みたいなんだよね。

 なでしこ1では、x,yで左上の位置を指定することになっていたんだけど、なでしこ3では文字の左下の位置を指定しなければならないようです。

 途中で文字の大きさを変えたりした時にも文字の底辺が揃えやすいから、こっちの方がイイかもしないけど、要注意です。

canvas#nako3_canvas_1」のDOM要素取得。それへ描画開始。
赤色線色設定。白色塗り色設定。
y=24。
[0,y]から[300,y]へ描画。
黒色塗り色設定。「{y}px Aria」に描画フォント設定。
[0,y]へ「いろはにほへと」の文字描画。
「12px Aria」に描画フォント設定。
[y*7,y]へ「ちりぬるを」の文字描画

公式ページの簡易エディタで動きます。

https://nadesi.com/doc3/index.php?%E3%81%AA%E3%81%A7%E3%81%97%E3%81%933%E7%B0%A1%E6%98%93%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF

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