Hatena::Groupnadesiko

雪乃☆雫のなでしこ日和

2018/02/19 (月)

v3.0.31をダウンロードしたりバイオリズムを修正したり

| 13:15 | v3.0.31をダウンロードしたりバイオリズムを修正したり - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - v3.0.31をダウンロードしたりバイオリズムを修正したり - 雪乃☆雫のなでしこ日和 v3.0.31をダウンロードしたりバイオリズムを修正したり - 雪乃☆雫のなでしこ日和 のブックマークコメント

 近頃たいしたことはしてませんが、ちょこちょことなんだかんだした件を三件ほど。


 まずは、ぼやき記事に追記を入れただけで放置してましたケド、v3.0.21で新たに論理OR、論理AND、論理NOT追加され、ANDORは、なでしこ1同様のビット演算に戻りました☆

 おかげさまでこんな感じに♪

#数当て表作成
60
  数=回数。
  6
    もしAND(数,2^(回数-1))=0でなければ、数当表[回数-1]=数当表[回数-1]に数を一行追加。
  ここまで。
ここまで。

 あと、前密かに一行追加がどうもうまくいかないと思っていたら、v1非互換で、ちゃんと代入しなきゃならなかったみたい。

・数当てカード

http://www.geocities.jp/snowdrops890/wnako3_test/13_kazuate2.html

 いきなり始まるのもアレなんでボタンを押して開始するようにした。


・数当てカードを二進数で表示

http://www.geocities.jp/snowdrops890/wnako3_test/13_kazuatehyo.html

 テーブルで表示するようにしてみた。

 cellspacingに該当するCSSが分からん・・・;



 ところで、なでしこ3は、いつのにかさらにバージョンアップしてv3.0.31になってました。

 PC版の機能が大幅に拡張されてWebサーバを作成する機能が追加されたんだってさー。って・・・ナンカヨクワカンナイケド;

 これまでWeb版しかお試ししてこなかったからね。

 でもとりあえず、ちょこっとだうんろーどしてみたところ・・・解凍できませんでした。

 っからか。ワタシって・・・無能すぎる。

 しくしくしくしく。

 なんか、ファイル名または拡張子が長すぎて、フォルダが作成出来ませんとか言われてしまう~。えらく階層の深そうな、書き写すどころか見たくない感じのフォルダ名が表示されておる~。

 ・・・とゆうわけでしばし放置していたんだけど、急にひらめきました。

 書庫名でフォルダを作ってこに解凍する設定にしてたんだけど、どっちみちちゃんとフォルダを作った中に全部展開されるようになってるからなーと、の設定をオフにしたらできました。フォルダ一個分・・・?

 たぶん、てきとーにデスクトップ解凍しようとしたのもいけませんでした;

 ・・・でっ、解凍さえ出来ましたら、バッチファイルを実行であっさりと無事にエディタ起動しました☆

 だけど・・・保存したファイルをファイル一覧から見ようとしてもナゼか、問答無用で「こんにちは」と表示。になってしまうみたいなんだよね;むむむ(?_?)

 ↑ 3.0.32で解消されました!



 それはさておき、NADE APPに投稿していたバイオリズムの、前月表示や翌月表示が近頃ちゃんと動いてなかったことを発見。

 自前の日付加算がダメでした;

 12月の絡んだ計算がエラーになってしまう。

 v3.0.19頃から、UNIXTIME変換がシビアになったみたいなんですね。

 まえは、「2017/0/1」みたいな日付が通っていたんですよ~w

 それで計算もちゃんと合ってる風味だったんで、スルーしてたんですが、直しました。

日付加算(SにAを)
  記号=Aの1だけ文字左部分。
  A=Aの1から1だけ文字削除。
  A=Aを「/」で区切る。
  y=A@1/12を切捨。m=A@1%12。
  S=Sを「/」で区切る。
  もし、記号=「+」ならば、
    y=y+(S@1+m)/12を切捨。
    S@0=S@0+A@0+y。
    S@1=(S@1+m)%12。
  違えば、
    S@0=S@0-A@0-y。
    S@1=S@1-m。
  ここまで。
  もし、S@1=0ならば、
    S@1=12。S@0=S@0-1。
  ここまで。
  d=(A@2)*(24*60*60)。
  年=S@0。月=S@1。日=S@2。
  S=「{年}/{月}/{日}」をUNIXTIME変換。
  もし、記号=「+」ならば、S=S+d。
  違えば、S=S-d。
  S=Sを日時変換。
  S=Sの10だけ文字左部分。
  Sで戻るここまで。

