Hatena::Groupnadesiko

雪乃☆雫のなでしこ日和

2018/03/30 (金)

なでしこ3 v3.0.39がリリース!

| 08:26 | なでしこ3 v3.0.39がリリース! - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - なでしこ3 v3.0.39がリリース! - 雪乃☆雫のなでしこ日和 なでしこ3 v3.0.39がリリース! - 雪乃☆雫のなでしこ日和 のブックマークコメント

 直前のv3.0.38と合わせて、このような修正と新機能が追加されたようです。

DOMのキーイベント、マウスイベントを手軽に使えるように修正。
・「カメ描画先」「描画開始」でDOMのqueryとidのどちらでも指定できるように修正。
・「ボタン作成」「エディタ作成」「テキストエリア作成」など簡易FORM部品作成命令を追加
・「テキスト設定」「テキスト取得」「HTML設定」「HTML取得」命令を追加

 だいぶ前にぼやいていた、v0.1.7以降IDでの描画開始がうまくいかなくなってた件が直ったようですね♪

https://nadesiko.g.hatena.ne.jp/snowdrops89/20171029/1509283047



 マイナビ第24目では、「ボタン作成」「エディタ作成」「テキストエリア作成」などが使われていました!

https://news.mynavi.jp/article/nadeshiko-24/

 相変わらず、記事中では特に触れずに、さらっと新機能をコードの中に盛り込んできますねぇw

 注意点としては、簡易エディタでは自動的に「#nako3_div_1」とゆうDIVに作成されるようあらかじめ設定されてるっぽいですが、HTML埋め込みなどで使う場合は、「DOM親要素設定」が必要ラシイ。

「#nako3_div_1」にDOM親要素設定。

 みたいな?

 設定の決まりは「描画開始」と一緒で、セレクタとしてもIDとしても、DOM要素を変数に取得して指定するのもできました~☆

 他に、テキストエリアとチェックボックスも作成出来るようです。

 この調子で、CSSなんかも基本的なヤツは日本語でできるようになりませんかね~。

 ある程度HTMLCSSを覚えたら、あんま必要性なくなっちゃうんだけど、でもやっぱり全部なでしこっぽく日本語で書けたらイイよねぇ。

 出来れば、animationなんかがCSSを意識しなくてもできるようになったら、すごく楽しいと思うんだよね。



 して、何より特筆すべきは、「DOMのキーイベント、マウスイベントを手軽に使えるように修正」

 コレだけ見てもなんかよく分からず、前の「クリックした時には~」が追加された時

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

以上の感動を覚えませんが、なこ丼でクジラ飛行机さまご自身がトゥートされております!

https://nadesiko-users.info/web/statuses/99767817836972781

 『押されたキー』『マウスX』『マウスY』にイベントの値が入るように修正…

 コレだよ、コレっ!!!(喜)

 ゲーム作るなら絶対に必要なヤツです。

 これでまた、色々遊べそう。やったねヽ(^o^)ノ


 は、早速リファレンスにもご説明が追加され、使用例のサンプルもあります

https://nadesi.com/doc3/index.php?%E3%82%AD%E3%83%BC%E5%85%A5%E5%8A%9B%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6

https://nadesi.com/doc3/index.php?%E3%83%9E%E3%82%A6%E3%82%B9%E6%93%8D%E4%BD%9C%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6

 ・・・とゆうわけで、狂喜乱舞してるわりに、自分で作ったお試しコードはいっこも無いってゆうね;

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

2018/03/06 (火)

グーグルマップと天気予報

| 18:21 | グーグルマップと天気予報 - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - グーグルマップと天気予報 - 雪乃☆雫のなでしこ日和 グーグルマップと天気予報 - 雪乃☆雫のなでしこ日和 のブックマークコメント

 以前JS実行とゆうことを知って、しかし、Javascriptなんていっこも分からないからなぁ~・・・と思っていたんですが、こんなのを見つけました。

コピペで簡単!Google Mapをサイトに表示する方法
http://www.hp-stylelink.com/news/2013/11/20131119.php

 このスクリプトをコピペしてくれば、自分のHPにぐーぐるまっぷが表示出来るって寸法です。コレをなでしこからJS実行で使えば、なんか面白いこと出来そうじゃないですか?♪

 ただ、ここの情報はちょっと古くて、Google Maps APIを使うには、APIキーなるモノを取得しなければならないようです。むむむ。

【2018年度版】Google MapsAPIキー を簡単に取得する
https://nendeb.com/276

 別にキーを取得するだけはやっつけですぐ出来ました☆

 が、キーを他人に使われないよう制限をかけなきゃダメで(1日あたり地図の生成回数が25,000以上が90日以上連続すると課金の対象になっちゃうんだって!)ここを参考にして設定しました。たまにはダッシュボードで数値が異常じゃないか見とく必要もありそうですね・・・むー;


 で、取り込むスクリプトはこうなりまする。

