Hatena::Groupnadesiko

雪乃☆雫のなでしこ日和

2019-03-22

テキスト読上げ(青空文庫形式対応)

| 12:49

 なんだかんだで、読上げ自体はわりとすぐに出来るようになりました。

 [# ]で囲まれた註を無視して、前に書いたとうりに漢字部分を読まずにルビの方を読むようにしただけなので。

#------------------------------------------------------------------
# テキスト読上げ
#------------------------------------------------------------------
「Google 日本語」に話者設定。   //ダミー

#---宣言----------
テキスト=。読上中フラグ=オフ行数=-1。細区切=-1。
区切記号=「{CRLF},{CR},{LF}」を「,」で区切る。
息継記号=「 , ,?,!,―,…,{カッコ}」を「,」で区切る。
註記号=「-------------------------------------------------------,-------------------------------------------------------
※[#,]{改行}[#,]」をCSV取得。

#---HTMLの設置----------
HTML=「<div id="main"></div>」
「#nako3_div_1」にHTMLを、DOM_HTML設定。

#---GUI作成----------
「#main」にDOM親要素設定。
のテキストエリア作成し、テキストエリアに代入改行作成。
「読み上げ」のボタン作成し、読上ボタン代入。
「先頭」のボタン作成し、先頭ボタン代入。
「クリア」のボタン作成し、クリアボタン代入改行作成。
「{カッコ}、{カッコ閉じ}でも区切って読む(Google 日本語で止まる場合)」のチェックボックス作成し、細区切チェック代入改行作成。

#---CSS設定----------
読上ボタンの「margin」に「2px 5px」をDOMスタイル設定。
先頭ボタンの「margin」に「2px 5px 2px 50px」をDOMスタイル設定。
先頭ボタンの「disabled」に「disabled」をDOM属性設定。
クリアボタンの「margin」に「2px 5px」をDOMスタイル設定。
細区切チェックの「margin」に「10px」をDOMスタイル設定。
テキストエリアの「rows」に「20」をDOM属性設定。
テキストエリアの「placeholder」に「ここに読上げたいテキストを入力して下さい」をDOM属性設定。

テキストエリアに{
  "幅": "100%",
  "margin": "2px 5px",
  "背景色":"#ffffff",
  "色": "#000000",
}をDOMスタイル一括設定。

#---イベント----------
クリアボタンをクリックした時には、
  「テキストを全てクリアします。{改行}読上げ中の場合は、読み上げも中断します」で二択。
  もしそれはいならば、
    細区切チェックの「disabled」にDOM属性設定。
    テキストエリアにをテキスト設定。
    テキスト=。読上げ中フラグ=オフ行数=-1。
  ここまで。
ここまで。

先頭ボタンをクリックした時には
  「先頭に戻って読み上げを行います。」で二択。
  もしそれはいならば、
    行数=-1。読上開始。
  ここまで。
ここまで。

読上ボタンをクリックした時には
 「Google 日本語」に話者設定。   //Google Chromeでは、Google 日本語で読む。
 もし、読上中フラグ=オフならば、
  読上開始。
 違えばもし、読上中フラグ=オンならば、
  先頭ボタンの「disabled」にDOM属性設定。
  読上中断。
 ここまで。
ここまで。

細区切チェックの「onchange」に「チェック関数」をDOMイベント設定。

●チェック関数
  細区切=細区切*-1。
ここまで。
#------------------------------------------------------------------
●読上テキスト作成
 註記号を反復
   対象[0]から対象[1]を註削除。
 ここまで。
 ルビ反映。
 テキスト=テキストの「》」を置換。
 テキスト=テキストの「|」を置換。
 テキスト=テキストのカッコ閉じを「。」に置換。
 テキスト=テキストの「。」を「。{改行}」に置換。
 もし、細区切=オンならば、
   テキスト=テキストの「、」を「、{改行}」に置換。
 ここまで。
 息継記号を反復
   テキスト=テキストの対象を「、」に置換。
 ここまで。
 区切記号を反復
   テキスト=テキストを対象区切る。
 ここまで。
ここまで。
#------------------------------------------------------------------
●註削除(AからBを)
 検索開始位置=1。
 削除始=テキストで検索開始位置からAを文字検索改。
 もし、削除始=0ならば戻る。
 削除終=テキストで削除始+(Aの文字数)からBを文字検索改。
 もし、削除終=0ならば戻る。
 削除数=削除終-削除始+(Bの文字数)。
 テキスト=テキストの削除始から削除数を文字削除。
 検索開始位置=検索開始位置+削除始
 AからBを註削除。
ここまで。

●ルビ反映
 検索開始位置=1。
 ルビ記号=テキストで検索開始位置から「《」を文字検索改。
 もし、ルビ記号=0ならば戻る。
 ルビ始=ルビ記号-1。
 オン
   仮=テキストでルビ始から1を文字抜出。
   もし、(仮を漢字か判定)=はいならば、
     ルビ始=ルビ始-1。
   違えば、
     ルビ始=ルビ始+1。抜ける。
   ここまで。
 ここまで。
 削除数=ルビ記号-ルビ始+1。
 テキスト=テキストのルビ始から削除数を文字削除。
 検索開始位置=検索開始位置+ルビ記号+1。
 ルビ反映。
ここまで。
#------------------------------------------------------------------
●文字検索改(SでAからBを)
 検索対象=(Sの文字数)+1-A。
 仮=SのAから検索対象を文字抜出。
 数=(仮でBを文字検索)
 もし、数=0ならば、数で戻る。
 違えば、数+A-1で戻る
ここまで。

●漢字か判定(Sが|Sの|Sを)
  Sを「^[\u3005\u3007\u4E00-\u9FFF\uF900-\uFAFF\u3400-\u4DFF]|[\uD840-\uD87F][\uDC00-\uDFFF]」で正規表現マッチ。
  もしそれがnullならばいいえ戻る。
  違えばはい戻るここまで。
#------------------------------------------------------------------
●テキスト読上げ
 もし、読上中フラグ=オンならば、
  行数行数+1。
  もし行数≧(テキストの要素数ならば、
    細区切チェックの「disabled」にDOM属性設定。
    行数=-1。読上中断。戻る。
  ここまで。
  テキスト[行数]を話し終わった時には
    テキスト読上げ。
  ここまで。
 ここまで。
ここまで。
#------------------------------------------------------------------
●読上開始
  テキスト=テキストエリアからテキスト取得。
  もし、テキスト=ならば、
    「テキストエリアに読み上げたい文章を入力して、読み上げボタンを押して下さい。」と言う。
  違えば、
    読上テキスト作成。
    読上ボタンに「一時停止」をテキスト設定。
    読上中フラグ=オン。
    テキストエリアの「disabled」に「disabled」をDOM属性設定。
    先頭ボタンの「disabled」に「disabled」をDOM属性設定。
    クリアボタンの「disabled」に「disabled」をDOM属性設定。
    細区切チェックの「disabled」に「disabled」をDOM属性設定。
    テキスト読上げ。
  ここまで。
ここまで。

●読上中断
  読上ボタンに「読み上げ」をテキスト設定。
  読上中フラグ=オフ。
  テキストエリアの「disabled」にDOM属性設定。
  クリアボタンの「disabled」にDOM属性設定。
ここまで。
#------------------------------------------------------------------

http://snowdrops.starfree.jp/wnako3_test/16_yomiage.html

 がっ・・・

 ぐる子さん(Google日本語)の方が、はるかさんより読み違いが少なくて、多少聞きやすい感じなので、変えれるようにすっかなと思ったんですけど、どうも「話者設定」や、「話者一覧取得」の命令が、初は通らない(?)感じなのです。

話者一覧取得して反復
  F名前=対象["name"]
  F言語=対象["lang"]
  「{F名前}: {F言語}」を表示ここまで

 実行ボタンを押しても出ないんです。

 で、あれ? と思ってもう一押したらちゃんと表示され、の後はタブではずっと動きます。

 だもんで、前に話者変更などを試していた時には気付いてなかったけど、新しく開いた毎目は動かないの。謎すぎ。


 エディタの場合は、実行ボタンを二押せば良いだけなんだけど、HTMLに埋め込んだらそうもいかないですよね。

 一ダミーで話者設定し、ウェイトを入れた後、再設定すると通るので、最初にダミーを設定した後イベントの中で再設定で、出来たことは出来たのですが、無理矢理すぎ;



 あとは、なでしこは関係ないと思われることだけど、chromeさんとは、どうも相性が良くないみたいなんですよねぇ・・・


 ぐる子さんは長文が読めないらしくて、読上げ途中でいきなり止まって、再読み込みではダメで、ブラウザ自体の再起動必要かも知れない感じになる~(´д`)

 長文を読ますような前提じゃないってコトかも知れないし、一度話し始めたら、強制的に中断させるような命令もないのだから、もあんまり長文を一気に話させるのはどうかと思われるところですけど、100文字以下くらいでも余裕で止まることがあるから、改行や「。」ごと区切ったくらいじゃ駄目なことがあって、困ったもんだ。

 これは、chromeがと言うより、Google日本語のことで、chrome+はるかさんなら問題はないFirefoxではもちろん問題が無い。

 読上げエンジンの方の仕様なのかと思われるけど、「、」で区切ると、ちょっと息切れ感が・・・;


 それから、読上げようのテキストが大きいと、「話す」には一行ずつ送ってるにもかかわらず、しばしば止まるんだよね~。大きいったって30kbくらいなんですが。

 いや、のせいかどうかすらもよく分からんけど、元のテキストを半分とかにしたら、ふつーに読めたのです。

 でも、短編の一編くらいは、まるっと最初から最後まで読んで欲しいよね~。むむむ~。

 これは、chrome+はるかさんでも発生し、前のとは違って、一時停止して、もっかい読上げボタン押すと、次を読んだりもする。これFirefoxでは大丈夫。

 場当たり的には出来るようにできそうな気もするけど、原因が確定していない上にワタシが普段メインで使ってるのはFirefoxだから、やる気出ないなぁ;

 なにしろ、どれもこれFirefoxでは無問題なのですよ(?_?)

 お試しとゆうことでこんくらいにしておくか、まちっと研究してみるか、それが問題だw

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

2019-03-17

「文字検索」と「漢字か判定」

| 09:50

 マイナビ連載42目は、「再帰処理」についてでした。

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

 いや~、ワタシは別に、再帰処理につまずいた気はしないですけどね~。

 だって、それ以前に関数がわかんなかったし(爆)

 なでしこのお陰で急に賢くなって以降は、深く考えずに、ふつーに、それっぽいことをしていたように思う。



 それはさておき、「文字検索」です。

 そうは書いてないけど、v1非互換でした。

 なでしこ1の文字検索は、「文字列SでA文字目からBを検索する」とゆう命令でした。

 したがって、先頭の1文字目から検索を始めて、見つかったら「それ+1」文字目から次を検索・・・とゆう手順で、文書内にある全てのBを検索出来ました。(再帰って、こうゆうコトだよね(?))

#なでしこ1
C=1。新聞紙。
●新聞紙
 「しんぶんし」でCから「ん」を文字検索。  //「文字検索」
 もしそれが0ならば、 //ヒットしなかった場合は、
   戻る。       //関数から戻ることを忘れず!
 違えば、
   それ表示。
   C=それ+1。
   新聞紙。      //再帰

 まあ、なんかこんなような。

 ところが!

 なでしこ3の文字検索は、「文字列Sで文字列Aが何文字目あるか調べて返す」とゆうことになっており、検索開始位置の指定が出来ないんですよー。

 これでは、「何文字目」命令と、同じことっぽい。

 しくしくしくしく。どーすりゃいいんだorz


 ・・・・・・とりあえず、こんな感じか?

#なでしこ3
C=1。新聞紙。
●新聞紙
 「しんぶんし」でCから「ん」を文字検索改。
 もしそれが0ならば、
   戻る。
 違えば、
   文字位置=それ
   文字位置を表示。 //「それ表示」だと、v3の場合の後の「それ」が「undefined」になっちゃう
   C=文字位置+1。
   新聞紙。
 ここまで。
ここまで。

#-----------------------------------------------
#文字列SでA文字目からBを検索する
#なでしこ1の「文字検索」互換っぽいの
●文字検索改(SでAからBを)
 検索対象=(Sの文字数)-A+1。 //Aの位置も検索対象に含める
 仮=SのAから検索対象を文字抜出。
 数=(仮でBを文字検索)
 もし、数=0ならば、数で戻る。
 違えば、数+A-1で戻る
ここまで。
#-----------------------------------------------

 タブン、合ってると思うんだけど・・・



 さてさて、次にやりたいことは、指定した文字が漢字かどうかを調べることなんだけど、「文字種類」の中に、漢字か判定は無いので(1にも無い)自前でなんとかしないない

 ユニコードのCJK統合漢字の中に、ふつーに使うほとんどの漢字が含まれているのですが、ウィキペディアさまによると、Unicode 11.0では次のようになってるそうです。

U+4E00~U+9FEA   CJK Unified Ideographs(CJK統合漢字)
U+F900~U+FAFF   CJK Compatibility Ideographs(CJK互換漢字)
U+3400~U+4DFF   CJK Unified Ideographs Extension A(CJK統合漢字拡張A)
U+20000~U+2A6FF  CJK Unified Ideographs Extension B(CJK統合漢字拡張B)
U+2A700~U+2B734  CJK Unified Ideographs Extension C(CJK統合漢字拡張C)
U+2B740~U+2B81F  CJK Unified Ideographs Extension D(CJK統合漢字拡張D)
U+2B820~U+2CEAF  CJK Unified Ideographs Extension E(CJK統合漢字拡張E)
U+2CEB0~U+2EBE0  CJK Unified Ideographs Extension F(CJK統合漢字拡張F)

https://ja.wikipedia.org/wiki/CJK%E7%B5%B1%E5%90%88%E6%BC%A2%E5%AD%97


 とゆうわけで、正規表現で、

「^[\u4E00-\u9FEA\uF900-\uFAFF\u3400-\u4DFF\u20000-\u2EBE0]」で正規表現マッチ

で行けるかと思ったら、行かなかった。

 5桁のユニコードは、なんでもサロゲートペアなるものの対応が必要ラシイ。

https://ja.wikipedia.org/wiki/Unicode#.E3.82.B5.E3.83.AD.E3.82.B2.E3.83.BC.E3.83.88.E3.83.9A.E3.82.A2

 よくわかんないケド、このとうりに計算してエンコードすればいいのだろう。

 あと、ここによると第2面のU+20000~U+2FFFFは漢字専用領域となっているようなので、少なくともこまでは将来的に拡張される可能性があると考えられるので、

[\uD840-\uD87F][\uDC00-\uDFFF]

 こんな感じ?

 CJK統合漢字も、ATOKさまの文字パレットを見るとU+9FFFまで範囲になっているから、キリよくこまで含めとく?

 あと、繰り返しの「々」と漢数字の「〇」も含めておきたい。

U+3005  々(CJKの記号及び句読点:繰返し記号)
U+3007  〇(CJKの記号及び句読点:漢数字ゼロ)

 「〇」は、丸「○」とは別ですよ~。毛筆書体などを適用すると、違いが顕著なのでご注意です。

 でっ、こうなった。

#-----------------------------------------------
#文字列Sの1文字目が漢字か判定
●漢字か判定(Sが|Sの|Sを)
  Sを「^[\u3005\u3007\u4E00-\u9FFF\uF900-\uFAFF\u3400-\u4DFF]|[\uD840-\uD87F][\uDC00-\uDFFF]」で正規表現マッチ。
  もしそれがnullならばいいえ戻る。
  違えばはい戻るここまで。
#-----------------------------------------------
#以下はテスト
「○」が漢字か判定して表示。   //0 丸
「〇」が漢字か判定して表示。   //1 漢数字のゼロ
「一」が漢字か判定して表示。   //1 CJK統合漢字
「1」が漢字か判定して表示。   //0
「豈」が漢字か判定して表示。   //1 CJK互換漢字
「㐀」が漢字か判定して表示。   //1 CJK統合漢字拡張A
「𠀀」が漢字か判定して表示。   //1 CJK統合漢字拡張B

 しかし、頑張って対応させたものの、果たして拡張部分は必要だったのか;

 見たこともないヤツばっかだ;;;

 して、扱おうとしてるテキストは青文庫のなので、文字コードはJIS X 0208 の範囲に限定されていて、それ以外のは註になってるんだよね。

 ウィキペディアさまによると、「IS X 0208のすべての漢字が、UCS/Unicodeの基本多言語面のいずれかの符号位置に対応する」・・・とゆうことらしいから、明らかにいらなかった気が(´・ω・`)

https://ja.wikipedia.org/wiki/JIS_X_0208#ISO/IEC_10646%E3%81%8A%E3%82%88%E3%81%B3Unicode

 まあ、他のことでも使うかもしないし、足りないよりかは網羅している方がいいとゆうことにしようそうしよう。



 んなこんなでやろうとしていたことは、折角なでしこさんがしゃべるようになったので、青文庫でも読み上げさせてみっかなとゆうことで、読み上げにルビを反映させることでした。

 何しろ、のまま読ますと「兎《と》に角《かく》」を「うさぎきごうときごうにかくきごうかくきごう」と読んじゃうんですからねヽ(;´Д`)ノ

 まず「《」を検索して、漢字か判定でルビの付いてる範囲を調べ、それとルビの記号「《》」を消せば(置換)ルビ部分だけが残るって寸法です。

 しかし・・・もはるかさんの読み上げ精度がひどい(「沢山」を「さわやま」と読んじゃうとか!(´д`;)上に、最近Fire7を手に入れたところ、標準でみずきさんがKindleを読み上げてくれるんで、もうなんだかな~;

 まあ、みずきさんもんなに上手に読んでくれるわけじゃないですけどねw

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

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