Hatena::Groupnadesiko

雪乃☆雫のなでしこ日和

2017/12/08 (金)

ジャンケンマン的な・・・?

| 13:47 | ジャンケンマン的な・・・? - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - ジャンケンマン的な・・・? - 雪乃☆雫のなでしこ日和 ジャンケンマン的な・・・? - 雪乃☆雫のなでしこ日和 のブックマークコメント

 色々気が多くなって、あちこち手を付けると結局どれもこれも進まない

 ただでさえ、12月は忙しいしねぇ~;;;


 前、(https://nadesiko.g.hatena.ne.jp/snowdrops89/20171121/1511244526

 # --- イベントを設定 --- (*3)
 「#gu」をクリックした時には、0で勝負処理。ここまで。
 「#choki」をクリックした時には、1で勝負処理。ここまで。
 「#pa」をクリックした時には、2で勝負処理。ここまで。

 みたいな書き方ができるようになったことを知り、一体いつからだろうとゆうことを書いていたんですが、どうも手元で試そうとするとうまくできないにゃー・・・と思っていたら、どうやらバージョン0.1.8からの機能のようです。

 正式にリリースのお知らせが出たのはバージョン0.1.7までなんだけど、最新版はわりとの後すぐに、こっと0.1.8にアップしていたんだね。

 よかったぁ~☆(ずっと前からできてたのに単にワタシが知らなかっただけってはなしじゃなくてw)


 さてさて、ジャンケンはまあ、それだけでもゲームとして成立しているとも言えますが、いかんせん単純すぎるので、たいていは何かを決める時くらいにしか使わないですケド、それだけで長く遊べるジャンケンのゲームと言えば、グリコジャンケンかジャンケンマンかってところだと思います。

 ジャンケンマンってのは、ムカシ駄菓子屋さんの店先やデパートの遊戯スペースなんかに置かれていたメダルゲーム機です。

 ゲームセンターCXでたまに有野カチョーが駄菓子屋でプレイしているのをお見かけするのは、ジャンケンに勝つとルーレットがって止まったところの点数に応じて勝手にメダルが払い戻されるとゆうことになってるみたいなんですが、ワタシが知ってるのはそうじゃ無かった。

 一勝つと2、こから連勝を続けると4→8→16→32と最大5連勝まで得点がアップしていき、自分でメダル戻しをすることでの得点に応じてメダルが払い戻されたんだけど、途中で負けるとそれまでの得点がチャラになってしまうので、どこで払い戻すか勝負をかけるかは考えどころでした。


 ・・・とゆうわけで(?)前のマイナビの記事のジャンケンゲームをちょこっと改造して、なんかこんな感じだったかにゃあ・・・とゆうのを作ってみた。

<script type="なでしこ">

#---宣言-----
メダル=11。
連勝回数=0。
得点=0。
判定=。
ジャンケンフラグ=オフ。

# --- HTMLを定義 --- (*1)
「#nako3_div_1」に「
<div style="padding:15px; border:1px solid silver;">
  <div id="mes"></div>
  <BR>
  <div id="janken"></div>
  <BR>
  <div id="point"></div>
  <div id="coin"></div>

  <div id="hand">
    <button id="start">スタート</button>  
    <button id="gu">グー</button>
    <button id="choki">チョキ</button>
    <button id="pa">パー</button>  
    <button id="modosi">メダル戻し</button>
  </div>
</div>
」をDOM_HTML設定

# --- HTMLのスタイルを定義 --- (*2)
文字スタイルは、{
  "font-size": "24px",
  "padding": "10px",
  "line-height": "35px"
}
「#mes」に文字スタイルをDOMスタイル一括設定。
「#janken」に文字スタイルをDOMスタイル一括設定。
「#point」に文字スタイルをDOMスタイル一括設定。
「#coin」に文字スタイルをDOMスタイル一括設定。
「#hand button」に文字スタイルをDOMスタイル一括設定。

#---画面表示------
「#mes」に「じゃんけんしよう!☆スタートボタンを押してね☆」をDOMテキスト設定。
「#janken」に「連勝すると得点アップ!最大5連勝まで。<br>メダル戻しでポイントをメダルに替えられます。」をDOMテキスト設定。
「#point」に「ポイント:0点」をDOMテキスト設定。
「#coin」に「残りメダルは{メダル}枚です」をDOMテキスト設定。

# --- イベントを設定 --- (*3)
「#gu」をクリックした時には、0で勝負処理。ここまで。
「#choki」をクリックした時には、1で勝負処理。ここまで。
「#pa」をクリックした時には、2で勝負処理。ここまで。
「#start」をクリックした時には、スタート。ここまで。
「#modosi」をクリックした時には、メダル戻。ここまで。

●(自手で)勝負処理
  もし、ジャンケンフラグ=オンでなければ、戻る。
  敵手=3の乱数。
  結果は(敵手 - 自手 + 3) % 3
  もし、判定=「あいこ」ならば、掛声=「しょっ!」
  違えば、掛声=「ポン!」

  もし、結果が0ならば、
    判定は「あいこ」
    メッセージは「あーいこーで...」
  ここまで。
  もし、結果が1ならば、
    判定は「やったね!」
    得点加算。
    もし、得点=32ならば、
      メダル戻説明は。
      メッセージは「5連勝!ポイントを払い戻すよ!」
    違えば、
      メダル戻説明は「ポイントはメダル戻しでメダルに替えられます」。
      メッセージは「☆スタートボタンを押してね☆」
    ここまで。
    「#point」に「ポイント:{得点}点  {メダル戻説明}」をDOMテキスト設定。
  ここまで。
  もし、結果が2ならば、
    判定は「ズコー」
    「#point」に「ポイント:0点」をDOMテキスト設定。
    もし、メダル≦0ならば、
      もし、得点=0ならば、メッセージは「★メダルが無くなりました。終了です★」
      違えば、メッセージは「ポイントは没収です。★メダルが無くなりました。終了です★」
      ジャンケンフラグ=キャンセル。
    違えば、
      もし、得点=0ならば、メッセージは「☆スタートボタンを押してね☆」
      違えば、メッセージは「ポイントは没収です。☆スタートボタンを押してね☆」
      連勝回数=0。得点=0。
      ジャンケンフラグ=オフ。
    ここまで。
  ここまで。
  「#mes」にメッセージをDOMテキスト設定。
  手説明=["グー","チョキ","パー"]
  自手説明=手説明[自手]
  敵手説明=手説明[敵手]
  「#janken」に「<b>{掛声}</b><br>
相手は<b>{敵手説明}</b> ... {判定}」をDOM_HTML設定。
ここまで。
#-----------------------------------------------------------------------
●得点加算
  連勝回数=連勝回数+1。
  もし、(連勝回数≧1)かつ(連勝回数≦5)ならば、得点=2^連勝回数。
  もし、連勝回数=5ならば、
    ジャンケンフラグはキャンセル。「メダル戻」を2秒後。
  違えば、
    ジャンケンフラグ=オフ。
  ここまで。
ここまで。
#-----------------------------------------------------------------------
●スタート
 もし、ジャンケンフラグ=オフならば、
  もし、得点=0ならば、メダル=メダル-1。
  「#point」に「ポイント:{得点}点」をDOMテキスト設定。
  「#coin」に「残りメダルは{メダル}枚です」をDOMテキスト設定。
  「#mes」に「じゃーんけーん...」をDOMテキスト設定。
  「#janken」に「 <br> 」をDOMテキスト設定。
  ジャンケンフラグ=オン。
 ここまで。
ここまで。

●メダル戻
 もし、(ジャンケンフラグ≠オン)かつ(得点>0)ならば、
  メダル=メダル+得点。連勝回数=0。得点=0。
  「#coin」に「残りメダルは{メダル}枚です」をDOMテキスト設定。
  「#mes」に「☆スタートボタンを押してね☆」をDOMテキスト設定。
  「#janken」に「 <br> 」をDOMテキスト設定。
  「#point」に「ポイント:0点」をDOMテキスト設定。
  ジャンケンフラグ=オフ。
 ここまで。
ここまで。
#-----------------------------------------------------------------------
</script>
<H1>ジャンケンマン的な・・・</H1>
<HR>
<div id="nako3_div_1"></div>
<HR>

http://www.geocities.jp/snowdrops890/wnako3_test/12_jyanken_man.html

 どうかなあ? ルール的にはタブンこんな感じだったと思うんだけど・・・

 やっぱり、ラシイ画像を使って実機っぽく作らないと、こうゆうのは面白くないよね;

 これまで丸いボタンも作ったし、CSSアニメーションなんかも覚えたので、それらを使ってちゃんとゲームらしくしてみたいね。


 ・・・ところでコレ、16(4連勝)までは結構行くんだけど、32(5連勝)まで行けたことは一度も無いので、絶対にズルをされているんだと思ってたんだけど、こうして作ってみると案外・・・リアルかもしない

 テストで何もやったけど、まだ一度たりとも32まで行ってないです;;;

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

2017/11/21 (火)

新機能?!と、ジャンケンの勝敗判定のこととか

| 15:08 | 新機能?!と、ジャンケンの勝敗判定のこととか - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - 新機能?!と、ジャンケンの勝敗判定のこととか - 雪乃☆雫のなでしこ日和 新機能?!と、ジャンケンの勝敗判定のこととか - 雪乃☆雫のなでしこ日和 のブックマークコメント

 マイナビ連載16目はジャンケンでした。

 http://news.mynavi.jp/series/nadeshiko/016/

 でも、注目すべきはジャンケンよりも何よりもっ・・・

 # --- イベントを設定 --- (*3)
 「#gu」をクリックした時には、0で勝負処理。ここまで。
 「#choki」をクリックした時には、1で勝負処理。ここまで。
 「#pa」をクリックした時には、2で勝負処理。ここまで。

 こっ、こんな書き方が出来たとわっ!!!

 うわあぁん、全然知らなかった。一体いつからデスか?!?!

 しかし、コレは大変素晴らしいですよ(≧▽≦)

 「ここまで」が必要なことを除けば、ほとんどなでしこ1のGUIとおんなじ感じにイベントを設定できるじゃないですか♪

 しかもしかも、DOMイベント設定ではどうもうまく出来なかった、関数引数がふつーに付けられるようですヽ(^o^)ノ

 他のイベントもみんな使えるのかなー?

 とりあえず、「マウス押した時」「マウス離した時」は使えることを確認☆


 それから、項目は追加されたけど説明が一切無くて、なんかよく分からんと思っていた「DOMスタイル一括設定」の仕方も分かりました。

 これも、使えそうですね☆

 までは、スタイルのタグだけ作って置いて、DOM_HTML設定したりしてたんですが。

 本当はスタイルもね、DOMスタイル設定のよーに、いっこいっこ書いていく場合なら、できればなでしこ1みたいに日本語で書けると助かるのに・・・などと思ったりするところなんだけど、CSSを学びまくっている現状では結局、CSS的にまとめて書いたほうが早いってゆうかw


 ところで、ジャンケンの勝敗判定ですけど・・・

 結果は(敵手 - 自手 + 3) % 3
 もし、結果が0ならば、判定は「あいこ」
 もし、結果が1ならば、判定は「勝ち★」
 もし、結果が2ならば、判定は「負け」

 この4行・・・ってゆうか、下の三行は単に日本語で勝ち負けを表示させるための処理なんで、実質最初の一行だけで、計算出来ちゃうってコトなんですね!w(゜o゜)w

 しかし、なんでんなコトが可能なのかについての解説はありません。

 世の中の賢い方々にとっては、こんなの一見して分かるべきカンタンなコトなんですかね?!

 なにしろワタシは数学・・・以前の算数の段階で挫折している人です;

 九九の表が信用できずに、小豆(!)を並べて数えたりしてましたw

 そうゆう検証が難しくなった時点で、算数が分からなくなっていきました;;;

 でも、このくらいの式なら、全部を検証してみることが出来そう


0,ジャンケンの勝敗表

            |        自        手
            |-----------------------------
            | グー(0) |チョキ(1)| パー(2) 
 -----------|---------|---------|---------
  | グー(0) | あいこ  | 負け;  | 勝ち★  
敵|---------|---------|---------|---------
  |チョキ(1)| 勝ち★  | あいこ  | 負け;  
手|---------|---------|---------|---------
  | パー(2) | 負け;  | 勝ち★  | あいこ  
 -----------------------------------------

 表にすると、こうゆうこと。

 して、あいこ=0、勝ち★=1、負け=2、とゆう計算結果になる予定。

 全部で9パターンしかないから地道な検証もヨユウですw


1,敵手-自手

            |        自        手
            |-----------------------------
            | グー(0) |チョキ(1)| パー(2) 
 -----------|---------|---------|---------
  | グー(0) | 0-0=0   | 0-1=-1  | 0-2=-2  
敵|---------|---------|---------|---------
  |チョキ(1)| 1-0=1   | 1-1=0   | 1-2=-1  
手|---------|---------|---------|---------
  | パー(2) | 2-0=2   | 2-1=1   | 2-2=0   
 -----------------------------------------

 あいこはまあ分かるんだよねー。

 同一の手を出したらあいこなんだから、引けば0になる道理。

 して、どうやら、自手がグーだった場合の結果が基準となるっぽい。


2,+3(3を足します)

            |        自        手
            |-----------------------------
            | グー(0) |チョキ(1)| パー(2) 
 -----------|---------|---------|---------
  | グー(0) | 0+3=3   | -1+3=2  | -2+3=1  
敵|---------|---------|---------|---------
  |チョキ(1)| 1+3=4   | 0+3=3   | -1+3=2  
手|---------|---------|---------|---------
  | パー(2) | 2+3=5   | 1+3=4   | 0+3=3   
 -----------------------------------------

 むむむ・・・


3,%3(3で割った余り

            |        自        手
            |-----------------------------
            | グー(0) |チョキ(1)| パー(2) 
 -----------|---------|---------|---------
  | グー(0) | 3%3=0   | 2%3=2   | 1%3=1   
敵|---------|---------|---------|---------
  |チョキ(1)| 4%3=1   | 3%3=0   | 2%3=2   
手|---------|---------|---------|---------
  | パー(2) | 5%3=2   | 4%3=1   | 3%3=0   
 -----------------------------------------

 おおぉ?!

 1余り・・・となるものと、0余り・・・となるものがあるけど、ここでちゃんと計算がろいました☆

 実は、1の(敵手-自手)をした時に、答えがマイナスだった場合にだけ3を足せば、同じように計算がろうんだよね。

 こんな感じ?

結果は敵手-自手。
もし、結果<0ならば、結果=結果+3。
もし、結果=0ならば、判定は「あいこ」
もし、結果=1ならば、判定は「勝ち★」
もし、結果=2ならば、判定は「負け」

 いやいや、まてまて。分かってきた!

 もうちょっと戻って、(敵手-自手)の前に、敵手(引かれる数)が自手(引く数)より小さかった場合(答えがマイナスになってしまう場合)に、敵手に3を足して答えがプラスの値になるようにするのだとも考えられます。

 ジャンケンの手は3つしか無いから、0=グー。1=チョキ。2=パー・・・ときたら、3はまたグーで、4=チョキ、5=パー・・・とゆうことになるんだよね。

 敵手を直接変えちゃったら、プログラム上は後で手説明の時に困るけど、まあ判定のことだけ考えれば、こうゆうこったろう。

もし、敵手<自手ならば、敵手=敵手+3。
結果は敵手-自手。
もし、結果=0ならば、判定は「あいこ」
もし、結果=1ならば、判定は「勝ち★」
もし、結果=2ならば、判定は「負け」

 だけど、もしとか使わずに、一つの計算式だけで済ますために、いっかい全部に3を足してからまた3で割っているんだね。余りが0、1、2にろうのは15パズルでもやったのでした。


 それにしても一体誰が考えつくんだろう、こんなこと。

 天才だね!!

2017/11/15 (水)

サイコロを転がすよ!

| 15:17 | サイコロを転がすよ! - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - サイコロを転がすよ! - 雪乃☆雫のなでしこ日和 サイコロを転がすよ! - 雪乃☆雫のなでしこ日和 のブックマークコメント

 マイナビ連載15目は、サイコロと擬似乱数についてでした。

http://news.mynavi.jp/series/nadeshiko/015/

 乱数の使い方は、6目のかずあてゲームでやったじゃーん・・・と思ったら、乱数とゆうものを、いかにしてコンピューターで生成するのか的な、より突っ込んだ内容になってました。

 うおおぉぅ、ナンカヨクワカラン・・・(*_*;;;

 ケド、ちょっと賢くなった気がする(気のせい;)


 いいんだい!

 仕組みなんか知らなくたって、サイコロは作れるもね~(こら;)

 とゆうわけで(?!)大好きなサイコロを転がしてみようと思う。

 CSS3のanimationを使って、文字通り転がします。

 って言っても3D(立方体)ではなく2D(正方形)ですケドね~。


 単に要素に転を掛けながら移動させるのは、例によってなでしこなくてもCSSだけで可能でした。

<script type="なでしこ">
#-----------------------------------------------------------------------
# サイコロを転がしたい
#-----------------------------------------------------------------------
</script>

<style type="text/css">
<!--
#dice {
	margin:auto; width:50px; height:50px; background:#FF9999;
	animation:roll-dice 1s linear;
}
@keyframes roll-dice{
	0% {transform: translate(-350px,0px) rotate(0deg);}     /* 初期位置 */
	100%{transform: translate(0px,0px) rotate(360deg);}     /* 終了位置 */
}
 -->
</style>

<H1>CSS3てすと~アニメーションで転がす</H1>
<HR>
<div id="dice">*</div>
<HR>

http://www.geocities.jp/snowdrops890/wnako3_test/11_animation_test.html

 #diceに設定したanimationプロパティでは「roll-dice」とゆうキーフレームに従って、1秒かけて、最初から最後まで一定の速さで変化する的な指定になっています。

 最初の状態(0%)と最後の状態(100%)を指定しただけで、このよーに転がります!

 キーフレームは、アニメーションの開始(0%)から完了(100%)までを自由に区切って、それぞれの時点のスタイルを設定することになっていて、細かく区切って指定すると、ただ転がすだけじゃなく、こんなふうにして弾ますこともできました。

@keyframes roll-dice{
	0% {transform: translate(-350px,-100px) rotate(45deg);}     /* 初期位置 */
	10% {transform: translate(-350px,0px) rotate(90deg);}       /* 落下地点 */
	25% {transform: translate(-300px,-60px) rotate(180deg);}    /* 1st頂点 */
	40% {transform: translate(-250px,0px) rotate(270deg);}      /* 1st着地点 */
	50% {transform: translate(-200px,-40px) rotate(360deg);}    /* 2nd頂点 */
	60% {transform: translate(-150px,0px) rotate(450deg);}      /* 2nd着地点 */
	70% {transform: translate(-100px,-20px) rotate(540deg);}    /* 3rd頂点 */
	80% {transform: translate(-50px,0px) rotate(630deg);}       /* 3rd着地点 */
	100%{transform: translate(0px,0px) rotate(720deg);}         /* 終了位置 */
}

http://www.geocities.jp/snowdrops890/wnako3_test/11_animation_test2.html

 でも、地面から頂点までの指定が直だから、なんか動きがカクカクしてんだよね~;

 こうゆうのも、知恵とセンスが問われるところなんだろう・・・><


 ・・・でっ、取りあえずボタンを押したらサイコロが転がるプログラム。

<script type="なでしこ">
#-----------------------------------------------------------------------
# サイコロ
#-----------------------------------------------------------------------
#-----宣言--------------------------------------------------------------
出目は配列。
サイコロ転数=-1。

#---ダイス設定-----
ダイスサイズ=80。ダイス太=1。角丸=オン。
ダイス色=[
["#FFBBBB","#CC3333","#330000"],
["#BBFFBB","#33CC33","#003300"],
["#BBBBFF","#3333CC","#000033"],
["#FFBBFF","#CC33CC","#330033"],
["#FFFFBB","#CCCC33","#333300"],
["#BBFFFF","#33CCCC","#003333"]
]// "地色","文字色" ,"線色"

#---ダイスアニメーション設定-----
転秒数=0.8。
回数転秒数*10。
初期位置=「-350px,0px」
終了位置=「200px,240px」
初期角度=0。
終了角度=1080。

#-----メイン------------------------------------------------------------
「#play」の「onclick」に「サイコロ振」をDOMイベント設定。
サイコロ初期化。

#-----------------------------------------------------------------------
●サイコロ初期化
  ダイス文字サイズ=ダイスサイズ/3*2。
  もし、角丸=オンならば、角丸サイズ=ダイスサイズ/4。
  違えば、角丸サイズ=0。

  「#dice」の「margin」に「auto」をDOMスタイル設定。
  「#dice」の「width」に「{ダイスサイズ}px」をDOMスタイル設定。
  「#dice」の「height」に「{ダイスサイズ}px」をDOMスタイル設定。
  「#dice」の「text-align」に「center」をDOMスタイル設定。
  「#dice」の「line-height」に「{ダイスサイズ}px」をDOMスタイル設定。
  「#dice」の「font-size」に「{ダイス文字サイズ}px」をDOMスタイル設定。
  「#dice」の「border-radius」に「{角丸サイズ}px」をDOMスタイル設定。

  「#dice」の「transform」に「translate({終了位置}) rotate({終了角度}deg)」をDOMスタイル設定。
  サイコロ転設定=「@keyframes roll-dice{波カッコ}
	0%  {波カッコ}transform: translate({初期位置}) rotate({初期角度}deg);{波カッコ閉じ}     /* 初期位置 */
	100%{波カッコ}transform: translate({終了位置}) rotate({終了角度}deg);{波カッコ閉じ}     /* 終了位置 */
{波カッコ閉じ}」
  「#style」にサイコロ転設定をDOM_HTML設定。
ここまで。

●サイコロ振
  (回数
    rは6の乱数。
    出目[回数-1]はr+1。
  ここまで。
  サイコロ転数=0。
  「#dice」の「animation」に「roll-dice {転秒数}s linear」をDOMスタイル設定。
  サイコロ描画。
ここまで。

●サイコロ描画
  もし、(サイコロ転数≧0)かつ(サイコロ転数<回数)ならば、
    「#dice」の「background」にダイス色[出目[サイコロ転数]-1][0]をDOMスタイル設定。
    「#dice」の「color」にダイス色[出目[サイコロ転数]-1][1]をDOMスタイル設定。
    「#dice」の「border」に「{ダイス太}px solid 」&ダイス色[出目[サイコロ転数]-1][2]をDOMスタイル設定。
    「#dice」に出目[サイコロ転数]をDOMテキスト設定。
    サイコロ転数=サイコロ転数+1。
    「サイコロ描画」を(転秒数/回数)秒後。
  違えば、
    「#dice」の「animation」にDOMスタイル設定。
    サイコロ転数=-1。
  ここまで。
ここまで。
#-----------------------------------------------------------------------
</script>

<H1>なでしこ3てすと~サイコロを振る</H1>
<HR>
<style id="style"></style>
<div id="base" style="margin:auto; height:400px;">
  <button id="play">サイコロを振る</button>
  <div id="dice"></div>
</div>
<HR>

http://www.geocities.jp/snowdrops890/wnako3_test/11_dice_test.html

 結局、転がるだけですw

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

2017/11/11 (土)

神経衰弱

| 23:17 | 神経衰弱 - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - 神経衰弱 - 雪乃☆雫のなでしこ日和 神経衰弱 - 雪乃☆雫のなでしこ日和 のブックマークコメント

 飼っていたうさぎさんが亡くなり、非常にテンション低く毎日泣き暮らしております。

 め・゚゚・(≧д≦)・゚゚・。

 なんかもう、今年は年賀状は出さずに喪中葉書にしようかとさえ思ってる;;;


 さて、カードをめくると言えば神経衰弱・・・っとゆうわけで、前学んだCSSを使って、ちょっと神経衰弱にしてみました。

 単にひとりで神経衰弱するだけですが、一応遊べると思います。

<script type="なでしこ">
#-----------------------------------------------------------------------
# 神経衰弱
#-----------------------------------------------------------------------

#---宣言------
カード幅=63。カード高=89。
カード横マージン=10。カード縦マージン=10。

横=4。縦=2。
枚数=横*縦。  //当然だけど偶数じゃなきゃダメ。連番で枚数/2枚の画像を用意。

一枚目=-1。
一枚目位置=-1。
二枚目=-1。
二枚目位置=-1。
場札=配列。
当音=「http://www.geocities.jp/snowdrops890/audio/atari.mp3」
外音=「http://www.geocities.jp/snowdrops890/audio/hazure.mp3」
完成音=「http://www.geocities.jp/snowdrops890/audio/Fanfare_53.mp3」
カウンター=0。

#---場札の初期化------
数を0から(枚数-1)まで繰り返す。
  場札[数]=数/2を切捨。
ここまで。
場札を配列シャッフル。

#---カード配置とカード開閉関数設置------
game幅=(カード幅+カード横マージン)*横。game高=(カード高+カード縦マージン)*縦。
カードHTML。スタイルHTML=「<style>#game{波カッコ}margin:auto; width: {game幅}px; height: {game高}px;</style>{改行}」
カード開関数。カード閉関数。
数を0から(枚数-1)まで繰り返す。
  カード開関数=カード開関数に「●カード開{数}{改行}  {数}のカード開。{改行}ここまで。{改行}{改行}」を一行追加。
  カード閉関数=カード閉関数に「●カード閉{数}{改行}  {数}のカード閉。{改行}ここまで。{改行}{改行}」を一行追加。
  スタイルHTML=スタイルHTMLに「<style id="style_{数}"></style>」を一行追加。
  回数=数+1。札=場札[数]
  T=数/横を切捨。T=T*(カード高+カード縦マージン)。L=数%横*(カード幅+カード横マージン)。
  もし回数%横=0ならば、
    カードHTML=カードHTMLに「
  <span id="card_{数}" class="card">
    <img id="omote_{数}" class="omote" src="http://www.geocities.jp/snowdrops890/image/card{札}.png" style="top:{T}px; left:{L}px;">
    <img id="ura_{数}" class="ura" src="http://www.geocities.jp/snowdrops890/image/card_ura.png" style="top:{T}px; left:{L}px;">
  </span>{改行}」を一行追加。
  違えば、
    カードHTML=カードHTMLに「
  <span id="card_{数}" class="card">
    <img id="omote_{数}" class="omote" src="http://www.geocities.jp/snowdrops890/image/card{札}.png" style="top:{T}px; left:{L}px;">
    <img id="ura_{数}" class="ura" src="http://www.geocities.jp/snowdrops890/image/card_ura.png" style="top:{T}px; left:{L}px;">
  </span>」を一行追加。
  ここまで。
ここまで。
「#game」にカードHTMLをDOM_HTML設定。
「#style」にスタイルHTMLをDOM_HTML設定。
カード開関数ナデシコする。
カード閉関数ナデシコする。

#---イベント設定------
数を0から(枚数-1)まで繰り返す。
  「#ura_{数}」の「onclick」に「カード開{数}」をDOMイベント設定。
ここまで

#-----------------------------------------------------------------------
●カード開(Noの)
 もし、(二枚目=-1)ならば、   #ガチャ押しで三枚目が開くのを防止。
  開閉=「
#ura_{No}{波カッコ}transform: rotateY(180deg);{波カッコ閉じ}
#omote_{No}{波カッコ}transform: rotateY(0);{波カッコ閉じ}」
  「#style_{No}」に開閉をDOM_HTML設定。
  もし(一枚目=-1)ならば、
    一枚目=場札[No]。一枚目位置=No。
  違えば、
    二枚目=場札[No]。二枚目位置=No。
    カード判定。
  ここまで。
 ここまで。
ここまで。

●カード閉(Noの)
  開閉=「
#ura_{No}{波カッコ}transform: rotateY(0);{波カッコ閉じ}
#omote_{No}{波カッコ}transform: rotateY(-180deg);{波カッコ閉じ}」
  「#style_{No}」に開閉をDOM_HTML設定。
ここまで。
#-----------------------------------------------------------------------
●カード判定
  もし、一枚目=二枚目ならば、
    カウンター=カウンター+1。
    もし、カウンター=枚数/2ならば、
      完成。
    違えば、
      「#se」に「<audio src="{当音}" autoplay></audio>」をDOM_HTML設定。
      一枚目=-1。二枚目=-1。
    ここまで。
  違えば、
    「#se」に「<audio src="{外音}" autoplay></audio>」をDOM_HTML設定。
    0.8秒後には
      一枚目位置のカード閉じる。二枚目位置のカード閉じる。
      一枚目=-1。二枚目=-1。   #カードを閉じ終えてからフラグを戻す。
    ここまで。
  ここまで。
ここまで。

●完成
  「#se」に「<audio src="{完成音}" autoplay></audio>」をDOM_HTML設定。
  「おめでとう!」と言うここまで。
#-----------------------------------------------------------------------
</script>

<style type="text/css">
<!--
.card {
  position: absolute;
  perspective: 1000px;
}
.ura,
.omote {
  position: absolute;
  transition: transform 0.6s;
  backface-visibility: hidden;
}
.omote {
  transform: rotateY(-180deg);
}
 -->
</style>

<H1>なでしこ3てすと~神経衰弱</H1>
<HR>
<div id="style"></div>
<div id="game"></div>
<div id="se"></div>
<HR>

http://www.geocities.jp/snowdrops890/wnako3_test/10_suijyaku_test.html

 もうちょっとゲームらしく作り込みたいですよね~。

 カードは画像さえ用意すれば増やせるようにしてあるけど、コレで枚数だけ増えてもなんか疲れるだけだしね;

通りすがり通りすがり2017/11/26 14:56peerJSというライブラリをラッピングしたpluginを作成したので、試しに神経衰弱に組み込んでみました。

//weyk.la.coocan.jp/weyk/nadesiko3/demo/suijyaku_test.html

「始める」を押すと表示されるダイアログ(尋ねる命令のダイアログ)に、2人で同じ内容を入力すると、始まります。一人でブラウザを2つ起動することでも試せます。
(というより、その状態でしか試してません)

ソースは先のhtmlに埋め込まれているので、ブラウザのソースを表示する機能で確認可能です。

peerJS自体が使用しているのは、WebRTCという機能ですが、ブラウザの機能もいつの間にか便利になったものです。
(httpではなく、httpsにすれば、音声・画像も可です)

雪乃☆雫雪乃☆雫2017/11/26 16:19おおぉ?!w(゜o゜)w
なっ、なんかすごい!!
TCP接続なしで、対戦ゲームとかが・・・??
色々と面白いことが出来そうでテンション上がりますね☆
まだ、ちょこっとお試ししてみただけですが、中身を見て研究してみたいと思います。

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

2017/11/02 (木)

カードをくるんとめくるよ!

| 16:13 | カードをくるんとめくるよ! - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - カードをくるんとめくるよ! - 雪乃☆雫のなでしこ日和 カードをくるんとめくるよ! - 雪乃☆雫のなでしこ日和 のブックマークコメント

 またちょっと、CSSのエフェクト系です。

 transform:rotateY()を使って、カードをくるんとめくります。

 これは要素を表示するヤツで、()に与えた角度によってY軸を軸にして時計りに転します。

 裏返した状態の表と、裏のカードを重ねて置いて、同時に転させることで1枚のカードがひっくり返ったように見せるとゆう技なんですね~。

 フェードの時と同様transitionで、何秒掛けて転させるかを指定します。

 backface-visibilityは要素の裏面を見れるようにするかどうかを指定するヤツで、これはhiddenにしておかないと、裏返っても裏返った状態の裏のカード(ややこやしい;)が見えていて、表のカードが見えないとゆうことになってしまいます。

 もうひとつ、perspectiveは3D変形の奥行きの深さを指定する・・ヤツで、ようするに立体感が出ます。これが無いと中心に向けてぎゅっと縮んでまた伸びたのと同じ感じになっちゃうんですね。


 ・・・でっ、こんな感じ~。

 波カッコ閉じが無事に使えるようになったおかげで、スタイルシートをDOM_HTML設定するのがとても楽になりました。ありがたや~☆

<script type="なでしこ">
#クリックして、カードの表を開く。

「#ura」の「onclick」に「カード開」をDOMイベント設定。
「#omote」の「onclick」に「カード閉」をDOMイベント設定。

#時計りに裏を180度、同時に表も(-180から0なので)180度転させて、表を出す。
●カード開
  開閉=「
#ura{波カッコ}transform: rotateY(180deg);{波カッコ閉じ}
#omote{波カッコ}transform: rotateY(0);{波カッコ閉じ}」
  「#style」に開閉をDOM_HTML設定。
ここまで。

#同様に反時計りに180度、裏表同時に転させて裏返す。
●カード閉
  開閉=「
#ura{波カッコ}transform: rotateY(0);{波カッコ閉じ}
#omote{波カッコ}transform: rotateY(-180deg);{波カッコ閉じ}」
  「#style」に開閉をDOM_HTML設定。
ここまで。
#-----------------------------------------------------------------------
</script>

<style type="text/css">
<!--
#base {
  margin:auto;
  width: 70px;
  height: 90px;
}
#card {
  position: absolute;
  perspective: 1000px;    /* 奥行きの深さ。プロパティを指定した要素自身ではなく、の子要素で位置や変形を指定されたものにだけ適用される。*/
}

#ura,
#omote {
  position: absolute;
  transition: transform 0.6s;    /* トランスフォームプロパティを0.6秒かけて変化させる*/
  backface-visibility: hidden;   /* 要素の裏面を不可視にする*/
}