<!-- Google Mapを使うのに必要プラグイン -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=xxx(APIキー)&callback=initMap"></script>

 ただマップを表示するだけなら、JavaScriptのソースをコピペしてきてlatとlonを変えるだけでいいんだけど、なでしこを使って、ボタンでマップを切り替えられるプログラムにしてみました~♪

<script type="なでしこ">
#ボタンのスタイル設定
ボタンスタイルは、{
  "font-size": "24px",
  "padding": "0px 10px",
}
「button」にボタンスタイルをDOMスタイル一括設定。

#ボタンのイベント設定
「#sapporo」をクリックした時には、地図表示(43.0686605,141.3507548,15,"札幌駅")。ここまで。
「#asahikawa」をクリックした時には、地図表示(43.7628477,142.3584328,15,"旭川駅")。ここまで。
「#hakodate」をクリックした時には、地図表示(41.7737832,140.7263354,15,"函館駅")。ここまで。
「#otaru」をクリックした時には、地図表示(43.1977717,140.9941033,15,"小樽駅")。ここまで。

●地図表示(緯度,経度,縮尺,情報)
 「mapInit({緯度},{経度},{縮尺},"{情報}");」をJS実行。
ここまで。
</script>

<H1>なでしこ3てすと~ぐーぐるまっぷの表示</H1>
<HR>
  <button id="sapporo">札幌</button><button id="asahikawa">旭川</button><button id="hakodate">函館</button><button id="otaru">小樽</button>
  <div id="mapField" style="width:520px; height:390px;">ボタンを押すと地図が表示されるよ★</div>

