Hatena::Groupnadesiko

雪乃☆雫のなでしこ日和

2019-03-13

タイマーでボールを動かしクリックで止める

| 02:43

 なでしこ3がバージョンアップしました☆

v3.0.57
・もし文で違えばない時のネストが不安定を修正。 #357
・『逐次実行』構文で連文を認識できない問題を修正 #373

v3.0.55
・関数定義でスタックが混乱する問題を修正(#342)
・CSV関連の関数の不具合を修正(#314)
・Node版のcopy-pasteモジュールを置き換え(#347)
・『関数』から始まる変数が定義できない問題を修正(#341)
・エラーメッセージを親切に(#350)
・引数の中で関数呼び出しがあるとうまく実行できない問題を修正(#352)
・SJIS取得がうまく動いていない問題を修正(#354)
・cnako3に『尋』命令を追加(#355)
・非同期処理の『逐次実行』構文を追加(#258)
・『』命令が動かないので修正(#371)
・RGB関数配列版『色混ぜる』関数追加(#360)

 以前ぼやいていた「CSV取得」の問題と、入れ子になった「もし文」の問題が、早速対応されました! ありがたや~。

 「逐次実行」は、データを取得したりする時に、ちゃんと取得し終わるのを待ってから次を実行するとゆうことだね。

 AJAX送信とHTTP取得は書いてあること一緒だけど何か違うのかなぁ(?_?)

 「色混ぜる」なーるほどねえ、色混ぜw

 普通に数値で指定した場合には、RGBと何が違うんだという話ですけど、色のデータを配列で持っていた場合に、「RGB(色[0],色[1],色[2])」みたいになっちゃうところ、「色の色混ぜ」みたいに書けるんですね~♪



 さてしかし、やるのはタイマー停止の実験。

 タイマーで玉を動かして、クリックで止めたり、また動かしたりします。

 3.0.41でタイマー停止の命令が追加され、ゲームが作り易くなった! と言いつつ放置していたんだよね~w

 取りあえず、マニュアルのサンプルのとうりだと、「*秒タイマー開始した時には」の後のカッコの中に、タイマーIDを入れる変数を指定して、それを「タイマー停止」することで、タイマーが止められるラシイ。

https://nadesi.com/doc3/index.php?plugin_system%252F%E3%82%BF%E3%82%A4%E3%83%9E%E3%83%BC%E5%81%9C%E6%AD%A2

 キッチンタイマーとかのように、1秒毎画面の書き換えを行って、決まった秒数が経ったら停止、みたいなのはうまくいきました。

 でも、サンプルのように、タイマーの中で止める場合はいいんだけど、クリックした時で止めようとしてみたら止まらなかった。

 このタイマーIDは無名関数引数ローカル変数? ・・・なんかよく分かんないケドんなようなものらしく、イベントなどでタイマーの外から停止させる場合には、グローバル変数? に移しておかなきゃダメっぽいね。

#------------------------------------------------------------------
# タイマーで動かしクリックで止める
#------------------------------------------------------------------
画面w=480。画面h=360。玉w=20。玉h=20。
玉x=画面w/2-玉w/2。玉y=画面h/2-玉h/2。
dx=3。dy=3。玉タイマーオフ。//タイマーID=

#---HTMLの設置----------
HTML=「<div id="base"><div id="main"><div id="msk"></div>
<canvas id="ball" width=20 height=20></canvas>
</div></div>」
「#nako3_div_1」にHTMLHTML設定。

#---CSS設定----------
「#base」に{
  "margin": "auto",
  "幅": "{画面w}px"
  "高さ": "{画面h}px"
  "border": "2px solid #999999"
}をDOMスタイル一括設定。

「#main」に{
  "position": "absolute",
}をDOMスタイル一括設定。

「#msk」に{
  "position": "absolute",
  "幅": "1360px"
  "高さ": "660px"
  "z-index": "2"
}をDOMスタイル一括設定。

「#ball」に{
  "position": "absolute",
  "左": "{玉x}px",
  "top": "{玉y}px",
}をDOMスタイル一括設定。

#---玉の描画----------
「#ball」へ描画開始。
[10,10]へ9の描画。

#---マウスイベント----------
「#msk」をマウス押した時には、
  もし、玉タイマーオンならば、
//    タイマーIDのタイマー停止
    玉タイマーオフ。
  違えば、
    玉x=マウスX。玉y=マウスY。
    もし、玉x≧画面w-玉wならば、玉x=画面w-玉w-1。
    もし、玉y≧画面h-玉hならば、玉y=画面h-玉h-1。
    「#ball」の「左」に「{玉x}px」をDOMスタイル設定。
    「#ball」の「top」に「{玉y}px」をDOMスタイル設定。
    玉移動。
  ここまで。
ここまで。
#-----------------------------------------------
玉移動
●玉移動
 玉タイマーオン。
 0.01秒タイマー開始した時には(ID)
//  タイマーID=ID。
  もし、玉タイマーオフならば、IDのタイマー停止。  //※
  もし、(玉x+dx<0)または(玉x+dx+玉w>画面w)ならば、dx=dx*-1。
  もし、(玉y+dy<0)または(玉y+dy+玉h>画面h)ならば、dy=dy*-1。
  玉x=玉x+dx。玉y=玉y+dy。
  「#ball」の「左」に「{玉x}px」をDOMスタイル設定。
  「#ball」の「top」に「{玉y}px」をDOMスタイル設定。
 ここまで。
ここまで。
#------------------------------------------------------------------

http://snowdrops.starfree.jp/wnako3_test/15_timer.html

 できた~☆

 タイマー開始時の最初に、先に宣言してあるタイマーIDに、IDを代入しています。

 だけど、これだとタイマーが動いてる中0.01秒毎とかに毎代入が繰り返されることになるって話だよね。まあ、別にいいけど。・・・それとも、他に何かうまい手があるのかなあ・・・?

 イヤイヤ待て待て、ひらめいたわ。タイマーってるかどうかのフラグで、マウスのイベントを分けてんだから、のフラグをオフにしたらタイマーの中でタイマーを止めればいいだけじゃ?(バカ;)


 して、玉をいっぱい動かしたいような場合には・・・?

 やっぱり、玉いっこいっこにタイマーを用意してやらなきゃダメかな?

 よくわからん;;;

 とりあえず、動的に? 玉用のcanvasタイマー関数を作って、10個でも20個でも100個でも玉を出せるようにしてみた。

#------------------------------------------------------------------
# タイマーをいっぱいす(動的に作る)
#------------------------------------------------------------------
画面w=480。画面h=360。玉w=20。玉h=20。
玉x=配列。玉y=配列。玉色=配列。
dx=配列。dy=配列。玉タイマー配列。
最大移動速度=5。玉数=10。C=0。

#---GUIの設置----------
HTML=「<div id="gui"></div>
<div id="base"><div id="main"><div id="msk"></div>
<canvas id="bg" width={画面w} height={画面h}></canvas>
<div id="ball"></div>
</div></div>」
「#nako3_div_1」にHTMLHTML設定。
「#gui」にDOM親要素設定。
「玉数:」のラベル作成。
玉数のエディタ作成し、玉数エディタ代入。
「スタート」のボタン作成し、スタートボタン代入。

#---イベント----------
スタートボタンをクリックした時には
  玉数=玉数エディタからテキスト取得。
  玉作成。
  玉移動ここまで。

「#msk」をマウス押した時には、
  もし、(C<玉数)ならば、
    玉タイマー[C]=オフ。
  違えば、
    玉移動。C=-1。
  ここまで。
  C=C+1。
ここまで。

#---CSS設定----------
「#gui」に{
  "margin": "auto"
  "幅": "{画面w}px"
}をDOMスタイル一括設定。

「#base」に{
  "margin": "auto",
  "幅": "{画面w}px"
  "高さ": "{画面h}px"
  "border": "2px solid #999999"
}をDOMスタイル一括設定。

「#main」に{
  "position": "absolute",
}をDOMスタイル一括設定。

「#msk」に{
  "position": "absolute",
  "幅": "{画面w}px"
  "高さ": "{画面h}px"
  "z-index": "2"
}をDOMスタイル一括設定。

「#bg」に{
  "position": "absolute",
  "z-index": "0",
}をDOMスタイル一括設定。

#---canvasとマウス押下関数の設置----------
●玉作成
  HTML=「」
  タイマー関数
  (玉数)
   C=回数-1。
  
   #--各玉の設定---
   玉x[C]=画面w-玉wの乱数。玉y[C]=画面h-玉hの乱数。玉色[C]=(16777215の乱数)のHEXを6でゼロ埋め。
   玉タイマー[C]=オフ。
   dx[C]=(最大移動速度*2の乱数)-最大移動速度。dy[C]=(最大移動速度*2の乱数)-最大移動速度。
   もし、dx[C]=0ならば、dx[C]=3。もし、dy[C]=0ならば、dy[C]=3。
  
   #--玉の個数分canvas作成---
   HTMLHTMLに「<canvas id="ball{C}" width={玉w} height={玉h}></canvas>」を一行追加。
  
   #--玉の個数分関数を作る---
   タイマー関数タイマー関数に「
●玉移動{C}
 玉タイマー[{C}]=オン。
 0.01秒タイマー開始した時には(タイマー{C})
  もし、玉タイマー[{C}]=オフならばタイマー{C}のタイマー停止。
  もし、(玉x[{C}]+dx[{C}]<0)または(玉x[{C}]+dx[{C}]+玉w>画面w)ならば、dx[{C}]=dx[{C}]*-1。
  もし、(玉y[{C}]+dy[{C}]<0)または(玉y[{C}]+dy[{C}]+玉h>画面h)ならば、dy[{C}]=dy[{C}]*-1。
  玉x[{C}]=玉x[{C}]+dx[{C}]。玉y[{C}]=玉y[{C}]+dy[{C}]。
  {カッコ}#ball{C}{カッコ閉じ}の{カッコ}left{カッコ閉じ}に{カッコ}{波カッコ}玉x[{C}]{波カッコ閉じ}px{カッコ閉じ}をDOMスタイル設定。
  {カッコ}#ball{C}{カッコ閉じ}の{カッコ}top{カッコ閉じ}に{カッコ}{波カッコ}玉y[{C}]{波カッコ閉じ}px{カッコ閉じ}をDOMスタイル設定。
 ここまで。
ここまで。
」を追加。
  ここまで。
  「#ball」にHTMLHTML設定。
  タイマー関数をナデシコ。
  
  #---玉の描画とCSS設定----------
  (玉数)
   C=回数-1。
   「#ball{C}」へ描画開始。「#{玉色[C]}」に線色設定。「#{玉色[C]}」に塗色設定。[10,10]へ9の描画。
  
   「#ball{C}」に{
    "position": "absolute",
    "左": "{玉x[C]}px",
    "top": "{玉y[C]}px",
    "z-index": "1"
    }をDOMスタイル一括設定。
  ここまで。
  C=0。
ここまで。
#-----------------------------------------------
●玉移動
 A=。
 (玉数)
  A=Aに「玉移動{回数-1}。」を一行追加。
 ここまで
 Aをナデシコ。
ここまで。
#------------------------------------------------------------------

http://snowdrops.starfree.jp/wnako3_test/15_timer_2.html

 「ナデシコする」頼みです(^▽^;

 いっこいっこ個別に動かしたり止めたりしたい場合、ワタシの知恵では他に手が思いつかん;;;

ゲスト



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