http://www.eznavi.net/app/index2.php?pagetop=25&only=one

http://www.eznavi.net/app/index2.php?pagetop=27&only=one

 あっ、プラグインのは問題なく動くんですけどね。

 掲示板に投稿したのは制作エディタで動くように自前の日付加算を使ってたので。

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

2018/02/01 (木)

なでしこ3で数当てカード

| 13:20 | なでしこ3で数当てカード - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - なでしこ3で数当てカード - 雪乃☆雫のなでしこ日和 なでしこ3で数当てカード - 雪乃☆雫のなでしこ日和 のブックマークコメント

 昨日の続きです。

 通りすがりさまに教えを頂いて、ANDORには実は2種類あって、これこれでおかしくはないんだけど、なでしこ1のANDとなでしこ3のANDは、仕様が変わっちまってるっぽいとゆうことが分かりました。

 やっぱりも、クラクラです;

 意味がつかめてくるまでには、何度も自分を再起動する必要がありました;;;

 まだまだ、ちゃんとは理解してないような気もして、コンピューターのキモチが分かってくるまでの道のりは遠そうだよ><


 それにしても本当は、出来れば、可能な限り、なでしこ1互換で動いて欲しいと思うところなんですがねえ・・・

 しかし、取りあえずそうゆうコトなら仕方ありません。

 そうゆうモノとして、がんばりましょう~。

 がっ、数当てカードは、まさにANDのビット演算(?)で、どっちも1の時以外は0、になる機能でもって、カードに入れる数を仕分けしてたんだけど・・・一体どうしたら?(泣)

 ・・・無い知恵を絞って、こうなりました。

 簡易エディタで動きます。

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

#なでしこ3~数当てカード
「心の中で1~60のの数字を思い浮かべて、
ボクには見えないようにメモって置いてね。

準備が出来たら、はじめるよ!」と言う。

「では、これから六枚のカードを、お見せします。
の中に、あなたの思った数字があれば『OK』を、
なければ『キャンセル』のボタンを押して下さい。」と言う。

#数当て表初期化
数当表=配列。
6
  数当表[回数-1]=ここまで。

#数当て表作成
60
  数=回数。
  6
    数に(2^(回数-1))が含まれるか。
    もしそれはいならば、
      もし、数当表[回数-1]=でなければ、数当表[回数-1]=数当表[回数-1]「:」数。
      違えば、数当表[回数-1]=数。
    ここまで
  ここまで。
ここまで。

●含(AにBが|Bを)
  答は0。
  (B>0)の
    もし、B%2=1ならば、
      もし、A%2=1ならば、答=1。
      違えば、答=0。
    ここまで。
    B=B/2を整数変換。
    A=A/2を整数変換。
  ここまで。
  答で戻るここまで。

#数当てカード
答=0
6
  (回数-1)のカード表示。
  もしそれはいならば、答=答+2^(回数-1)
ここまで。

「むむ、読めました!
あなたが心に描いた数字は…
 {答} ですね?」を言う。

●カード表示(Aの)
  カード=。
  一時=数当表[A]を「:」で区切る。
  カウンター=一時の配列要素数。
  (カウンター)
    もし、一時[回数-1]<10ならば、数=「0」一時[回数-1]
    違えば、数=一時[回数-1]
    もし、(回数-1)%5=4ならば、カード=「{カード}{数}{改行}」
    違えば、カード=「{カード}{数} 」
  ここまで。
  カードで二択

 含むって言い方がどうなんだか分からんけど、ワタシ的にはんな感じ;

 Bには2の累乗を指定して、Aの数の中にそれが入ってるかどうかを調べてます。

 いちおう数当てカードはちゃんとできるようになったんで、これで合ってると思うんだけど・・・



 でっ、本当は昨日やろうと思っていたことは、マイナビの記事のコードをまたまた流用して、数当て表を二進数で表示することでした。

 できました☆

#なでしこ3~数当て表の表示
#数当て表初期化
数当表=配列。
6
  数当表[回数-1]=ここまで。