http://www.geocities.jp/snowdrops890/wnako3_test/14_GoogleMap.html

 Javascript部分はほぼコピペなのでここには載せませんが、ソースを表示で見れます。

 なでしこから引数を渡せるように変えました。



 して・・・

 マイナビ連載22目では、お天気APIの使い方を学びました。

 コレもまずはAPIキーを取得しなきゃないようです。

 えええええ英語だぁぁ~(ToT)

 ベベベツニムズカシイコトハナイデスヨ・・・

 キー取得するだけなら、わりとありふれたアレですから・・・

 でででも、こう全部英語なページが開いたりすると、わっと言って画面閉じたくなっちゃうんだよね・・・;;;

 でもまあ、取得出来まして、記事のとうりに簡易エディタで動かすのは当然出来ました。てきとーにご近所の町を色々入れてみましたが、結構な田舎町も名前が登録されていたりしてびっくり。

 だけどなんですか、暴風雪警報も出て外は猛吹雪って時に、のほほんと「曇りがち」とかお知らせしてくれるOpenWeatherMapさまって・・・

 言葉も通じない外つ国の遙か彼方から観測してらっしゃるんだね・・・(違うって;)


 さてさて、それはさておき説明のページをぐーぐる翻訳さまに読んでいただいて、都市名だけでなく緯度と経度での指定も出来るラシイことが分かったので、グーグルマップの表示と連動させてみようと思い立ちました。

 ところが、どうもうまくいかない・・・Ajax送信ができない・・・ってかHTMLにv3.0.31のスクリプトが取り込めてない気がする・・・とゆうことをちょこっとなこ丼(https://nadesiko-users.info/)でつぶやいたら、なななんとあっというまに対応して頂けました!素晴らしいですね!!ありがたいですね!!!


 で、こんな感じ~。

#-----------------------------------------------------------
●天気予報表示(緯度と経度で)
 緯度=緯度を文字列変換から5だけ右端削除。
 経度=経度を文字列変換の5だけ右端削除。
 URL=「https://api.openweathermap.org/data/2.5/weather?lat={緯度}&lon={経度}&appid={APIキー}&units=metric&lang=ja」

# AjaxAPIにアクセス --- (*2)
 URLにGET送信した時には
  画像URL=「https://openweathermap.org/img/w/」
  対象JSONデコードして、Jに代入。# --- (*3)
  天気=J["weather"][0]["description"]
  気温=J["main"]["temp"]
  湿度=J["main"]["humidity"]
  天気アイコン=J["weather"][0]["icon"]
  日時=J["dt"]を日時変換の16だけ文字左部分。
  場所=J["name"]

  # HTML表示--- (*4)
  天気予報=「{日時}の{場所}の天気<BR>
<img src="{画像URL}{天気アイコン}.png" align="middle"> {天気}<BR>
気温: {気温}度 / 湿度: {湿度}%」
  天気予報を「#weather」にDOM_HTML設定。
 ここまで。
ここまで。
#-----------------------------------------------------------
●右端削除(SからAだけ|Sの)
 数=Sの文字数。
 S=Sの(数-(A-1))からAだけ文字削除。
 Sで戻るここまで。
#-----------------------------------------------------------

http://www.geocities.jp/snowdrops890/wnako3_test/14_OpenWeatherMap.html

 地名も日本語表示に対応して欲しいよね~。

 いや、これは単に緯度と経度でコレが取得出来るのが面白いからこうしてみただけなんだけどねw

 しかものために、ムダに緯度と経度を小数点以下二桁までに加工してみたりして(^▽^;(そうないとナゼか札幌がHokkaidoになってしまう。ナゾだ・・・)

 ナゾと言えば「Sapporo-shi」と都市名で指定した時と、緯度経度で指定した時とで、lonとlatとnameは同じ物が返ってきてるのに、天気の結果が異なる時があるっていうね???

 でもまあ、こんなもんでしょ☆

 敵が英語だから、ナゾを解明しようとは思わんし、なでしこのことじゃないし。

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

2018/03/01 (木)

ジャンケンマンを作ってみたよ☆

| 13:30 | ジャンケンマンを作ってみたよ☆ - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - ジャンケンマンを作ってみたよ☆ - 雪乃☆雫のなでしこ日和 ジャンケンマンを作ってみたよ☆ - 雪乃☆雫のなでしこ日和 のブックマークコメント

 ムカシ、デパートのゲームコーナーなんかに置かれてたジャンケンマン。

 ・・・とゆうことを最初に書いてから、もう3ヶ月くらい経ってるっぽいね。いやいやいや;

 とっ、ともかくっ、ワタシが知っているのは、Newジャンケンマンとゆう2代目の機種のようで、いちおうそれを再現してみました。

 と言っても、ムダに「画像を使わないそれっぽくする」とゆう方針のもと作ったので、見た目の再現度はびみょーですけど・・・まあこんなもんでしょうw

 プログラムとCSSとどっちが長いんだよとゆう勢い;

 CSS・・・具合わるくなる!><

 ・・・そう言えば、前の記事でHTMLタグにtopやleftの設定を入れてると、HTML5の時に反映されずに位置がずれちゃう的なコトを書いたんだけど、実はそれは誤りで、pxが抜けてたせいでした;;;

 HTML5の時は、単位とか、あとカラーコードの前の#とかを省略してはダメのようです。(ムカシは付けてなかった気がする・・・!DOCTYPE htmlを付けなければ、ふつーに通るんですよコレが;;;)

 手の表示も、頑張って座標を取って作りました。

 ずっと、写からプログラムで座標を取れないかなーとか考えてたんだけど、ランプの明るさが一定ではないので、色や大きさにばらつきがある所から中心の一点を取るとゆうのは、どうもワタシの知恵ではもう完全にムリっぽく思われたので、結局、クリックした座標を記録していくとゆう、ほぼ手作業と変わらん手立てとなりましたw

 ところでなでしこ3では、改行の記号として{~}が使えないんですかねー?

 ジェイソンさんにすれってことかね(^▽^;

<script type="なでしこ">
#-----------------------------------------------------------

#----- 宣言 ----------
メダル=0。
敵手=。
判定=。
連勝回数=0。
得点=0。

#----- フラグ ----------
コイン投入フラグ=100。
スタートボタンオフ。
ジャンケンボタンオフ。
戻ボタンオフアニメカウンター=0。
手アニメ隔=1。
アニメ中=オフ。
相子フラグ=オフ。

#----- 音設定 ----------
音フォルダ=「http://www.geocities.jp/snowdrops890/audio/」
音_ジャンケン=音フォルダ「Jyanken.mp3」
音_ポン_ヤッタネ=音フォルダ「J_pon_win.mp3」
音_ポン_ズコー=音フォルダ「J_pon_zuko.mp3」
音_ポン_アイコ=音フォルダ「J_pon_draw.mp3」
音_ショ_ヤッタネ=音フォルダ「J_syo_win.mp3」
音_ショ_ズコー=音フォルダ「J_syo_zuko.mp3」
音_ショ_アイコ=音フォルダ「J_syo_draw.mp3」
音_メダル投入=音フォルダ「medal_in.mp3」
音_メダル戻=音フォルダ「medal_modosi.mp3」
音_メダル戻32=音フォルダ「medal_modosi_32.mp3」

#----- CSS設定 ----------
メダルCSSは、{
  "font-size": "32px",
  "background-color": "#ffdd00",
  "opacity": "1",
}
百CSSは、{
  "font-size": "16px",
  "background-color": "#CCCCCC",
  "opacity": "1",
}
判定点灯CSSは、{
  "text-shadow": "3px 5px 15px #FFEE00,-3px -5px 15px #FFEE00",
  "box-shadow": "5px 5px 10px #FFFFDD,-5px -5px 10px #FFFFDD,5px 10px 15px #FFEEDD inset,-5px -10px 15px #FFEEDD inset",

}
判定消灯CSSは、{
  "text-shadow": "none",
  "box-shadow": "none",
  "background-color": "#FF9966",
}
得点点灯CSSは、{
  "text-shadow": "3px 3px 5px #FFEE00,-3px -3px 5px #FFEE00",
  "box-shadow": "5px 5px 10px #FFFFDD,-5px -5px 10px #FFFFDD,5px 10px 15px #FFEEDD inset,-5px -10px 15px #FFEEDD inset",
  "background-color": "#FFFFEE",
  "color": "#FFCC99",
}
得点消灯CSSは、{
  "text-shadow": "none",
  "box-shadow": "none",
  "background-color": "#FFFFFF",
  "color": "#FF9966",
}

#----- 手表示用座標 ----------
共通=「122,120{改行}125,130{改行}127,143{改行}129,155{改行}130,167{改行}167,120{改行}166,132{改行}162,144{改行}159,155{改行}156,166{改行}113,243{改行}113,254{改行}160,243{改行}160,254{改行}46,118{改行}57,117{改行}64,110{改行}66,97{改行}55,171{改行}63,179{改行}74,183{改行}83,189{改行}94,195{改行}85,202{改行}76,210{改行}77,221{改行}86,229{改行}96,231{改行}108,232{改行}119,233{改行}130,234{改行}141,235{改行}153,235{改行}166,233{改行}178,232{改行}188,229{改行}195,220{改行}193,210{改行}184,202{改行}194,195{改行}204,188{改行}212,179{改行}218,170{改行}225,160{改行}228,149{改行}233,138」
グー=「49,161{改行}42,152{改行}40,141{改行}42,130{改行}164,89{改行}175,88{改行}186,86{改行}197,89{改行}204,99{改行}210,109{改行}220,108{改行}230,116{改行}235,127{改行}72,87{改行}80,78{改行}92,74{改行}103,77{改行}114,82{改行}125,78{改行}135,72{改行}146,75{改行}154,83」
チョキ=「62,86{改行}61,75{改行}60,63{改行}60,52{改行}61,40{改行}65,30{改行}72,22{改行}83,19{改行}94,21{改行}100,30{改行}104,43{改行}106,54{改行}110,67{改行}120,64{改行}125,52{改行}130,41{改行}135,30{改行}142,21{改行}153,17{改行}164,20{改行}169,29{改行}170,41{改行}168,54{改行}165,65{改行}166,78{改行}49,161{改行}42,152{改行}40,141{改行}42,130{改行}164,89{改行}175,88{改行}186,86{改行}197,89{改行}204,99{改行}210,109{改行}220,108{改行}230,116{改行}235,127」
パー=「43,170{改行}33,166{改行}23,161{改行}14,154{改行}6,146{改行}8,135{改行}13,124{改行}24,122{改行}35,119{改行}176,69{改行}186,62{改行}195,53{改行}203,45{改行}213,38{改行}224,43{改行}227,54{改行}226,66{改行}222,77{改行}220,88{改行}230,95{改行}241,90{改行}253,87{改行}263,93{改行}262,104{改行}257,115{改行}250,123{改行}243,132{改行}62,86{改行}61,75{改行}60,63{改行}60,52{改行}61,40{改行}65,30{改行}72,22{改行}83,19{改行}94,21{改行}100,30{改行}104,43{改行}106,54{改行}110,67{改行}120,64{改行}125,52{改行}130,41{改行}135,30{改行}142,21{改行}153,17{改行}164,20{改行}169,29{改行}170,41{改行}168,54{改行}165,65」

#----- 手のアニメーション表示 ----------
グー=グー改行共通をCSV取得。グーの手作成。グー=0。
チョキ=チョキ改行共通をCSV取得。チョキの手作成。チョキ=1。
パー=パー改行共通をCSV取得。パーの手作成。パー=2。
手アニメ表示。

#----- イベント設定 ----------
「#coin」をクリックした時には、コイン投入。ここまで。
「#start」をクリックした時には、スタート。ここまで。
「#gu」をクリックした時には、0で勝負処理。ここまで。
「#chi」をクリックした時には、1で勝負処理。ここまで。
「#pa」をクリックした時には、2で勝負処理。ここまで。
「#modosi」をクリックした時には、メダル戻。ここまで。
「#info」をクリックした時には、説明。ここまで。

●スタート
 もし、スタートボタンオンならば、
  「#voice」に「<audio src="{音_ジャンケン}" autoplay></audio>」をDOM_HTML設定。
  手アニメ隔=0.1。判定消灯。
  スタートボタンオフ。ジャンケンボタンオン。戻ボタンオフボタン有効変更。
  「#mes_coin」にDOMテキスト設定。
 ここまで。
ここまで。
●(自手で)勝負処理
 もし、ジャンケンボタンオンならば、
  手アニメ隔=0。判定消灯。
  ジャンケンボタンオフボタン有効変更。自手のボタン点灯。
  敵手=3の乱数。敵手表示。
  結果は(敵手 - 自手 + 3) % 3
  もし、結果が0ならば、
   もし、相子フラグ=オンならば、「#voice」に「<audio src="{音_ショ_アイコ}" autoplay></audio>」をDOM_HTML設定。
   違えば、「#voice」に「<audio src="{音_ポン_アイコ}" autoplay></audio>」をDOM_HTML設定。
   ジャンケンボタンオンボタン有効変更。//自手のボタン点灯。
   「#aiko」に判定点灯CSSDOMスタイル一括設定。相子フラグ=オン。
  違えばもし、結果が1ならば、
   もし、相子フラグ=オンならば、「#voice」に「<audio src="{音_ショ_ヤッタネ}" autoplay></audio>」をDOM_HTML設定。
   違えば、「#voice」に「<audio src="{音_ポン_ヤッタネ}" autoplay></audio>」をDOM_HTML設定。
   「#kachi」に判定点灯CSSDOMスタイル一括設定。相子フラグ=オフ。
   得点消灯。得点加算。
   もし、連勝回数=5ならば、
    「#se」に「<audio src="{音_メダル戻32}" autoplay></audio>」をDOM_HTML設定。
    2秒後には
      戻ボタンオン。メダル戻。
    ここまで。
   違えば、
    戻ボタンオン。スタートボタンオンボタン有効変更。自手のボタン点灯。
    「#mes_coin」に「スタートを<BR>おしてね!」をDOMテキスト設定。
   ここまで。
  違えばもし、結果が2ならば、
   もし、相子フラグ=オンならば、「#voice」に「<audio src="{音_ショ_ズコー}" autoplay></audio>」をDOM_HTML設定。
   違えば、「#voice」に「<audio src="{音_ポン_ズコー}" autoplay></audio>」をDOM_HTML設定。
   「#make」に判定点灯CSSDOMスタイル一括設定。相子フラグ=オフ。
   連勝回数=0。得点=0。得点消灯。
   もし、メダル≦0ならば、
    ゲームオーバー。
   違えば、
    コイン投入フラグ=2。コイン投入。
   ここまで。
  ここまで。
 ここまで。
ここまで。
●得点加算
  連勝回数=連勝回数+1。
  もし、(連勝回数≧1)かつ(連勝回数≦5)ならば、
   得点=2^連勝回数。
   「#p{得点}」に得点点灯CSSDOMスタイル一括設定。
  ここまで。
ここまで。
●メダル戻
 もし、戻ボタンオンならば、
  戻ボタンオフ。スタートボタンオフ。ジャンケンボタンオフボタン有効変更。
  もし、連勝回数=5でなければ、「#se」に「<audio src="{音_メダル戻}" autoplay></audio>」をDOM_HTML設定。
  メダル=メダル+得点。連勝回数=0。得点=0。
  「#medal」にメダルをDOMテキスト設定。
  得点消灯。判定消灯。
  コイン投入フラグ=2。コイン投入。
 ここまで。
ここまで。
#-----------------------------------------------------------
●判定消灯
  「#aiko」に判定消灯CSSDOMスタイル一括設定。
  「#kachi」に判定消灯CSSDOMスタイル一括設定。
  「#make」に判定消灯CSSDOMスタイル一括設定。
ここまで。
●得点消灯
  「#p2」に得点消灯CSSDOMスタイル一括設定。
  「#p4」に得点消灯CSSDOMスタイル一括設定。
  「#p8」に得点消灯CSSDOMスタイル一括設定。
  「#p16」に得点消灯CSSDOMスタイル一括設定。
  「#p32」に得点消灯CSSDOMスタイル一括設定。
ここまで。
●(自手の)ボタン点灯
  もし、自手がグーならば、
   「#gu」をオンに有効変更。「#chi」をオフに有効変更。「#pa」をオフに有効変更。
  違えばもし、自手がチョキならば、
   「#gu」をオフに有効変更。「#chi」をオンに有効変更。「#pa」をオフに有効変更。
  違えばもし、自手がパーならば、
   「#gu」をオフに有効変更。「#chi」をオフに有効変更。「#pa」をオンに有効変更。
  ここまで。
ここまで。
#-----------------------------------------------------------
●ボタン有効変更
 もし、スタートボタンオンならば、
   「#start」をオンに有効変更。
 違えば、
  「#start」をオフに有効変更。
 ここまで。
 もし、ジャンケンボタンオンならば、
   「#gu」をオンに有効変更。「#chi」をオンに有効変更。「#pa」をオンに有効変更。
 違えば、
   「#gu」をオフに有効変更。「#chi」をオフに有効変更。「#pa」をオフに有効変更。
 ここまで。
 もし、戻ボタンオンならば、
  「#modosi」をオンに有効変更。
 違えば、
  「#modosi」をオフに有効変更。
 ここまで。
ここまで。
●(btnをAに)有効変更
 もし、A=オンならば、
  「{btn}_active」に「{btn}:active{波カッコ}box-shadow:none; top:3px;{波カッコ閉じ}
{btn}{波カッコ}box-shadow: 0 3px 0 #666666,5px 5px 30px #FFFFFF inset,-5px -5px 30px #FFFFFF inset;{波カッコ閉じ}」をDOM_HTML設定。
 違えば、
  「{btn}_active」に「{btn}:active{波カッコ}box-shadow: 0 3px 0 #666666; top:0px;{波カッコ閉じ}
{btn}:active{波カッコ}box-shadow: 0 3px 0 #666666{波カッコ閉じ}」をDOM_HTML設定。
 ここまで。
ここまで。
#-----------------------------------------------------------
●コイン投入
 もし、コイン投入フラグ=1ならば、
  メダル=メダル-1。
  「#se」に「<audio src="{音_メダル投入}" autoplay></audio>」をDOM_HTML設定。
  「#medal」にメダルをDOMテキスト設定。
  「#coin」の「opacity」に「0」をDOMスタイル設定。  #透明度を0にしてメダルを消す。
  「#mes_coin」に「スタートを<BR>おしてね!」をDOMテキスト設定。
  コイン投入フラグ=0。手アニメ隔=0。スタートボタンオンボタン有効変更。
 違えばもし、コイン投入フラグ=2ならば、
  「#mes_coin」に「メダル<BR>いれる」をDOMテキスト設定。
  「#mes_coin」の「opacity」に「1」をDOMスタイル設定。
  「#coin」に「$」をDOMテキスト設定。
  「#coin」にメダルCSSDOMスタイル一括設定。
  「#coin」の「opacity」に「1」をDOMスタイル設定。
  コイン投入フラグ=1。
 違えばもし、コイン投入フラグ=100ならば、
  メダル=11。
  「#se」に「<audio src="{音_メダル投入}" autoplay></audio>」をDOM_HTML設定。
  「#coin」の「opacity」に「0」をDOMスタイル設定。
  「#mes_coin」の「opacity」に「0」をDOMスタイル設定。
  2秒後には
  「#voice」に「<audio src="{音_メダル戻}" autoplay></audio>」をDOM_HTML設定。
  「#medal」に「11」をDOMテキスト設定。
  「#txtwin」の「opacity」に「0」をDOMスタイル設定。
  「#txtwin」の「transform」に「scale(.1)」をDOMスタイル設定。
  コイン投入フラグ=2。コイン投入。
  ここまで。
 ここまで。
ここまで。
#-----------------------------------------------------------
●ゲームオーバー
  手アニメ隔=1。
  「#txtwin」の「opacity」に「1」をDOMスタイル設定。
  「#txtwin」の「transform」に「scale(1)」をDOMスタイル設定。
  「#mes_coin」に「100<BR>いれる」をDOMテキスト設定。
  「#coin」に「100」をDOMテキスト設定。
  「#coin」に百CSSDOMスタイル一括設定。
  ジャンケンボタンオフボタン有効変更。
  判定消灯。コイン投入フラグ=100。
ここまで。
#-----------------------------------------------------------
●(Aの)手作成
 もし、A=グーならば、「#img_gu」へ描画開始。
 違えばもし、A=チョキならば、「#img_chi」へ描画開始。
 違えばもし、A=パーならば、「#img_pa」へ描画開始。
  黒色線色設定。
  黒色塗り色設定。
  [140,140]に139の描画。
  赤色線色設定。
  赤色塗り色設定。
  P=配列。
  Aを反復
    P=対象を「,」で区切る。
    [P[0],P[1]]に3の描画。
  ここまで。
ここまで。
●手アニメ表示
 もし、手アニメ隔=0でなければ、、
  もしアニメカウンター=グーならば、
    「#img_gu」の「opacity」に「1」をDOMスタイル設定。
    「#img_chi」の「opacity」に「1」をDOMスタイル設定。
  違えばもしアニメカウンター=チョキならば、
    「#img_gu」の「opacity」に「0」をDOMスタイル設定。
  違えばもしアニメカウンター=パーならば、
   「#img_chi」の「opacity」に「0」をDOMスタイル設定。
  ここまで。
 ここまで。
 もしアニメカウンター≧2ならばアニメカウンター=0。
 違えばアニメカウンター=アニメカウンター+1。
 「手アニメ表示」を(手アニメ隔)秒後。
ここまで。
●敵手表示
  もし、敵手=グーならば、
   「#img_gu」の「opacity」に「1」をDOMスタイル設定。
  違えばもし、敵手=チョキならば、
    「#img_gu」の「opacity」に「0」をDOMスタイル設定。
    「#img_chi」の「opacity」に「1」をDOMスタイル設定。
  違えばもし、敵手=パーならば、
    「#img_gu」の「opacity」に「0」をDOMスタイル設定。
    「#img_chi」の「opacity」に「0」をDOMスタイル設定。
  ここまで。
ここまで。
●説明
 「【遊び方】
 まず100を入れて、メダルを11枚ゲットします。
 次に、メダルを1枚入れたら、スタートボタンを押してジャンケンを開始。
 グーチョキパーの任意のボタンを押してジャンケンをし、勝てば得点のボタンが点灯、連勝すると得点がアップしていき、メダル戻しでの得点分のメダルが払い戻せますが、負けると0に戻ってしまいます。
 あいこの時は勝負が付くまで続けてジャンケンボタンが押せます。
 負けたら、また次のメダルを入れて勝負をし、メダルを使い切ったらゲームオーバーです。(100を入れて再スタートできます)
 特にクリア要件はありませんので、自分で目標を決めて頑張りましょう。」を言うここまで。
#-----------------------------------------------------------
●CSV取得(Sを|Sの|Sで)
  仮表=配列。
  S=Sを改行区切る。
  Sを反復
    それを「,」で区切る。
    仮表にそれ配列追加。
  ここまで。
  仮表で戻るここまで。
#-----------------------------------------------------------------------
</script>

<style type="text/css">
/* ゲーム画面 */
#base {
  margin:auto;
  width:400px;
  height:600px;
}
#gamen {
  position:absolute;
  width:400px;
  height:420px;
  background-color:#F5EE55;
  border:solid 10px silver;
}
/* ジャンケンの手を表示する */
#img_gu {
  position:absolute;
  top:130px; left:60px;
  z-index:2;
}
#img_chi {
  position:absolute;
  top:130px; left:60px;
  z-index:1;
}
#img_pa {
  position:absolute;
  top:130px; left:60px;
  z-index:0;
}
/* 得点 */
.point {
  position:absolute;
  display:table-cell;
  width:56px;
  height:56px;
  background-color:#FFFFFF;
  border:solid 1px #CC6633;
  border-radius:30px;

  vertical-align:middle;
  text-align:center;
  color:#FF9966;
  font-weight:bold;
  font-size:36px;
}
/* 勝ち負けの判定 */
.hantei {
  position:absolute;
  display:table-cell;
  width:110px;
  background-color:#FF9966;
  border:solid 3px #000000;
  border-radius:30px;

  vertical-align:middle;
  text-align:center;
  color:#FFFFFF;
  font-weight:bold;
  font-size:28px;
}