#omote {
  transform: rotateY(-180deg);   /* 要素をY軸を中心に裏返しておく設定*/
}
  -->
</style>


<style id="style"></style>

<div id="base">
  <div id="card">
    <img id="omote" src="http://www.geocities.jp/snowdrops890/image/card_omote.png">
    <img id="ura" src="http://www.geocities.jp/snowdrops890/image/card_ura.png">
  </div>
</div>

 できた~♪

http://www.geocities.jp/snowdrops890/wnako3_test/09_card_test.html

 こんなことが出来ると、カードゲームを作るのが楽しくなりそうですよね!(≧▽≦)

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

2017/10/29 (日)

v0.1.7で描画開始が・・・?

| 22:17 | v0.1.7で描画開始が・・・? - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - v0.1.7で描画開始が・・・? - 雪乃☆雫のなでしこ日和 v0.1.7で描画開始が・・・? - 雪乃☆雫のなでしこ日和 のブックマークコメント

 なでしこ3がバージョンアップして、また色々の不具合が修正されたようです(^▽^)

 がっ・・・!

 それに伴って、いきなりフェードインとスライドショーが動かなくなっちゃいましたΣ(゜д゜;

 いやー、0.1.7で動かなくなるのはまあ分かるとしても、読んでるスクリプトは0.1.6のままなのにねー。

 メモ帳にコピペして保存して文字列比較をすると0と出るところを見ると、どうやら0.1.7で上書きされてしまってるっぽいね;


 それはさておき、おかしくなったのか仕様変更になったのか定かじゃないけど、問題は「描画開始」でした。

 いままでは、『「canvas#cv_1」のDOM要素取得。』と、DOM要素を一取得したら、の後は『「cv_1」へ描画開始。』とIDで描画先を指定できたんだけど、どうやらコレがうまくいってない

 DOM要素取得した直後に「それへ描画開始」は問題ないようで、とりあえずそれで動くようにしといたけど・・・

 でもそれだと、描画開始のたびにセットで毎DOM要素取得しなきゃないんだよね~。

 うううん、何か他に正しい書き方があるんだろうか・・・

 canvasの使い方はマニュアルに説明が無くて、ワタシがテキトーに色々やってできるようになったヤツだからねえ;;;


 ・・・と思ってたんだけど、どうやらやっぱりバグじゃないかな?

 見たら、マニュアルの「描画開始」の利用例が追加されてたんだけども、エラーになりますよぉ・・・

https://nadesi.com/doc3/index.php?plugin_browser%252F%E6%8F%8F%E7%94%BB%E9%96%8B%E5%A7%8B

「nako3_canvas_1」へ描画開始
[0, 0]へ「https://nadesi.com/doc3/skin/nadesi.com/resource/logo_nadesiko_title.gif」の画像描画

 ちなみに、このようにすると動きます。

canvas#nako3_canvas_1」のDOM要素取得。
それへ描画開始
[0, 0]へ「https://nadesi.com/doc3/skin/nadesi.com/resource/logo_nadesiko_title.gif」の画像描画

 奇しくも上でぐずぐずぼやいていたことの、分かりやすい実例になった。

 むむむ・・・

 ↑ v3.0.38で修正されました!(2018/03/29 追記)

通りすがり通りすがり2017/11/01 23:25例がエラーになってしまうのは悲しいですね。
描画開始に指定できるのは、(仕様では?)以下の3種類です(引数が文字列の場合、1→2の順に試行される)


idがcvでclassがresultのcanvasがある場合・・・

1.CSSで指定するときに使うようなセレクタを文字列で指定。
以下のような形で指定できる(※の条件にも注意)
"canvas"へ描画開始
"canvas.result"へ描画開始
".result"へ描画開始
"#cv"へ描画開始
"canvas#cv"へ描画開始
※複数見つかるような条件の場合、最初に見つかる1つが対象になる。

2.canvasのidを文字列で指定。
"cv"へ描画開始
※idに"#"を付けた場合はセレクタ扱い。

3.文字列ではなくDOM要素そのものを指定。
1度、
CVEは"cv"をDOM要素取得
として変数に持っといて、以降は、
CVEへ描画開始
と指定する。

注意点としては、「セレクタとして解釈するとなんらかの要素が取得できてしまうID」は使えません。例は以下。
idがbodyというcanvasがある場合。
"#body"や"canvas#body"のようにセレクタならOK。
idのつもりで"body"としても先にセレクトとして試行してBODYタグを見つけてしまうのでNG。

雪乃☆雫雪乃☆雫2017/11/02 00:51おおぉ、ありがとうございます!!!
#をつけてセレクタにしたら、あっさりと出来ました☆
それに記事中で書いてた「それへ描画開始」も、これは3に該当するやり方なので、「それ」じゃなく何らかの変数に入れてやれば、何度もDOM要素取得することなんて無かったわけですね~(^▽^;

・・・でもやっぱり、2のID指定が、うまくいかなくなっちゃってる気がしますねえ。
特に競合するタグもないし何よりバージョンアップ以前は問題なかったので・・・

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

2017/10/28 (土)

テーブルに編集機能をつけてみたよ!

| 17:43 | テーブルに編集機能をつけてみたよ! - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - テーブルに編集機能をつけてみたよ! - 雪乃☆雫のなでしこ日和 テーブルに編集機能をつけてみたよ! - 雪乃☆雫のなでしこ日和 のブックマークコメント

 クリックした時、画像部分コピーで選択色を入れる代わりに、メモ開くようにしただけです。

 デフォルトはオフですが、「編集はオン」とすると、有効になります。

 アイテムの変更が確定するのは、別のセルにフォーカスが移った時です。

#-----------------------------------------------------------------------
#「table_改.nako」
# 編集機能付きテーブル
#-----------------------------------------------------------------------
■テーブル改 +イメージ
 ・太{=2}
 ・線色{=$CCCCCC}
 ・背景色{=$FFFFFF}
 ・選択色{=$EEEEEE}
 ・文字色{=$000000}
 ・文字サイズ{=12}
 ・フォント{=「MS ゴシック」}

 ・左余白{=3}
 ・右余白{=10}
 ・上余白{=3}
 ・下余白{=5}
 ・最小セル幅{=30}
 ・編集{=オフ}

 ・列数
 ・行数
 ・アイテム ←アイテム設定 →アイテム取得
 ・アイテム_
 ・アイテム取得~それ=アイテム_。
 ・アイテム設定(S)~
  Sの変数型確認。
  もしそれが「配列」でなければ、アイテム_=SをCSV取得。
  違えば、アイテム_=S。
  アイテム_=アイテム_表行列交換。
  列数=アイテム_要素数。
  アイテム_=アイテム_表行列交換。
  行数=アイテム_要素数。

 ・標準カラー設定({数値=0}Vに)~
  Vで条件分岐
   0ならば文字色黒色。背景色=白色線色=$CCCCCC。選択色=$EEEEEE。
   1ならば文字色=白色線色=$808080。背景色=黒色。選択色=$808080。

 ・作る~
  オブジェクト=VCL_CREATE(自身, 名前, VCL_GUI_IMAGE)。
  テーブルイメージバックアップ画面をイメージとして作成。
  テーブルイメージバックアップ画面→可視=オフ。
  テーブルイメーフォーカス用画面をイメージとして作成。
  テーブルイメーフォーカス用画面→可視=オフ。
  テーブル編集用メモメモとして作成。
  テーブル編集用メモ→可視はオフ。
  テーブル編集用メモ→スクロールバー。

 ・選択行
 ・選択列
 ・マウス移動した時は~/*マウス位置設定するためのダミー定義*/
 ・クリックした時は~フォーカス選択。
// ・ダブルクリックした時は~選択行&`,`&選択列と言う。

 ・セルX
 ・セルY
 ・セルW
 ・セルH
 ・セル編集フラグ{=0}
 ・フォーカス選択~
  セル内容変更。
  左位置=``。右位置=``。上位置=``。下位置=``。
  高列=高配列&改行&H。幅列=列幅配列。
  
  オン
   I=回数-1。左位置=幅列[0]。幅列の0を配列削除。
   (幅列[0]>マウスX)ならば、右位置=幅列[0]。抜ける。
  選択列=I。もし、選択列>列数-1ならば、選択列=列数-1。
  オン
   I=回数-1。上位置=高列[0]。高列の0を配列削除。
   (高列[0]>マウスY)ならば、下位置=高列[0]。抜ける。
  選択行=I。もし、選択行>行数-1ならば、選択行=行数-1。
  
  セルX=左位置+描補正位置。セルY=上位置+描補正位置。セルW=右位置-左位置-線太さ。セルH=下位置-上位置-線太さ。
  S=私→アイテム。S=S[私→選択行][私→選択列]。テーブル編集用メモ→テキストはS。
  テーブル編集用メモ文字サイズは私→文字サイズ。テーブル編集用メモ文字書体は私→フォント。
  テーブル編集用メモ→Xは私→セルX+私→X。テーブル編集用メモ→Yは私→セルY+私→Y。
  テーブル編集用メモ→Wは私→セルW。テーブル編集用メモ→Hは私→セルH。
  もし、編集=オンならば、テーブル編集用メモ→可視はオン。テーブル編集用メモ→注目。
  違えば、
    テーブルイメージバックアップ画面を私の0,0へ画像コピー。
    テーブルイメーフォーカス用画面のセルX,セルY,セルW,セルHを私のセルX,セルYへ画像部分コピー。
    描画処理反映。
  セル編集フラグ=1。

 ・セル内容変更~
  テーブル編集用メモ→可視はオフ。
  自身を私にグループ参照コピー。
  もし、セル編集フラグ=0でなければ、
    S=私→アイテム。S[私→選択行][私→選択列]はテーブル編集用メモ→テキスト。
    私→アイテム=S。自動作成。

 ・高配列
 ・描補正位置
 ・アイテム段数配列
 ・自動作成~
  もし線太さ%2=0ならば、描補正位置=(太/2)を切捨。
  違えば、描補正位置=(太/2)を切捨+1。
  システム設定変更。文字幅設定する。自身白色画面クリア。
  アイテム配列座標付情報作成する。
  HI=(線太さ/2)を切捨。
  //外枠を描く
  自身の(線太さ/2)を切捨,(線太さ/2)を切捨からW+1-(線太さ/2)を切捨,表下位置+1+(線太さ/2)を切捨へ四角。
  高配列=(線太さ/2)を切捨。最大出現数とは整数=0。
  アイテムを反復
   //行を描く。
   V=アイテム段数配列[回数-1]。
   (V+1)、HI=HI+文字高。
   HI=HI+(上余白+下余白)。
   もし回数行数ならば自身太-1,HIからW-線太さ+1,HIへ。
   HIを高配列配列追加。
  //列を描く。
  列幅配列反復
    (回数>1)かつ(回数<列数+1)ならば自身対象,0から対象,表下位置へ。
  
  アイテム描画する。
  バックアップ画面作成する。
  システム設定戻す。

 ・S_塗色
 ・S_太
 ・S_文字色
 ・S_線色
 ・S_文字サイズ
 ・S_文字書体
 ・システム設定変更~
  S_塗色=システム:塗色。S_太=システム:太。S_線色=システム:線色。S_文字色=システム:文字色。S_文字サイズ=システム:文字サイズ。S_文字書体=システム:文字書体。
  システム:塗色=背景色。システム:太=太。システム:線色線色。システム:文字色文字色。システム:文字サイズ文字サイズ。システム:文字書体=フォント。
 ・システム設定戻す~
  システム:塗色=S_塗色。システム:太=S_太。システム:線色=S_線色。システム:文字色=S_文字色。システム:文字サイズ=S_文字サイズ。システム:文字書体=S_文字書体。

 ・アイテム描画~
  自身を私にグループ参照コピー。X1とは整数。Y1とは整数。
  テーブルイメーフォーカス用画面を貴方にグループ参照コピー。
  貴方→サイズ=私→サイズ。貴方→画面クリア(私→選択色)。
  アイテム配列座標付情報を反復
   X1=対象[1]。Y1=対象[2]
   自身のX1,Y1へ対象[0]を文字表示。
   貴方のX1,Y1へ対象[0]を貴方:文字表示。

 ・アイテム配列座標付情報
 ・アイテム配列座標付情報作成~
  HI=(線太さ/2)を切捨。I=0。アイテム配列座標付情報=``。
  アイテムを反復
   対象反復
    アイテム配列座標付情報[I][0]=対象
    アイテム配列座標付情報[I][1]=(列幅配列[回数-1]+左余白)
    アイテム配列座標付情報[I][2]=(HI+上余白)。
    Iに1を直接足す。
   V=アイテム段数配列[回数-1]。
   (V+1)、HI=HI+文字高。
   HI=HI+(上余白+下余白)。

 ・バックアップ画面作成~
  自身を私にグループ参照コピー。
  テーブルイメージバックアップ画面→サイズ=私→サイズ。
  自身をテーブルイメージバックアップ画面の0,0へ画像コピー。

 ・文字高
 ・表下位置 //表の下の位置
 ・文字情報設定~
  アイテム段数配列。
  アイテムを反復
   最大出現数=0。
   対象反復
    V=対象で「{CHR(10)}」の出現回数。
    (最大出現数<V)ならば、最大出現数=V。
   最大出現数をアイテム段数配列配列追加。
  
  実行数とは整数=0。
  アイテム段数配列反復
   実行数=実行数+(対象+1)
  
  文字高=`字`の文字高さ取得。
  表下位置=(実行数×文字高)+行数*(上余白+下余白)。

 ・最大列幅
 ・列幅配列
 ・文字幅設定~
  文字幅表=``。最大列幅=``。列幅配列。
  文字情報設定。
  アイテムを反復
   I=回数-1。V=0。
   対象反復
    対象を「{CHR(10)}」で区切って反復
     もし、V<(対象文字幅取得)ならば、V=対象文字幅取得。
    もし、V<最小セル幅ならば、V=最小セル幅。
    文字幅表[I][回数-1]=V+左余白+右余白。
    V=0。
   文字幅表[I]の配列合計を最大列幅に配列追加。
  最大列幅=最大列幅の配列最大値。
  V=0。
  (線太さ/2)を切捨を列幅配列配列追加。
  (文字幅表の表列数)
   V=文字幅表の(回数-1)を表列取得配列最大値+太をVに直接足。
   Vを列幅配列配列追加。
  表サイズ設定する。

 ・サイズ
 ・表サイズ設定~W=列幅配列配列最大値+描補正位置。H=表下位置+太。サイズ[0][0]=0。サイズ[0][1]=0。サイズ[0][2]=W。サイズ[0][3]=表下位置。

#-----------------------------------------------------------------------
# 以下はテスト
#!「table_改.nako」を取り込む。
ファイル名=「{デスクトップ}Book1.csvもし、ファイル名の存在はいならば、データはファイル名を開く違えば、データ=「1,2,3
A,B,"C""D""E"
"いろはにほへと{~}ちりぬるを","わかよ,たれ","つねならむ"」

Tとはテーブル改。
これについて
  編集はオン。
  アイテムはデータ。

母艦について
 クリックした時は~
  Tのセル内容変更。
  Tを自動作成。
 閉じた時は~
  Tのアイテムをファイル名に保存。

Tを自動作成。
#-----------------------------------------------------------------------

 どうかな~?

 うまくいってると思うんだけど。

 とりあえず、ちょっとワタシが使う分には大丈夫そう

通りすがり通りすがり2017/10/31 21:04Unicode系の命令をまとめたnakoファイルを用意して、UTF8用のものを作ってみました。
変更箇所は結構少ないです。
(設定反映のために、一見、無駄に見える命令があるります。)

weyk.la.coocan.jp/files/tableU.zip

Unicode系の命令を調べている中で、表示サイズを調べる命令と、実際の表示する命令がいくつかあったので、うまく使えばGridのセルを表示するときに役立ちそうです(はみ出るときは「...」的なものを表示 とかもできるっぽい)

雪乃☆雫雪乃☆雫2017/11/02 00:43いつもながら、さすがですね~!(@_@)
シカシ、いきなり「CSVの記述に誤りがあります」とか言われてしまったのでした。しくしく。
文字列を""でくくったらダメっぽい・・??
これまで文字コードのコトなんて気にして生きてこなかったので、Unicodeのこと自体があまり分かっていなかったり;
もうちょっとよくお試ししてみますです☆

通りすがり通りすがり2017/11/03 18:35初期データ(UTF8の二次元配列のデータ)の生成だけうまくゆかないようなので、1項目づつUTF8に変換するようにしてみました。
ほんとは、CSV取得のUT8版かASCII版(SJISではだめ)があるとよいのですが

雪乃☆雫雪乃☆雫2017/11/06 15:30遅くなりましてスミマセン;
ありがとうございます、うまくいきました☆
本当は「UniUtil.nako」の中身をよく研究すると色々賢くなれそうな気がしているんですが、まだそこまで到達していません(^▽^;

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

2017/10/25 (水)

table.nakoを改造してみるよ!

| 22:26 | table.nakoを改造してみるよ! - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - table.nakoを改造してみるよ! - 雪乃☆雫のなでしこ日和 table.nakoを改造してみるよ! - 雪乃☆雫のなでしこ日和 のブックマークコメント

 文字サイズの変更が出来なかったことに比べれば、全然たいしたこと無いですけど、ぱっと見どうしても気になってならないのが、最終行の高さが他と合ってないことと、フォーカスの選択色が枠に少しかぶること。

 細かくてスミマセン;;;

 枠全体のサイズの計算が行引くための行枠高の計算と合ってないために、のしわ寄せが最終行に来ているっぽい。

 してさらにどーでもいいようなことですが、ワタシとしては枠の中にピタッとフォーカスが入って欲しいワケですよ。


 それから、アイテムに指定するデータの形式が、CSVと見せかけて(別に見せかけてはいない;)ちょっと特殊仕様(?)っぽいんだけど、出来ればエクセルで作ってCSV保存したものがふつーに表示出来るようにしたい。


 あと、テーブルの背景色や文字色などを設定すると、システムの塗り色文字色を書き換えてしまうんですよね。フツーのGUIは、んなことにはならないですよね。

 さらによろしくないことには、テーブルの背景色や文字色などを設定してあっても、自動作成する前にシステムの塗り色文字色を設定したら、それで描画が行われちゃう。

 たぶん、テーブルを作ったら、設定から自動作成まで一連のセットとして記述する前提の仕様なんだろうけど、ダブルクリックしたら編集用の窓を開いて、内容を書き換えることができるようにしようと思ったら、編集するたびに自動作成で描画し直すことになるんで、の時設定も全部し直さなきゃないことになっちゃう><

 でもこれは、カンタンに直せそう


 で・・・

■テーブル改 +イメージ
 ・列数{=2}
 ・行数{=1}

 ・太{=2}
 ・線色{=$CCCCCC}
 ・背景色{=$FFFFFF}
 ・選択色{=$EEEEEE}
 ・文字色{=$000000}
 ・文字サイズ{=12}
 ・フォント{=「MS ゴシック」}

 ・左余白{=3}
 ・右余白{=10}
 ・上余白{=3}
 ・下余白{=5}

 ・アイテム ←アイテム設定 →アイテム取得
 ・アイテム_
 ・アイテム取得~それ=アイテム_。
 ・アイテム設定(S)~
  Sの変数型確認。
  もしそれが「配列」でなければ、アイテム_=SをCSV取得。
  違えば、アイテム_=S。
  アイテム_=アイテム_表行列交換。
  列数=アイテム_要素数。
  アイテム_=アイテム_表行列交換。
  行数=アイテム_要素数。

 ・標準カラー設定({数値=0}Vに)~
  Vで条件分岐
   0ならば文字色黒色。背景色=白色線色=$CCCCCC。選択色=$EEEEEE。
   1ならば文字色=白色線色=$808080。背景色=黒色。選択色=$808080。

 ・作る~
  オブジェクト=VCL_CREATE(自身, 名前, VCL_GUI_IMAGE)。
  テーブルイメージバックアップ画面をイメージとして作成。
  テーブルイメージバックアップ画面→可視=オフ。
  テーブルイメーフォーカス用画面をイメージとして作成。
  テーブルイメーフォーカス用画面→可視=オフ。

 ・選択行
 ・選択列
 ・マウス移動した時は~/*マウス位置設定するためのダミー定義*/
 ・クリックした時は~
   フォーカス選択。
// ・ダブルクリックした時は~選択行&`,`&選択列と言う。

 ・セルX
 ・セルY
 ・セルW
 ・セルH
 ・フォーカス選択~
  左位置=``。右位置=``。上位置=``。下位置=``。
  高列=高配列&改行&H。幅列=列幅配列。
  
  オン
   I=回数-1。左位置=幅列[0]。幅列の0を配列削除。
   (幅列[0]>マウスX)ならば、右位置=幅列[0]。抜ける。
  選択列=I。
  オン
   I=回数-1。上位置=高列[0]。高列の0を配列削除。
   (高列[0]>マウスY)ならば、下位置=高列[0]。抜ける。
  選択行=I。
  自身を私にグループ参照コピー。
  セルX=左位置+描補正位置。セルY=上位置+描補正位置。セルW=右位置-左位置-線太さ。セルH=下位置-上位置-線太さ。
  テーブルイメージバックアップ画面を私の0,0へ画像コピー。
  テーブルイメーフォーカス用画面のセルX,セルY,セルW,セルHを私のセルX,セルYへ画像部分コピー。
  描画処理反映。

 ・高配列
 ・描補正位置
 ・アイテム段数配列
 ・自動作成~
  もし線太さ%2=0ならば、描補正位置=(太/2)を切捨。
  違えば、描補正位置=(太/2)を切捨+1。
  システム設定変更。文字幅設定する。
  アイテム配列座標付情報作成する。
  HI=(線太さ/2)を切捨。
  //外枠を描く
  自身の(線太さ/2)を切捨,(線太さ/2)を切捨からW+1-(線太さ/2)を切捨,表下位置+1+(線太さ/2)を切捨へ四角。
  高配列=(線太さ/2)を切捨。最大出現数とは整数=0。
  アイテムを反復
   //行を描く。
   V=アイテム段数配列[回数-1]。
   (V+1)、HI=HI+文字高。
   HI=HI+(上余白+下余白)。
   もし回数行数ならば自身太-1,HIからW-線太さ+1,HIへ。
   HIを高配列配列追加。
  //列を描く。
  列幅配列反復
    (回数>1)かつ(回数<列数+1)ならば自身対象,0から対象,表下位置へ。
  
  アイテム描画する。
  バックアップ画面作成する。
  システム設定戻す。

 ・S_塗色
 ・S_太
 ・S_文字色
 ・S_線色
 ・S_文字サイズ
 ・S_文字書体
 ・システム設定変更~
  S_塗色=システム:塗色。S_太=システム:太。S_線色=システム:線色。S_文字色=システム:文字色。S_文字サイズ=システム:文字サイズ。S_文字書体=システム:文字書体。
  システム:塗色=背景色。システム:太=太。システム:線色線色。システム:文字色文字色。システム:文字サイズ文字サイズ。システム:文字書体=フォント。
 ・システム設定戻す~
  システム:塗色=S_塗色。システム:太=S_太。システム:線色=S_線色。システム:文字色=S_文字色。システム:文字サイズ=S_文字サイズ。システム:文字書体=S_文字書体。

 ・アイテム描画~
  自身を私にグループ参照コピー。X1とは整数。Y1とは整数。
  テーブルイメーフォーカス用画面を貴方にグループ参照コピー。
  貴方→サイズ=私→サイズ。貴方→画面クリア(私→選択色)。
  アイテム配列座標付情報を反復
   X1=対象[1]。Y1=対象[2]
   自身のX1,Y1へ対象[0]を文字表示。
   貴方のX1,Y1へ対象[0]を貴方:文字表示。

 ・アイテム配列座標付情報
 ・アイテム配列座標付情報作成~
  HI=(線太さ/2)を切捨。I=0。アイテム配列座標付情報=``。
  アイテムを反復
   対象反復
    アイテム配列座標付情報[I][0]=対象
    アイテム配列座標付情報[I][1]=(列幅配列[回数-1]+左余白)
    アイテム配列座標付情報[I][2]=(HI+上余白)。
    Iに1を直接足す。
   V=アイテム段数配列[回数-1]。
   (V+1)、HI=HI+文字高。
   HI=HI+(上余白+下余白)。

 ・バックアップ画面作成~
  自身を私にグループ参照コピー。
  テーブルイメージバックアップ画面→サイズ=私→サイズ。
  自身をテーブルイメージバックアップ画面の0,0へ画像コピー。

 ・文字高
 ・表下位置 //表の下の位置
 ・文字情報設定~
  アイテム段数配列。
  アイテムを反復
   最大出現数=0。
   対象反復
    V=対象で「{CHR(10)}」の出現回数。
    (最大出現数<V)ならば、最大出現数=V。
   最大出現数をアイテム段数配列配列追加。
  
  実行数とは整数=0。
  アイテム段数配列反復
   実行数=実行数+(対象+1)
  
  文字高=`字`の文字高さ取得。
  表下位置=(実行数×文字高)+行数*(上余白+下余白)。

 ・最大列幅
 ・列幅配列
 ・文字幅設定~
  文字幅表=``。最大列幅=``。
  文字情報設定。
  アイテムを反復
   I=回数-1。V=0。
   対象反復
    対象を「{CHR(10)}」で区切って反復
     もし、V<(対象文字幅取得)ならば、V=対象文字幅取得。
    文字幅表[I][回数-1]=V+左余白+右余白。
    V=0。
   文字幅表[I]の配列合計を最大列幅に配列追加。
  最大列幅=最大列幅の配列最大値。
  V=0。
  (線太さ/2)を切捨を列幅配列配列追加。
  (文字幅表の表列数)
   V=文字幅表の(回数-1)を表列取得配列最大値+太をVに直接足。
   Vを列幅配列配列追加。
  表サイズ設定する。

 ・サイズ
 ・表サイズ設定~W=列幅配列配列最大値+描補正位置。H=表下位置+太。サイズ[0][0]=0。サイズ[0][1]=0。サイズ[0][2]=W。サイズ[0][3]=表下位置。

#-----------------------------------------------------------------------
# 以下はテスト
#!「table_改.nako」を取り込む。

データ=「1,2,3
A,B,"C""D""E"
"いろはにほへと{~}ちりぬるを","わかよ,たれ","つねならむ"」//をCSV取得
//データは「Book1.csv」を開く

Tとはテーブル改。
これについて
  選択色は$EEEEEE
  背景色は$EEFFFF
  線太さは5
  線色は$CCCCCC
  文字色は$000066
  フォントは「MS 明朝」
  文字サイズは18

  上余白は10。
  下余白は10。
  左余白は10。
  右余白は10。

  アイテムはデータ。

Tを自動作成。
#-----------------------------------------------------------------------

 エクセルで保存したCSV改行CR+LFではなくLFみたい。

 上下左右の余白(padding的な)を設定できるようにしてみた。


 さてさて、どうかな?

 見た目的にはうまくいってると思うんだけど・・・

 あと、やっぱり編集できるようにしたいね。

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

2017/10/22 (日)

新機能のテーブルをお試ししてみる

| 19:36 | 新機能のテーブルをお試ししてみる - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - 新機能のテーブルをお試ししてみる - 雪乃☆雫のなでしこ日和 新機能のテーブルをお試ししてみる - 雪乃☆雫のなでしこ日和 のブックマークコメント

 なでしこ1.57で、自由なレイアウトでグリッドを表現できる「table.nako」が新機能として追加されたんですが、どうするもんだかの説明はマニュアルにもサンプルにも追加されていないっぽいんですよね~(?)

 グループのことがあんまり分かっていないけど、ちょこっと眺めてみた感じ、どうやら、イメージ部品を使って、アイテムとして与えた配列を表にして表示するモノのようです。

 なんか、こんな感じ?

#-----------------------------------------------------------
!「table.nako」を取り込む。
データ=「1,2,3
A,B,C
い,ろ,は」

Tとはテーブル。
のアイテムはデータ。

Tを自動作成。
#-----------------------------------------------------------

 すごいのは、クリックすると、こにフォーカスが入る点ですね☆

 元のイメージのバックアップと、フォーカスが入った時のカラーと、二枚の裏画面を使って画像部分コピーするとゆう、わりとワタシがやりそうな原始的な方法で実現しているようです。


 背景色、選択色(フォーカスが入った時の色)、線色線太さ文字色文字サイズ、フォントは変更できるようです。

 グループってすごいな~。便利そうだな~とは思うものの、ひとつひらめかない

 眺めると、何となく分かるよーな気はするものの、自分で作れる気がしない~;;;


 ところで、どうも文字サイズの変更が、うまくいきません。

 アイテムを設定する前に文字サイズを設定しようとするとエラーになっちゃう。

 アイテムを設定した後だと・・・エラーは出ないけど反映されてない

 ちょっと標準の文字がでかすぎるからちっちゃくしたいと思っただけなのにぃ~。しくしくしくしく。

 うーむと思って眺めていると・・・159行目、文字情報設定で、なんで文字サイズを40に決め打ちしちゃってるんすか?? 反映されるわけなくないですか?? ここは「文字サイズ_」なのでは???

 しかし、それでもやっぱりうまくいきません。

 どうやら、文字サイズ設定時に文字幅設定しているんだけど、この時アイテムがだとダメっぽい。

 どっちみち、アイテム設定する時に、正規化アイテム表作成を行う中で文字幅設定をするんだからと、消してみる(無謀;)

 エラー出なくなりました☆

 が・・・アイテムを設定した後に文字サイズを設定したら反映されません。ついでに、フォントの設定もアイテムを設定した後だと、反映されません。

 文字情報設定は文字幅設定の中で、文字幅設定は正規化アイテム表作成の中で、正規化アイテム表作成はアイテム設定の中で行われているんだから当然でしたね(@_@;ヤヤコヤシイ...

 てゆうか、最終的には「自動作成」で引いて表にしてるんだから、全部ココでいいんじゃないの?(ヤケ;)

 とゆうわけで、自動作成の最初に正規化アイテム表作成するを突っ込んだところ、とりあえず、文字サイズの設定に関してはうまくいってるっぽい感じになりました。

 うーん、これはバグ・・・なのかなぁ。

 このやっつけな修正が妥当なのかどうかもよく分からんし・・・

 悩むわ~;;;


 でも、とりあえずは動いてる。

!「table.nako」を取り込む。
データ=「1,2,3
A,B,C
い,ろ,は」

Tとはテーブル。
これについて
  選択色は$999999
  背景色は$EEFFFF
  線太さは3
  線色は$CCCCCC
  文字色は$000066
  フォントは「MS 明朝」
  文字サイズは18

  アイテムはデータ。
Tを自動作成

 して、このテーブルの機能としては、表示するだけなのかな?

 編集するなどは、各自で別途プログラムするというコトかな??

 ダブルクリックした時、選択行,選択列を言うようになっているのが、こはかとなくお試し中感なんだけど、ここを書き換える???

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

2017/10/17 (火)

スライドショー

| 10:28 | スライドショー - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - スライドショー - 雪乃☆雫のなでしこ日和 スライドショー - 雪乃☆雫のなでしこ日和 のブックマークコメント

 通りすがりさまから貴重な教えを頂いて、ナゾが一つ解明し、また少し賢くなったので、早速やってみます☆

 プログラムとしては、単に複数の画像を勝手に延々ループ再生するスライドショーです。


 CSSで二枚のcanvasを重ねて配置するのは同じです。

 まず行うのは、表画面となる「cv_1」をっ黒に塗りつぶすこと!

 別に色は何でもいいんだけど、とりあえず最初の状態は透明なので、塗りつぶすかダミーの画像を表示するかしておかないと、裏画面に画像を読んだらそれが全部透けて見えてしまうんです~;

(重ね合わせの実験の時には白で塗りつぶして、まだ何も起こってないフリをこき、フェードインの実験の時にはcv_1の方から先に画像描画をしています)


 次に、裏画面となる「cv_2」に画像をロード。

 ロードしたイメージに名前をつけて使うことが出来るので、何度も同じ画像をファイルから読み直す必要は無いし、画像の枚数分canvasを用意する必要も無いワケですね。すばらしい!

 連番で名前をつけながら、同じcv_2に必要の画像を全て、どんどこロードしてしまいます。

 imageの名称に変数を使って連番にするのは、「ナデシコする」でできました☆

 imageを画像描画する場合でも、やっぱりウェイトは入れる必要がありました。

 でも、HDD上ではあまりが出なかったのですが、web上ではファイルからの画像描画はだいぶ遅くなり、0.1秒のウェイトではダメでした。結構が出るようで、imageは使っていかなければ!

 だけど、枚数が増えるとそれだけ最初にまとめてロードするのに時がかかるよね。

 画像描画が伴わなければずっと早いはずだし、何より裏でロードしながら、描画を始めることが出来るような気がするので、のほうが確かに使い勝手が良さそうな気がします。


 スライドショーの本体ですけど、基本は前のフェードインの実験を、マウスクリックでは無く、時で自動的に変更していくようにしただけで、まず「cv_2」に画像を描画し、「cv_1」の透明度をトランジョンで0に変化させて画像が入れ替わったように見せかけるのは、まったく同じです。

 前のフェードインの実験では、の後「z-index」を変えて実際に二枚の画像を入れ替えていましたが、は「cv_1」に同じ画像を画像描画して透明度を1に戻しています。

 して最初に戻って「cv_2」に次の画像を描画・・・で、無限ループ

 はマウスのイベントを使ってませんが、それもこのようにすればcv_1のイベントだけで全部出来たハズでしたね(^▽^;


 でっ、こんな感じ~。

<script type="なでしこ">
#-----------------------------------------------------------------------
画像枚数=5。
ウェイト=0.3。  //画像ロード時のウェイト。長めに取ってます。
画像読待=画像枚数*ウェイト。
表示=4。   //画像表示。
C=0。S=「.」
説明=["片栗(かたくり)","蝦夷延胡索(エゾエンゴサク)","延齢草(エンレイソウ)","蝦夷立金花(エゾノリュウキンカ)","水芭蕉(みずばしょう)"]

#まず表画面を塗りつぶして、裏画面が見えないようにする。
「#cv_1」へ描画開始。
黒色塗り色設定。
[0,0,480,360]へ四角描画。

#メイン
0.1秒後には、
  「#cv_2」へ描画開始。画像ロード。       //裏画面に画像読み込み
  (画像読待)秒後には
    「#mes」に「 」をDOMテキスト設定。    //画像読み込み中の表示を消し
    スライドショー。             //無限ループ
  ここまで。
ここまで。

●画像ロード
  「画像{C}は[0,0]に{カッコ}http://www.geocities.jp/snowdrops890/image/hana_{C}.jpg{カッコ閉じ}の画像描画。」をナデシコする。
  「#mes」に「Loading」SをDOMテキスト設定。
  C=C+1。S=S&「.」。
  もし、(C<画像枚数)ならば、「画像ロード」を(ウェイト)秒後。
  違えば、C=0。
ここまで。

●スライドショー
  「#cv_2」へ描画開始。
  「[0,0]に画像{C}の画像描画。」をナデシコする。
  0.1秒後には
   「#cv_1」の「transition」に「opacity 2s」をDOMスタイル設定。
   「#cv_1」の「opacity」に「0」をDOMスタイル設定。
   「#mes」に「北国の五月 ~ 」説明[C]をDOMテキスト設定。
   2.1秒後には
    「#cv_1」へ描画開始。
    「[0,0]に画像{C}の画像描画。」をナデシコする。
    「#cv_1」の「transition」に「opacity 0s」をDOMスタイル設定。
    「#cv_1」の「opacity」に「1」をDOMスタイル設定。
    もし、(C≧画像枚数-1)ならば、C=0。
    違えば、C=C+1。
    「スライドショー」を(表示)秒後。
   ここまで。
  ここまで。
ここまで。
#-----------------------------------------------------------------------
</script>

<H1>スライドショー</H1>
<HR>
<style type="text/css">
#base {
  margin:auto;
  width:480px;
  height:380px;
}
#main {
  position:absolute;
}
#cv_1 {
  position:absolute;
  z-index:1;
}
#cv_2 {
  position:absolute;
  z-index:0;
}
</style>
<div id="base">
  <span id="mes">Loading</span>
  <div id="main">
    <canvas id="cv_1" width="480px" height="360px"></canvas>
    <canvas id="cv_2" width="480px" height="360px"></canvas>
  </div>
</div>
<HR>

http://www.geocities.jp/snowdrops890/wnako3_test/08_slideShow.html

 北海道土産の定番、六花亭の袋っぽい?www

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