#数当て表作成
60
  数=回数。
  6
    数に(2^(回数-1))が含まれるか。
    もしそれはいならば、
      もし、数当表[回数-1]=でなければ、数当表[回数-1]=数当表[回数-1]「:」数。
      違えば、数当表[回数-1]=数。
    ここまで
  ここまで。
ここまで。

●含(AにBが|Bを)
  答は0。
  (B>0)の
    もし、B%2=1ならば、
      もし、A%2=1ならば、答=1。
      違えば、答=0。
    ここまで。
    B=B/2を整数変換。
    A=A/2を整数変換。
  ここまで。
  答で戻るここまで。
#-----------------------------------------------------------
●(Vを)二進数変換処理
   B=1
   結果=0
   (V > 0)の
     結果=結果+((V%2)×B)
     V=INT(V÷2)
     B=B×10
   ここまで。
   結果を8でゼロ埋めして戻る
 ここまで

# 表を作る
「1~60ので思った数を入力してね」と尋ねる
VV=LEFT(それ&" ", 2)
BIN=それを二進数変換処理
「| {VV} | {BIN} |」を表示
 「-----------------」を表示
 「|   {回数}枚目       |」を表示
 数当表[回数-1]を「:」で区切って反復
   VV=LEFT(対象&" ", 2)
   BIN=対象を二進数変換処理
   「| {VV} | {BIN} |」を表示
 ここまで
ここまで
「-----------------」を表示

 数当てカードは、カードの最初の数を足していくことで、相手が思った数字を当てる手品です。

 こうして、二進数にして数当てカードを眺めると、ほっほう~って感じですよねぇ~。

 して、入力した数と見比べると、おぉ! と、ひらめくって寸法ですw

 ・・・ええ、ワタシはコレを全部手で書き出して、理解したんですよ(爆)

 ぷろぐらむってすごいよね。

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

2018/01/31 (水)

なでしこ3のANDやORがおかしい気がする件

| 16:26 | なでしこ3のANDやORがおかしい気がする件 - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - なでしこ3のANDやORがおかしい気がする件 - 雪乃☆雫のなでしこ日和 なでしこ3のANDやORがおかしい気がする件 - 雪乃☆雫のなでしこ日和 のブックマークコメント

~~~~~~~~~~~~~~~~~~~~~~~~~~

※ v3.0.21にて修正されました!(2/5追記)

 素早い対応に感謝ですね(≧▽≦)