/* テキストウィンドウ */
#txtwin {
  position:absolute;
  display:table-cell;
  top:200px;
  width:400px;
  padding:30px 0px;
  z-index:3;
  background-color:rgba(0, 0, 0, 0.7);
  color:#FFFFFF;
  text-align:center;
  vertical-align:middle;
  font-weight:bold;
  font-size:32px;

  transition: opacity 0.5s, transform 0.5s;    /* 0.5秒かけて透明度とサイズの変化 */
  opacity:0;
  transform: scale(.1);
}

/* 操作盤 */
#buttonarea {
  position:absolute;
  width:415px;
  height:180px;
  top:432px;
  left:-10px;
  background-color:#FFFFCC;
  border:solid 3px silver;
  border-radius:10px;
}

/* ボタン総合設定 */
#button {
  position:absolute;
  width:420px;
  top:20px;
}
#button span{
  position:absolute;
  text-align:center;
}
.btn {
  position:relative;
  display:table-cell;
  text-align:center;
  vertical-align:middle;
  text-decoration:none;
  cursor:pointer;
  width:50px;
  height:50px;
  border-radius:30px;
  border:1px solid #999999;
  box-shadow:0 3px 0 #666666;
}
/* ボタン個別設定 */
#start {
  background-color:#FF0000;
}
#gu {
  background-color:#66FF66;
}
#chi {
  background-color:#6699FF;
}
#pa {
  background-color:#FF6699;
}
#modosi {
  background-color:#FF0000;
}