~~~~~~~~~~~~~~~~~~~~~~~~~~


 マイナビ連載20目は、16進数とか2進数とかのことでした。

 この記事を、もっともっとムカシに読みたかったね。

 いや・・・タブン、それっぽいコトは見聞きしたハズなんだけどねえ・・・

 まったく理解しなかったとゆうか、なんとゆうか?(バカ;)

 10進法の暮らしに馴染んでいると、1000より1024のがキリがいいとか、ゆってる意味が分かりませんよね?!?!

 ちなみに、2進法を使えば、両手の指10本で1023まで数えることが可能なんですが・・・確実に指をつります(´д`;


 だけど、あいにく(?)わりと最近(!)ひらめいたんだよねぇ~w

 して、2進数にしてうーむと眺めれば、前々の数当てカードの手品

https://nadesiko.g.hatena.ne.jp/snowdrops89/20180102/1514902515

 が、一体どうゆう理屈で出来るのかも、ちょっと前に学んだ論理和

https://nadesiko.g.hatena.ne.jp/snowdrops89/20170331/1490975484

 で、APIのパラメーターを複数設定することの意味とかも、なんとなく見えてくる。

 こっ、コレが、こんぴゅうたぁのキモチが分かってくるってコトなんですかね(*^-^*)ポ


 ・・・それでねえ、ちょこっと数当てカードをなでしこ3で作ってみようと思ったら・・・できなかったんですぅ~。

 数当て表を作る部分だけなので、配列の書き方のルールなんかが色々変わってるからアレですけど、すぐ出来る予定だったんですけどね。

 なんか・・・なでしこ3のANDが、おかしくないですか???

 AND論理です。

 まえに論理和を学んだ時にはクラクラとめまいがしてたもんだけど、もう大丈夫(たっ、タブン…;)

 これはもう、ようするに、

全部1だった時だけ、1。

それ以外はみんな、0。

 ・・・てだけのコトです。

 この計算は、もちろん二進数でとりおこなわれます。コンピューターなんで!


 とゆうわけで、このルールに則って「1AND2」を縦計すると、こうゆうことになります。

    0000 0001
AND 0000 0010
--------------
    0000 0000

 両方1の部分がないから、0になります。

 「4AND5」だったら・・・

    0000 0100
AND 0000 0101
--------------
    0000 0100

 答えは4になりますぅ~。

 コレで、考え方はあってると思うんだけど・・・


 さて、これをなでしこで計算します。

AND(1,2)を表示AND(4,5)を表示

 あんまり、なでしこのプログラムっぽくない!w

 それはさておき、これをなでしこ1で実行すると、ちゃんと0と4が母艦表示されるんですが・・・

 なでしこ3の簡易エディタでは・・・なななんと、2と5になってしまうのですよーっ。

 なんでだ・・・(?_?;

 よくわかんないけど、v1非互換ともなっていないのに、なでしこ1となでしこ3とで答えが違ってしまうってゆうのは・・・


 ちなみに、ORもおかしくないかな。

OR(1,4)を表示

 が、1になってしまうんです。

 XORについてはまだ学んでないので検証してませんが・・(しろよ;)


 いつもいつもぼやいてばっかでスミマセン;

 でも、とてもとても応援してます!(>_<)/

通りすがり通りすがり2018/01/31 22:33ANDやORはビット演算子としての側面と、BOOL代数(真理値)としての側面があるため、ややこしい感じに。

javascriptでは、
|と||や、&と&&のように使い分けられるのですが、なでしこは1のころからこの辺が混在したままで結局使うのが難しい機能になっています。
(どちらかのみでは、意図しないことになります)

ビット演算子としては、書かれている通りです。
14&7は、6になります。
14|7は、15です。

もう一方、BOOL(ビット単位ではなく、値そのものがtrueとfalseのあれ)真と偽としては、以下のようになります。

or演算子
左辺を評価し真(非0)ならその値を返す。左辺が偽(0)ならば右辺も評価しその値を返す。左辺が真の阿合は右辺は評価されません。
0||2||3は、2なります(3は評価されません)
14||7は14です。

and演算子
左辺を評価し偽(0)ならあその値を返す。左辺が真(非0)ならば右辺も評価しその値を返す。左辺が偽の場合は右辺は評価されません。
0&&2&&3は、0です(2,3は評価されません)
1&&2&&3&&4が、4です(1,2,3,4のすべてが評価されます)
14&&7は7です。

という感じと記憶してますがいかがでしょうか。

雪乃☆雫雪乃☆雫2018/02/01 06:46・・・ナナナなんて?(*_*;
またまたなんだかよくワカンナイかんじに~(@_@)
これはもう・・・脳がフリーズしちゃうヤツだ><

しかし・・・つまり、ANDとORには実は2種類あって、おかしくはなってないんだけど、なでしこ1となでしこ3とでは、さりげなーく仕様が変わってしまった・・・というコトなのでしょうか。

あああ・・・そして、なるほど。
AND(1,2)とAND(2,1)の結果が、なでしこ3の場合違ってしまうのもナゾだと思っていましたが、こうゆうことだったのですね!

なんかもう本当に、いつもいつもありがとうございます!!!

通りすがり通りすがり2018/02/02 20:30なでしこ3ならばjavascriptベースで、javascriptには個別の演算子があるのになぁ ということで、少しひらめきました。

ABCは14
DEFは7
「{ABC}|{DEF}」をJS実行を表示
「{ABC}&{DEF}」をJS実行を表示
「{ABC}^{DEF}」をJS実行を表示
BWORは『(function(){return function(){var i=1,r=arguments[0];while(i<arguments.length-1){r|=arguments[i++];}return r;}})()』をJS実行
BWANDは『(function(){return function(){var i=1,r=arguments[0];while(i<arguments.length-1){r&=arguments[i++];}return r;}})()』をJS実行
BWXORは『(function(){return function(){var i=1,r=arguments[0];while(i<arguments.length-1){r^=arguments[i++];}return r;}})()』をJS実行
BWOR(ABC,DEF)を表示
BWAND(ABC,DEF)を表示
BWXOR(ABC,DEF)を表示

なでしこ1で似たことをするとしたら、Luaの利用でしょうか。

雪乃☆雫雪乃☆雫2018/02/04 19:58JS実行!
なんと、これを使えば、Javascriptで出来ることはだいたい、なでしこで出来ちゃうということなんですね!
といっても、Javascript部分はマッタク分かりませんが;
でも、これをこのまま使わせてもらって、上手いことできそう。
対応して頂けそうな感じにもなってますが、
https://github.com/kujirahand/nadesiko3/issues/260
バージョンアップまではコレですね。
ありがとうございます☆

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

2018/01/17 (水)

ジャンケンマンってこんな画面だっけ?

| 15:25 | ジャンケンマンってこんな画面だっけ? - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - ジャンケンマンってこんな画面だっけ? - 雪乃☆雫のなでしこ日和 ジャンケンマンってこんな画面だっけ? - 雪乃☆雫のなでしこ日和 のブックマークコメント

 の後ちょこっと画像検索してみた結果によると、ワタシの知ってるジャンケンマンは、newジャンケンマンという、二代目の機種だったっぽいです。

 でっ・・・

 こんな感じ・・・デスかねえ?

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

 画面だけですw

 なでしこではほとんどナニもしないのでコードも載せません。

 CSS・・・具合わるくなる!(爆)

 こんなことなら、全部なでしこで、canvasに描画した方が楽な気もするけど、まだなでしこ3では、角丸四角が出来ないしね~。(なるべく画像を使わずに、それっぽく再現したいとゆう方針)

 しかも、「<!DOCTYPE html>」を付けたら、いきなり表示が崩れました。

 HTMLの中で、個別にTOPとかLEFTの位置を指定していたのがダメだったんですね。

 HTML5的には、そうゆうことは一切HTML中に書いてくれるなと、ちゃんとCSSにすれとゆうことラシイです。しくしくしくしく。 ←単位のpxが抜けてたせいだったっぽい!

 あとは、機械側のジャンケンの手だけど、黒地に赤ランプで表示しているだけのものだから、なでしこで描画も出来そうに思いますが・・・モノスゴクめんどくさいヽ(;´Д`)ノ

 諦めて画像にしようか考え中www

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