/* コイン(メダルまたは百投入ボタン) */
#coin {
  position:relative;
  display:table-cell;
  text-align:center;
  vertical-align:middle;
  text-decoration:none;
  cursor:pointer;

  width:50px;
  height:50px;
  border-radius:30px;
  border:1px solid #999999;
  box-shadow:0 2px 0 #666666;
  background-color:#CCCCCC;

  font-weight:bold;
  font-size:16px;   /* 100(font-size:16px;) メダル(font-size:32px;)*/
  color:#FFFFFF;
  text-shadow:0 1px 1px rgba(0, 0, 0, 1);
}
#coin:active {
  left: -10px;
}
#mes_coin {
  top:100px;
  left:20px;
  line-height:20px;
}

/* メダル残り枚数表示 */
#medal {
  position:absolute;
  display:table-cell;
  width:80px;
  background-color:#000000;
  border:solid 3px #000000;
  border-radius:10px;

  vertical-align:middle;
  text-align:center;
  color:#FFFF66;
  font-weight:bold;
  font-size:28px;
  top:100px;
  left:275px;
}

#info {
  position:absolute;
  top:390px;
  left:330px;
}
</style>
<style type="text/css" id="start_active"></style>
<style type="text/css" id="gu_active"></style>
<style type="text/css" id="chi_active"></style>
<style type="text/css" id="pa_active"></style>
<style type="text/css" id="modosi_active"></style>