2018/01/02 (火)

ナコ様の透視術

| 23:15 | ナコ様の透視術 - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - ナコ様の透視術 - 雪乃☆雫のなでしこ日和 ナコ様の透視術 - 雪乃☆雫のなでしこ日和 のブックマークコメント

 あけましておめでとうございます。

 12月中は、ほとんどなにもしないでいるうちに年が明け、ふと気が付いたらなでしこ3がバージョンアップしていたよ!

 んな中、なでしこ1のプログラム(笑)


 吹出作成と吹出セリフ表示は、前にスクリーンセーバーの時に作ったものなので(https://nadesiko.g.hatena.ne.jp/snowdrops89/20161107/1478528925)、は、数当てカードを作っただけ。

 数当てカードは、相手が心の中で思った数を当てるという古典的な有名なマジックで、カードの最初の数を足していくだけの誰にでも出来るカンタンなものなんだけど、暗算能力が無いワタシはまったくスマートに出来ないんですね;

 して、なんでこんなことが可能なのかについては、わりと最近理解しました;;;

 全ての整数は、重複しないいくつかの2の累乗の和で表すことができる、とゆうことになってる・・・ラシイ。(結局んなに理解してない?!)

 ようするに二進数なんだけど、なんでこんなりくどい言い方しなきゃならんのか><;

 とっ、とにかく、ようく分かったのは、昔は一生懸命書き写したりしていたカードですが、実はプログラムで一瞬で作るコトの出来るシロモノだった・・・ということで、ついでにナコ様に実演してもらうようにしたものです。


 ナコさまのセリフを読んだら、吹き出しをクリックして進めて下さい。

 カードの選択は、慎重かつ正直に。

 ナコさまは違えませんので、もし、結果が思っていた数と違ったら、それはアナタが違ってるのですwww

#ナコ様の透視術
#-----------------------------------------------------------
!母艦設計=「母艦の可視はオフ母艦のタイトルは「ナコ様の透視術」

#------------------------------------------------------------
科白色=$EEBBCC
#------------------------------------------------------------

#なこ様
ナコ様とはなこ。
これについて
  可視はオフ。
  X=ナコ様の幅。//デスクトップワークエリアW-ナコ様の幅。
  Y=デスクトップワークエリアH-ナコ様の高さ。
  マウス押した時は~
    吹出の可視はオフ。吹出右の可視はオフ。
  マウス離した時は~
    もし、Y-吹出の高さ+50<0ならば、Y=吹出の高さ-50-20。
    もし、Y+ナコ様の高さ>デスクトップワークエリアHならば、Y=デスクトップワークエリアH-ナコ様の高さ
    もし、X-吹出の幅<0ならば、
      もし、X<0ならば、X=0。
      吹出右の位置=「{ナコ様のX+ナコ様の幅-80},{ナコ様のY-吹出右の高さ+50}」
      もし、吹出方向=「右上」でなければ、吹出方向は「右上」。
    違えばもし、X+ナコ様の幅*2>デスクトップワークエリアWならば、
      X=デスクトップワークエリアW-ナコ様の幅*2
      吹出の位置=「{ナコ様のX-吹出の幅},{ナコ様のY-吹出の高さ+50}」
      もし、吹出方向=「左上」でなければ、吹出方向は「左上」。
    違えば、
      吹出の位置=「{ナコ様のX-吹出の幅},{ナコ様のY-吹出の高さ+50}」
      もし、吹出方向=「左上」でなければ、吹出方向は「左上」。
    もし、吹出表示状態=オンならば、
      吹出方向で条件分岐
        左上ならば、吹出の可視はオン。
        右上ならば、吹出右の可視はオン。
    母艦位置設定。
  ダブルクリックした時は~終わる。

#なこ様吹出
C=0。クリック待ちフラグ=オフ。
吹出とはフォームこれについて
  可視はオフ。ドラッグ移動オフ。
  クリックした時は~
    もし、クリック待ちフラグ=オンならば、
      クリック待ちフラグ=オフ。
      「{シナリオ¥C}」をナデシコする。。
      C=C+1。
      クリック待ちフラグ=オン。

吹出右とはフォームこれについて
  可視はオフ。ドラッグ移動オフ。
  クリックした時は~
    もし、クリック待ちフラグ=オンならば、
      クリック待ちフラグ=オフ。
      「{シナリオ¥C}」をナデシコする。。
      C=C+1。
      クリック待ちフラグ=オン。

#カードの表示位置(ダイアログ)は母艦の中央になる。
*母艦位置設定
  母艦のX=ナコ様のX+120。母艦のY=ナコ様のY-30。
  母艦の幅=ナコ様の幅。母艦の高さ=ナコ様の高さ。
#-----------------------------------------------------------
シナリオ=「科白を喋る。
科白非表示。数当カード。
終わる」
#------------------------------------------------------------
#メインルーチン
文字サイズは12。
塗り色は科白色。
吹出方向は「右上」
母艦位置設定。
ダイアログ詳細=「文字サイズ=12」

ナコ様の可視はオン。
数当表作成。
「心の中で1~60のの数字を思い浮かべて、
ボクには見えないようにメモって置いてね。{改行}
準備が出来たら、はじめるよ!」と喋る。
クリック待ちフラグ=オン。

科白=「では、これから六枚のカードを、お見せします。
の中に、あなたの思った数字があれば{カッコ}はい{カッコ閉じ}を、
なければ{カッコ}いいえ{カッコ閉じ}のボタンを押して下さい。」

*数当表作成
  数当表=。
  60
    数=回数。
    6
      もしAND(数,(2の(回数-1)乗))=0でなければ、数当表¥(回数-1)に数を一行追加。

*数当カード
  答=0
  6
    ダイアログタイトル=「数当てカード {回数}枚目」
    (回数-1)のカード表示。
    もしそれはいならば、答=答+(2の(回数-1)乗)
  「むむ、読めました!{~}あなたが心に描いた数字は…{~}  {答}  ですね?」と喋る。

*カード表示(Aの)
  カード=。
  数当表¥Aを配列数値ソート。
  30
    もしそれ¥(回数-1)<10ならば、数=「 {それ¥(回数-1)}」
    違えば、数=「{それ¥(回数-1)}」
    もし、(回数-1)%5=4ならば、カード=「{カード}{数}{改行}」
    違えば、カード=「{カード}{数} 」
  カードで二択。
#-----------------------------------------------------------
*喋る({文字列=「」}AでSと|Sを)
  科白種別はA。
  吹出方向で条件分岐
    「左上」ならば、
      吹出にSを「左上」へ200,100で吹出セリフ表示。
      吹出の位置=「{ナコ様のX-吹出の幅},{ナコ様のY-吹出の高さ+50}」
      吹出の可視はオン。
      吹出右にSを「右上」へ200,100で吹出セリフ表示。
    「右上」ならば、
      吹出右にSを「右上」へ200,100で吹出セリフ表示。
      吹出右の位置=「{ナコ様のX+ナコ様の幅-80},{ナコ様のY-吹出右の高さ+50}」
      吹出右の可視はオン。
      吹出にSを「左上」へ200,100で吹出セリフ表示。
  吹出表示状態=オン。

*科白非表示
  吹出の可視はオフ。吹出右の可視はオフ。吹出表示状態=オフ。
#------------------------------------------------------------
●吹出作成({グループ=?}FをW,Hで方向へ)
  xx=0。yy=0。ww=0。hh=0。
  方向で条件分岐
    右上ならば、  #矢印は左下
      Fのポケットは「右上」
      x1=0。y1=H。x2=W/8。y2=H/4*3。x3=W/4。y3=H/8*7。
    右下ならば、  #矢印は左上
      Fのポケットは「右下」
      x1=0。y1=0。x2=W/4。y2=H/8。x3=W/8。y3=H/4。
    左上ならば、  #矢印は右下(吹出し変形と同じ)
      Fのポケットは「左上」
      x1=W。y1=H。x2=W/4*3。y2=H/8*7。x3=W/8*7。y3=H/4*3。
    左下ならば、  #矢印は右上
      Fのポケットは「左下」
      x1=W。y1=0。x2=W/4*3。y2=H/8。x3=W/8*7。y3=H/4。
    上ならば、  #矢印は下向き
      hh=H/10。Fのポケットは「上」
      x1=W/2。y1=H+hh。x2=W/2-W/20。y2=H-H/100。x3=W/2+W/20。y3=H-H/100。
    下ならば、  #矢印は上向き
      hh=H/10。yy=hh。Fのポケットは「下」
      x1=W/2。y1=0。x2=W/2-W/20。y2=hh+H/100。x3=W/2+W/20。y3=hh+H/100。
    左ならば、  #矢印は右向き
      ww=W/10。Fのポケットは「左」
      x1=W+ww。y1=H/2。x2=W-W/100。y2=H/2-H/20。x3=W-W/100。y3=H/2+H/20。
    右ならば、  #矢印は左向き
      ww=W/10。xx=ww。Fのポケットは「右」
      x1=0。y1=H/2。x2=ww+W/100。y2=H/2-H/20。x3=ww+W/100。y3=H/2+H/20。
  Fの可視はオフ。
  FのクライアントWはW+ww。FのクライアントHはH+hh。
  Fを$00FF00で画面クリア。
  線スタイルは透明。
  Fのxx,yyからxx+W,yy+Hへ。1秒待つ。
  Fの「{x1},{y1},{x2},{y2},{x3},{y3}」へ多角形。
  F→画像通り変形。
//  Fの可視はオン。

●吹出セリフ表示({グループ=?}FにSを{整数=100}minW,{整数=50}minHで{文字列=「」}方向へ)
  Aとは文字列=「」。Bとは文字列=「」。
  Sで反復
    Bはそれ。
    もし(Aの文字数)<(Bの文字数)ならば、A=B。
  swとは整数=Aの文字幅取得shとは整数=(Sの文字高さ取得)*(Sの要素数)
  fwとは整数=(Aの文字幅取得)*1.5。fhとは整数=(Sの文字高さ取得)*(Sの要素数)*1.8
  もしfw<minWならばfw=minW。
  もし、fh<minHならば、fh=minH。
  sxとは整数fw/2-sw/2-10
  syとは整数=fh/2-sh/2
  もし、方向=ならば、方向=F→ポケット。
  もし、方向=ならば、方向=左上。
  もし、方向=右ならば、sx=sx+fw/10  #矢印の長さ分
  もし、方向=下ならば、sy=sy+fh/10
  Fをfw,fhで方向へ吹出作成。
  Fのsx,syへSを文字表示。
#------------------------------------------------------------
トラックバック - http://nadesiko.g.hatena.ne.jp/snowdrops89/20180102

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