<div id="base">
 <div id="gamen">
  <span class="point" id="p2" style="top:25px; left:30px;">2</span>
  <span class="point" id="p4" style="top:10px; left:100px;">4</span>
  <span class="point" id="p8" style="top:5px; left:170px;">8</span>
  <span class="point" id="p16" style="top:10px; left:240px;">16</span>
  <span class="point" id="p32" style="top:20px; left:310px;">32</span>

  <span class="hantei" id="make" style="top:95px; left:10px;">まけ</span>
  <span class="hantei" id="aiko" style="top:70px; left:142px;">あいこ</span>
  <span class="hantei" id="kachi" style="top:95px; left:270px;">かち</span>

  <canvas id="img_gu" width="280px" height="280px"></canvas>
  <canvas id="img_chi" width="280px" height="280px"></canvas>
  <canvas id="img_pa" width="280px" height="280px"></canvas>

  <span id="txtwin">GAME OVER</span>
  <div id="se"></div><div id="voice"></div>
  <button id="info">遊び方</button>

  <div id="buttonarea">
   <div id="button">
    <span style="left:10px;">スタート<BR><a class="btn" id="start"></a></span>
    <span style="left:110px;">グー<BR><a class="btn" id="gu"></a></span>
    <span style="left:170px;">チョキ<BR><a class="btn" id="chi"></a></span>
    <span style="left:230px;">パー<BR><a class="btn" id="pa"></a></span>
    <span style="left:320px;">メダルもどし<BR><a class="btn" id="modosi"></a></span>
    <span id="mes_coin">100<BR>いれる</span><span style="top:90px; left:80px;"><a id="coin">100</a></span>
    <span style="top:100px; left:170px;">メダルのこり</span><span id="medal">0</span><span style="top:120px; left:370px;">まい</span>
   </div><!-- button -->
  </div><!-- buttonarea -->
 </div><!-- gamen -->
</div><!-- base -->

 あと、HTML埋め込み時のスクリプトのバージョンはまだv3.0.29みたい?

 3.0.31にすると動かないんだよね~?(いや、詳細な変更点のトップは3.0.29になってるし、コレでいいのか?)

 あとあと、v3.0.21は問題ないんだけど、v3.0.29にするとなぜだかIEで動かなくなっちゃうような???むむむ。

 取りあえず、v3.0.21でUPし直した~。

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

 さてさて、んな感じでこんな感じ~☆

 動作としては、だいぶそれっぽいかと思うんだけど・・・

 そうそう、前に一度たりとも32まで行かないとかぼやいてましたが、行く時は結構行くようで、2連続で行ったこともありました!

 やっぱり実機にはズルが仕込まれていたに違いないよ!!!w

 しかし・・・勝っても負けても損も特も無いとなると、ついつい問答無用で5連勝32枚戻しを狙うようになり、駆け引きがなくなってなんかつまらん;

 この手の機種は、こら辺の駆け引きが重要で、面白かったんだったのに・・・


※このブログでは「]]」が消えてしまうっぽい?(これも何かのはてな記法??)

 これも変換しなきゃダメか・・・

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

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

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