タマのけいさんドロップス（タマドロ）

小学校低学年向けの計算練習 WEB アプリです。たしざん・ひきざん・かけざん・百マスたしざんを解いて、ドロップを集めます。

ローカルで動かす

画像などを /img/... のように「サイトのいちばん上から」の場所で読み込んでいるので、ファイルを直接開くのではなく、かんたんなサーバーで開きます。

python3 -m http.server 8765
# ブラウザで http://localhost:8765/ を開く

画面のしくみ

index.html 1枚のアプリです。URL の # のうしろで画面が切り替わります（js/app.js）。

URL	画面
#/	さいしょの画面
#/add #/sub #/multi #/hundredgrid	そのモードのレベル選択 → 問題
#/records #/records/add など	タマのきろく（ドロップびん・カレンダー・タイムのうつりかわり・にがてマップ）
#/music	おんがくのへや（ためしているあいだは /music on のときだけ。下の「おんがくのへや」）
#/keys	けんばんの レベル選択 → レッスン（/music on のときだけ）
#/black	くろいけんばんの レベル選択 → レッスン（/music on で、けんばんの Lv6 を クリアしたあと）
#/notes	おんぷよみの レベル選択 → レッスン（/music on のときだけ）
#/rhythm	リズムの レベル選択 → レッスン（/music on のときだけ）
#/piano	じゆうにひこう（/music on のときだけ）

以前の URL（tamaadddrops.html など）のページはなくなりました（開くと 404 になります）。

おんがくのへや（ためしているところ）

• 設定（歯車）の入力欄に /music on と入れると、さいしょの画面に「おんがくのへや」のボタンが出ます（/music off で かくれます）。入力欄は、さいしょの画面にも 計算の画面にもあります。/rescue /delete /master on は、計算・けんばんの画面でだけ使えます。
• へやの中は「けんばん」「くろいけんばん」「じゆうにひこう」「おんぷよみ」「リズム」。右上の「おと あり／なし」は、テンキーの音などもふくめて ぜんぶの音に効きます。
• 音は js/sound.js でつくります（ピアノふうの音を その場でつくるので、音のファイルは いりません）。けんばんは さわった しゅんかん（pointerdown）に鳴り、何本の指でも おせます。おんがくの画面に いるあいだは、iPhone のマナーモードでも 音が出るようにしています（navigator.audioSession。使えないブラウザでは いままでどおり）。
• 音のデータ（js/notes.js）は、「どの けんばんか（MIDI の番号。60 が まんなかのド）」と「どんな名前か（ド〜シ と ♯♭）」を べつに持ちます。黒いけんばんには 名前が2つ（ド♯／レ♭）あります。
• おんがくのへやの 作業の 引継ぎ（きめた こと・つぎに やること）は docs/handoff-music.md に あります。

けんばんの レベル（js/modes/keys.js）

レベル	内容	けんばんの名前
おとあそび	すきな けんばんを 10かい鳴らす（ドロップは いつも水色。黒いけんばんは「ド♯／レ♭」のように 2つの名前の ふきだし）	あり
Lv1 ドレミ	ド・レ・ミ を 4かいずつ（12もん）	あり
Lv2 ド〜ソ	ド〜ソ を 3かいずつ（15もん）	あり
Lv3 まほう	はじめに ド と ソ の名前が まほうで きえる	一部
Lv4 ド〜ソ	ド〜ソ	なし
Lv5 ファ〜ド	ファ〜たかいド	あり
Lv6 ド〜ド	ド〜たかいド を 2かいずつ（16もん）	なし
Lv7 メロディ	3〜4おんの メロディを 左から じゅんばんに（8もん）。和音の じゅんばん C → F → G（G7）→ C で出し、C にもどるときは ドで おわる	なし
Lvオニ	Lv1〜7 を ぜんぶ まぜる（1おん12もん＋メロディ4もん）。見せる けんばんの はしが 毎回かわる（ファ〜ミ・ミ〜ミ・ファ〜ファ・シ〜シ。どれも 黒いけんばん 10こ）	なし

• けんばんは、左はしが ドに ならないように、すこし よぶんに見せます（黒いけんばんを 目じるしに ドを さがす力を つけるため）。 はしでは、黒いけんばんの かたまり（3こ・2こ）を かけさせません（3・2・3・2 と くりかえして見える）。かけると、3この かたまりが 2こに見えて、そこも ドに見えてしまうからです。Lv1〜4 は ファ〜シ、そのほかは ファ〜ミ です。そのレベルで使う けんばんは あかるく、そのほかは うすく見せます。うすい けんばんも 押せば鳴りますが、まちがいには なりません。
• まちがえた けんばんも 鳴って、「ミだよ」のように 何を おしたかを ふきだしで見せます。正解すると、その音を ふくむ和音が 小さく ポロロンと鳴ります（ド・ミ・ソ → C、ファ・ラ → F、レ・シ → G）。
• 解放は、おとあそびの ドロップ1こで Lv1、オニは Lv7 の ドロップ5こ、ほかは 3こ。まちがいの上限（5かい）・5もんごとの金のドロップ・ノーミスで金のごほうび・まちがえた問題を さいごにもういちど は、計算と同じです。
• 1もんごとの きろく（tamadoro.stats.v1 の keys。キーは「ド」「たかいド」「ドレミ」など）と、1回ごとの きろく（tamadoro.log.v1）を のこします。ドロップは びん・カレンダーに入りますが、「タマのきろく」の けんばんの タブ・「にがてちょうせん」は まだありません。
• 正解ごとの ドロップは、上の ばらばらな場所から おちてきて、けんばんの上に 左から ならびます（大きさは 32px。計算の 50px より 小さく、めだちすぎないように。KEYS_PILE_SIZE）。画面の はしまで ならんだら、2だんめは 1だんめの ドロップと ドロップの あいだに はまって つもります（keysPileSlot）。つもりつづけると 問題も 見えなくなりますが、それで かまいません。つもった ドロップは 指で うごかせます。レベル選択へ もどると とびちります。
• クリア・ざんねんの カードは、画面の 上のほうに 出します（けんばんの上に つもった ドロップと かさならないように。カードは ドロップより手前）。

くろいけんばん（js/modes/black.js。問題の進め方は けんばんと同じ js/engines/keys.js）

• 「♯（シャープ）は すぐ みぎどなり、♭（フラット）は すぐ ひだりどなり」の きまり 1つで さがします（「♯は 黒いけんばん」とは 教えない）。
• 黒いけんばんで 正解すると、聞かれたのが どちらの名前でも、その けんばんの上に 2つの名前（「ド♯／レ♭」）を出します。くりかえすうちに 2つの名前が むすびつきます。
• けんばんの Lv6（ド〜ド・もじなし）で ドロップを 1こでも もらうと ひらきます（keys_coins_7）。それまでは、おんがくのへやの ボタンに カギがかかり、「しろい けんばんの Lv6 を クリアすると ひらくよ」と出ます。ためすときは、けんばんの画面で /rescue → Lv7 まで ひらくと、ここも ひらきます。

レベル	内容	ガイド
Lv1 ♯	ド♯・レ♯・ファ♯・ソ♯・ラ♯ を 3かいずつ（15もん）	もとの音を 光らせて「→」・白いけんばんの名前
Lv2 ♭	レ♭・ミ♭・ソ♭・ラ♭・シ♭ を 3かいずつ（15もん）	もとの音を 光らせて「←」・白いけんばんの名前
Lv3 ♯と♭	まぜて 16もん	なし
Lv4 2つの名前	「ド♯ ＝ ？♭」の ？を、ド♭〜シ♭ の ボタンで こたえる（10もん）。けんばんは 鳴るだけ。正解すると その けんばんが 鳴って「ド♯ ＝ レ♭」	なし
Lvオニ	♯♭ 8もん・2つの名前 4もん・ひっかけ 4もん。ひっかけは ミ♯（＝ファ）・シ♯（＝たかいド）・ファ♭（＝ミ）・ド♭（＝ひくいシ）で、正解すると「ミ♯は ファ！」	なし

• 1もんごとの きろくの キーは「ド♯」「レ♭」「ド♯＝レ♭」など（同じ けんばんでも 名前ごとに べつ）。
• 正解の 和音は、その 黒いけんばんの音が いちばん下の 和音（ド♯ → D♭ など）。

おんぷよみ（js/modes/notes.js。五線の絵は js/staff.js、問題の進め方は けんばんと同じ js/engines/keys.js）

• ト音記号の 五線に 出た 音符を 読んで、その けんばんを おします（display: 'staff' で、名前の カードの かわりに 五線）。
• 五線・ト音記号・音符は SVG で 描いています（TamaStaff。音符は ぜんぶ 4ぶおんぷ。シより上は ぼうが 下むき。ド・上のラ には みじかい せん＝加線）。
• はじめは けんばんに 名前を書いておき（読むことに 集中）、Lv5 からは 名前なしで「五線の場所 → けんばん」に します。
• メロディは 1つの 五線に ならび、いま 読む 音符が ピンク、読みおわった 音符が みどりに なります。正しく 読んだ 音符は キラリンと 光ります。
• さいしょの「しくみ」は、せつめいしながら すすみます（8もん。まちがえても しっぱいに ならず、どこを 見るかを おしえます。ドロップは いつも その レベルの 色）。けんばんを おすと、その音の 名前を その高さで うたいます（js/sing.js の「どー・れー・みー」）。
  1. せんは 5ほん：五線の せんを、いちばん下から じゅんばんに タッチして「1ぽんめ・2ほんめ・3ぼんめ・4ほんめ・5ほんめ」と かぞえます（はじめは 1ぽんめが やさしく 点滅して「おしてね」。かぞえた せんは 青く 光って よこに「1ぽんめ」など。とばすと「1ぽんめは いちばん下の せんだよ」）。
  2. ドの ばしょ：ドは、五線の 下に みじかい せん（加線）を 1本 たした ところ（みじかい せんが 光り、ドの けんばんに ポワンポワン 光る わっか）。
  3. のぼる：ド→たかいド。音符が 1つずつ あらわれ、下に「せん」「あいだ」の ふだが 出ます（ド・ミ・ソ・シ は せん、レ・ファ・ラ・たかいド は あいだ。レは ドの みじかい せんと 1ばん下の せんの あいだ）。正しい けんばんを おすと、その 音符が キラリンと 光り（★）、すこし あとに つぎの 音符が あらわれます（おした音が つぎの 音符だと まちがえないように。キラリンの あいだに おした けんばんは 鳴るだけ）。
  4. くだる：たかいド→ド。
  5. れんしゅう：ドレミファソラシド・ドシラソファミレド と、とちゅうからの のぼり・くだり（4〜5おん）を つづけて 読みます。
• しくみで ドロップを 1こ もらうと Lv1 が ひらきます（オニは 5こ、ほかは 3こ）。
• おだんご（Lv1〜Lv4・Lv6）：和音の 3つの 音を、1本の くしに さした おだんごで 見せます。おだんごの 色は 音の 色（けんばんの 名前の 色を あわくした もの。ド 赤・レ オレンジ・ミ 黄・ファ 緑・ソ 青・ラ 藍・シ 紫）なので、ドミソ と レファラ は ちがう 色、シは 紫、たかいドは ドと 同じ 色です。Lv1 は せんに ささった おだんご（ド・ミ・ソ）、Lv2 は せんの あいだの おだんご（レ・ファ・ラ）。
  • あたらしい おだんごが 出る レベルは、さいしょに お手本：おだんごの よこに 名前が 出て、おす けんばんに ポワンポワン 光る わっか（おすと つぎの けんばんへ）。
  • あとは「1おん」と「おだんご」を まぜて 出します（Lv1・Lv2 は 3つの 音を 3かいずつ ＋ おだんご 3かい）。おだんごは 下から じゅんばんに おし（いま おす おだんごに ピンクの わっか）、そろうと その 和音（C・Dm）が 鳴ります。1おんの 問題で 正解したときの 和音も、その音の おだんごの 和音です（Lv1 は C、Lv2 は Dm だけ）。Lv4 の 1おんは、これまでと 同じ ひびき（ド・ミ・ソ と たかいド は C、レ・ファ・ラ は Dm、シは ミ・ソ・シ＝Em）で、4つだまの 和音（Cmaj7・Dm7）は おだんごが そろった ときだけ 鳴ります。
  • けんばんを おすと 名前を うたいます（しくみと 同じ）。
• レベルの ならびを かえたので、まえの おんぷよみの ドロップ・ベストタイム・きろくは、はじめて 開いたときに 1回だけ 消します（dataVersion。tamadoro.notes.dataVersion に 版を おぼえる）。

レベル	内容	けんばんの名前
しくみ	せんは 5ほん・ドの ばしょ・のぼる・くだる・つづけて 読む（8もん）	あり
Lv1 せんの おだんご	ド・ミ・ソ（13もん：お手本 ＋ 1おん 9もん ＋ おだんご 3もん。ヒント：せんに ささった おだんご）	あり
Lv2 あいだの おだんご	レ・ファ・ラ（13もん。ヒント：せんの あいだの おだんご。レは ドの せんと 1ぽんめの あいだ）	あり
Lv3 おだんご まぜ	ド・ミ・ソ と レ・ファ・ラ を まぜる（16もん：1おん 12 ＋ 2しゅるいの おだんご 4。お手本なし）	あり
Lv4 おだんごの つづき	せんの おだんごに シ、あいだの おだんごに たかいド を たした 4つだまの おだんご（和音は Cmaj7・Dm7）で ド〜ド（18もん：お手本 2 ＋ 1おん 12（シ・たかいドは 多め）＋ おだんご 4）	あり
Lv5 ド〜ド	ド〜たかいド（16もん。右上の「けんばんの よみかた」スイッチを ON に すると けんばんに 名前が 出る。はじめは いつも OFF）	なし（スイッチで あり）
Lv6 うえの おと	けんばんは シ〜たかいシ を 見せて、あかるい ところ（シ〜たかいソ）は 右がわ（左に まんなかの ドの あたりが くらく 見え、たかい音だと わかる）。うえの おだんご：せんに シ・たかいレ・たかいファ（G7）、あいだに たかいド・たかいミ・たかいソ（C。たかいソは 5ほんめの すぐ上）（18もん：お手本 2 ＋ 1おん 12 ＋ おだんご 4）	あり
Lv7 メロディ	3〜4おんの がくふ（8もん）。けんばんの Lv7 より とびはねる メロディ（どの メロディにも 3度より 大きい とび。4度・5度・6度・オクターブも）。和音は C → F → G → C の くりかえしで、C の つぎの C（同じ 和音が つづく ところ）は Am か C7 に、G の ところは ときどき Fm（F → Fm → C の 借用和音。メロディは ファ と ド だけ）。メロディは 白いけんばんだけ	なし
Lv8 きょくふう	曲調を 1つ えらんで（「ポップス風（おうどう しんこう）」など）、その 8つの 和音の フレーズを 1つずつ れんしゅう → さいごに ぜんぶの がくふで とおし えんそう（下の「きょくふう メロディ」）	なし（スイッチで あり）
Lvオニ	ド〜たかいソ の 1おん12もん＋メロディ4もん（メロディは Lv7 と 同じ とびはねる メロディ。けんばんの オニと ちがって、けんばんの場所は かわらない）	なし

きょくふう メロディ（Lv8。曲調の 表は js/songs.js）

• 1曲は 8つの 和音。1つの 和音に 3〜4おんの メロディ（1フレーズ）。メロディは その 和音の 音（白いけんばん。ド〜たかいソ）だけで、どの フレーズにも 3度より 大きい とびが あり、まえの フレーズの おわりに ちかい 音から はじまります。さいごは ド（マイナーの 曲は ラ）で おわります。黒いけんばんの 音（C7 の シ♭ など）は 伴奏の 和音の 中だけです。
• 曲調は 13の 系統・29（クラシック・ポップス・マイナー・サスフォー・ジャズ・モダン／シティポップ・せつない（借用和音）・きょうかい・ブルース・ロック・ボサノバ・ゲーム・どうよう）。となりあう 和音は かならず ちがいます。
• ノブ：曲調ごとの weight と、系統ごとの weight（FAMILIES）。0 で 出なくなり、2 で 2ばい 出やすく なります（ふえすぎたら ここで しぼる）。
• /song：設定の 入力欄に /song 曲調の id か 系統 と 入れて Enter で、その 曲調・系統だけに なります（ためすとき用。例 /song jazz・/song komuro）。/song off で もとに もどります（tamadoro.notes.song に おぼえる）。
• すすみかた：
  1. れんしゅう（8もん）：フレーズを 1つずつ（五線の 上に コード名、下に「ポップス風（おうどう しんこう） 1/8ばんめの フレーズ」）。正解すると その 和音。まちがえた フレーズは さいごに もういちど。
  2. とおし えんそう：8フレーズを ぜんぶ ならべた がくふ（1だんに 4フレーズ、せまい 画面は 2フレーズ。フレーズの 上に コード名、あいだに 小節線、おわりは 2本の せん）。フレーズの はじめの 音を おすと その 和音が ついてきます。じぶんの ペースで よく、まちがえても とまりません（すすまないだけ。しっぱいに ならない）。いまの だんが 見えるように うごきます。
  3. ひきおわったら：ジャーン（おわりの 和音と かけあがる 音）、「えんそう おわり！」。「じぶんの えんそうを きく」で、ひいた タイミングの まま（ながく とまった ところは 1.2秒に つめて）伴奏つきで きけます（音符が キラリン）。「ドロップを もらう」で クリア。
• Lv8 にも「けんばんの よみかた」スイッチが あります。
• Lv8 を オニの まえに 入れたので、まえの 版（dataVersion 2）の オニの ドロップ・タイム・きろくは、レベル9 から 10 へ うつします（消しません。upgradeData）。

リズム（js/modes/rhythm.js・js/engines/rhythm.js）

• 右から 流れてくる がくふが、ピンクの せんに 来たときに たたきます。画面の どこを たたいても よく（ボタンの上は のぞく）、パソコンでは スペースキーなどでも たたけます。たたくと すぐ ポンと鳴ります。下の たいこは めじるしです。
• ことばは 学校と同じ「タン（4ぶおんぷ）・タタ（8ぶおんぷ 2こ）・ウン（4ぶきゅうふ）・ターアー（2ぶおんぷ）」。音符の下に 書いてあります。がくふは 1本線に 音符・やすみを SVG で 描いています。
• はじめに「1・2・3・4」（1しょうせつ）の カウントがあり、メトロノームが ずっと鳴ります（1はくめは 高い音）。「▶ おてほん」で たいこの おてほんを 聞いてから「🥁 スタート」。
• 拍は 音の時計（AudioContext）で きめます。メトロノームと おてほんの たいこは、はじめに まとめて 予約して 鳴らします（setTimeout では ずれるので）。たたいた 時刻は「そのとき スピーカーから 出ていた 音」の 時刻に なおして くらべます（TamaSound.heardTime。getOutputTimestamp を つかう）。
• はんてい：ぴったり ±0.08びょう・いいね ±0.18びょう（オニは ±0.06・±0.14）。たたかなかった 音符と、ウン（やすみ）の ところで たたいたのが ミス。ミス 3こ までなら クリア、0こなら 金のドロップ。1しょうせつ ミスなしで ドロップが とび、4しょうせつ ごとに 金。
• ちょうせい（さいしょの レベル）：カチッ（8はく）に 合わせて たたくと、たたいた ずれの まんなか（中央値）を この端末の ずれとして おぼえ（tamadoro.rhythm.offset、±0.3びょう まで）、ほかの レベルでは その ぶんを ひいて はんていします。ブルートゥースの イヤホンなど、音が おくれて 聞こえる 端末のため。5かい いじょう たたかないと、もういちど。

レベル	ことば	テンポ・しょうせつ
ちょうせい	タン 8はく	90・2
Lv1 タン	タン	80・4
Lv2 ウン	タン・ウン	80・4
Lv3 タタ	タン・タタ	76・4
Lv4 ターアー	タン・ターアー・ウン	84・4
Lv5 ぜんぶ	ぜんぶ	84・6
Lvオニ	ぜんぶ（はんてい きびしめ）	100・8

• しょうせつは、レベルの ことばから ばらばらに つくります（いつも 4はく。ぜんぶ やすみ や やすみ 3こ は なし。そのレベルの あたらしい ことばは かならず 入れる）。

じゆうにひこう（js/piano.js・js/sing.js）

• 音が鳴る けんばんで、すきなように ひいて あそびます（ドロップは なし）。けんばんは 画面の 左はしから 右はしまで ならび、数は 画面の はばで かわります（白いけんばん 1こ 40〜56px くらい。スマホの たてで 10こ、パソコンで 23こ など。まんなかの ドの あたりが まんなか）。むきや 大きさが かわると つくりなおします。指を すべらせると つぎつぎ鳴ります。
• 右上の「けんばんの はば」の スライダーで、白いけんばん 1この はばを 28〜100px で かえられます（けんばんの数は「画面の はば ÷ はば」）。えらんだ はばは この端末に おぼえておきます。
• 「音名かくにん」を ON にすると、さわった けんばんの 名前を、けんばんの上の ふきだしと 画面の まんなかに 大きく出します（黒いけんばんは「ド♯／レ♭」）。おとが ニャーの ときは、名前も ぜんぶ「ニャー」に なります。ON／OFF は この端末に おぼえておきます。
• 「おと」ボタンで、ピアノ（ふつうの 音）と ニャー を えらべます。えらんだ 音は この端末に おぼえておきます。
  • ニャー：ピアノの 音の かわりに、ネコの タマが「ニャー」と、ひいた けんばんの 高さで なきます（黒いけんばんでも なきます）。小さな口の形で、はなに ぬける こもった「ン」から ぱっと「ニャ」と はっきり なきます（息は まぜません）。のばすうちに すこし 口を すぼめ（ほんのり「ニャーォ」）、消える 直前に 2半音 下げます（とちゅうで はなしたときも、消えながら 下げます）。
  • 声は 録音ではなく、その場で つくります（js/sing.js のフォルマント合成）。のどの音を けんばんの 高さで つくり、「口の形」のフィルターに 通して 声に します。のばしている ところの 音程は ピアノと 同じです。けんばんごとの 大きさは、のばしている ところで そろえます。
  • 1回の声は 2.6秒（1.8秒から 小さくなる）。おしつづけても そこで おわり、はなすと（「ニャ」が 聞こえるくらい のこして）消えます。見えている けんばんの 声は、さきに つくっておきます。
  • js/sing.js には、ドを ひくと「どー」、レなら「れー」…と うたう 声（ドレミ）も 入っています（ためしに つくって とっておいたもの。いまは 画面から えらべません）。

にがてちょうせん（たしざん・ひきざん・かけざん）

1問ごとに「苦手HP」（0〜30）を記録しています（js/history.js）。

できごと	苦手HP
まちがえた	+10
正解したけれど 4.5秒以上かかった（かくれにがて）	+3
3.5秒以内に正解した	−2

• レベル選択画面の「🔥 にがてちょうせん！」で切り替えます。レベルごとのボタンに、にがてな問題の数（🔥3、なければ ✨）が出ます。にがてな問題がないレベル（まだ一度もあそんでいないレベルもふくむ）は、にがてちょうせん中は押せません。
• レベルを選ぶと、そのレベルの苦手HPが高い3問を、4周（計12問）出します。にがてが3問に足りないときは、ふつうの問題でうめます。
• 「👑 特訓コース」は、解放されたすべてのレベル（「5は2と」のような分けるレベルはのぞく）からにがてを集めます。ごほうびのドロップは、いちばんにがてな問題のあるレベルのドロップです。にがてな問題が1つもない（まだ あそんでいない など）ときは、押せません。
• 4回ともまちがえずに、平均3.5秒以内で答えられた問題は「✨卒業（HP 0）」になります。とてもにがてだった問題は「🔥パワーダウン（HP 8・あと1かい）」になります。
• にがてちょうせんの回は、ベストタイムやタイムのうつりかわりには入れません（記録には weakChallenge: true がつきます）。
• 出しかたは js/engines/drill.js の WEAK_DECK_STYLE で変えられます（'intensive'：いまの12問 ／ 'blend'：苦手3問×3回＋まぜる問題6問の15問）。

かけざんのレベル

1つの段に3つずつ（「n のだん」「n:さかさ」「n:バラバラ」）で Lv1〜27。そのあとに、Lv28 子オニ（青）（1〜5の段のバラバラ）、Lv29 子オニ（赤）（6〜9の段のバラバラ）、Lv30 オニ（黒）（すべての段）があります。オニの3つは、すべての段の「バラバラ」でドロップを1こ以上とると出てきます。ノーミスクリアで金のドロップ20こがもらえるのは Lv30 だけです。

タマのきろく：ドロップびん

• びんは、コルクのふたの ガラスびん（太い胴・短く丸い肩・胴の73%の口）の形です。形は js/records.js の buildJarShape で決めていて、当たり判定（collideWithJar）と描画（jarPath）の両方がこれを使います。
• びんを開くと、ドロップがみんな同じ大きさでつまった状態からはじまり、新しいドロップ（さいごの8こまで）が上から落ちてきます。
• びんをタップするたびに、100こが1つの「100玉」に合体します。100玉が5こたまると、つぎのタップで「500玉」になり、500玉が2こたまると、つぎのタップで「1000玉」になります。 合体するときは、粒がうずを巻いてグワッと吸いこまれ（光の輪・集中線・びんのふるえ）、ほんの一瞬 止まってから、パキーンとはじけます（びん全体の光・衝撃波・ガラスのかけら・まわりの玉を押しのける・「100!」「500!」「1000!」の文字）。 演出は 100玉（白と水色）→ 500玉（ピンク・衝撃波2重）→ 1000玉（金色・衝撃波3重）と、大きな玉ほど派手で大きくなります。強さや色は js/records.js の DropJar.FX（100玉・500玉・1000玉それぞれ）で変えられます。
• ドロップが350こより多いときは、重くならないように 粒を間引いて描きます（MAX_VISUAL_BALLS。たとえば3589こなら、1つぶが約10こ分）。 100玉・500玉・1000玉は合体すると正確な数になります。100こに満たない のこりの粒は、合体のたびに少しずつ（のこりの数 ÷ のこりの合体の回数）さりげなく「ほどけ」、さいごの合体で ちょうど ほんとうの数（3589こなら89こ）になります（unpackSome）。
• ぜんぶ合体したあとにタップすると、コルクのふたがポンと開いて、ドロップが飛び出します。 コルクは、口に差しこむ部分が抜けるまでは まっすぐ上に抜け、抜けたら回りながら飛びます。落ちてきて傾いていると、角が口のふちに当たって跳ねかえり（3回まで）、まっすぐになると口にすべりこんで、コトンと小さく跳ねて おさまります（stepLid、LID_...）。
• ふた（口のふちより上）をタップすると、いつでも びんがコテンとたおれて、ドロップが画面いっぱいのテーブルにコロコロちらばります（js/drop-table.js の DropTable）。
  • テーブルは上から見たところ（重力なし）で、摩擦で止まります。色は びんのカードと同じ水色で、うしろの きろくの画面が 少しぼやけて すけて見えます（css/records.css の .drop-table-bg）。
  • びんは 左上のすみに たおれて、口が 右下のすみを むきます。うしろには 粒が1つぶ通れる すきま（GAP）を あけます。
  • びんの中に見えていた粒が、びんと いっしょに たおれて、口のほうへ ころがって 出てきます（POUR_PULL）。口から出た粒は テーブルの大きさに ふくらみ、おうぎ形に とびだします。遠くまで とぶ粒から先に出して、しばらくは ほかの粒の上を はねて こえる（HOP_FRAMES）ので、まんなかに かたまりません。
  • 出てくるのは、たおした ときの中身です。合体した玉（100玉・500玉・1000玉）はそのまま、のこりの粒は ほんとうの数で出ます。ただし テーブルの3わり（AREA）を おおう数まで（多いときは へらして出す）。見えていた粒より多いときは、のこりを 口から つづけて出します。粒は びんの中より少し大きく（SIZE_UP）します。
  • おそい端末では、出す粒を へらします。ふたを タップしたときに、この端末の速さを 一瞬 はかり（bench。テーブルと同じ ぶつかりの計算を ためしに うごかす）、「BENCH_BUDGET ÷ はかった時間」こまでに します。ぶちまけている あいだも 1こまの計算時間を 見はり、SLOW_FRAME（ms）を こえる こまが 3つ つづいたら、のこりを 口から 出しません（watchSpeed）。出なかった分は、おかたづけで 口から 入ってきて、いつもの びんに もどります。 かげは、指で つまんでいる粒にだけ つけます（ぜんぶの粒に かげの まるを 塗ると、描く時間の 7わりくらいが かげに なって 重い）。 目安（ぶちまけてから止まるまで、1こまの平均。画面の こまかさ 2倍）：ふつうの パソコンで 1000こ 約4ms。CPU が 4倍 おそいと 600こで 約13ms・1000こで 約18ms なので、そういう端末では 400〜600こくらいに へらします。 軽くするための くふう（うごきは かえない）：ガラスの当たり判定は、とどかない ガラスの線や 胴の まんなかの粒を しらべない。粒どうしの ぶつかりは、マスわけを 数の ならび（Int32Array）で つかいまわす。速い粒が なく 指も ふれていないときは、1こまを わけずに すすめる（SLOW_SPEED）。 おそい端末で 描くのが まにあわないときは、たった時間の ぶんだけ うごきを すすめてから 描くので、スローモーションに なりません（1回に CATCH_UP こままで）。 （粒の絵を 画面に出す大きさで 写しておく くふうも ためしましたが、大きさが かわっていく粒が 多く、写しなおしが ふえて かえって 少し おそくなったので、やめました）
  • 止まったら 指でつまんで動かせて、はじくと すべります。何本の指でも動かせます。

ファイルの場所

index.html              画面（さいしょ・レベル選択・問題・きろく・モーダル）
css/
  base.css              計算の画面に共通のスタイル
  home.css              さいしょの画面
  addition.css など     モードごとの違い（<html data-mode="add"> のときだけ効く）
  records.css           タマのきろく
  music.css             おんがくのへや・けんばん
js/
  modes/                ★ モードの定義（レベル・問題のつくり方・ドロップの色・解放の条件）
  engines/drill.js      たしざん・ひきざん・かけざんの問題の進め方
  engines/grid.js       百マスの問題の進め方
  engines/keys.js       けんばんレッスンの進め方
  state.js              いまのモードと問題の状態
  storage.js            保存（localStorage）の読み書き
  history.js            プレイの記録（きろく画面のため）・苦手HP
  records.js            タマのきろく画面
  drops.js              ドロップを投げる・ごほうび・メニューへの表示
  keypad.js             テンキー
  menu.js               レベル選択 ⇔ 問題 の切り替え、レベルの解放、rescue
  level-select.js       レベルボタンと rescue モーダルを、モードの定義からつくる。にがてちょうせん・特訓コースの切り替え
  data-modal.js         セーブ／ロード、おとな用コマンド（/music on /rescue /delete /master on）
  sound.js              音（テンキー・百マス・けんばん）。おと あり／なし
  notes.js              音のデータ（けんばんの番号・ド〜シ・♯♭の名前）
  keyboard.js           画面のけんばん（さわると すぐ鳴る）
  music.js              おんがくのへや（/music on のときだけ出る）
  piano.js              じゆうにひこう
  sing.js               うたう けんばん（ネコの「ニャー」・とっておいた「どー れー みー」。フォルマント合成）
  songs.js              きょくふう メロディの 曲調の 表（ノブ）と メロディづくり（おんぷよみ Lv8）
  staff.js              五線（ト音記号）と 音符の絵（おんぷよみ）
  engines/rhythm.js     リズムの進め方（流れる がくふ・メトロノーム・はんてい・ちょうせい）
  tama-talk.js          タマのおしゃべり（tashizan_message.json）。タマを左右に5往復なでるとしゃべる
  timer.js              ストップウォッチ、ベストタイム
  home.js               さいしょの画面
  app.js                画面の切り替え
js/glyphs.js            数字・記号・ひらがなの字形（tools/make_glyphs.py でつくる）
img/drops/              ドロップ（ガラス玉にねこのもようの SVG）
img/drops/small/        レベル選択・カレンダー用の小さいドロップ（PNG。SVG をたくさん並べると重いので）
img/bg_space.svg        さいしょの画面のうしろ（宇宙）
img/board_water.svg     さいしょ・レベル選択の画面の水色のわく
img/tama_and_logo.svg   タマとタイトルロゴ
img/ogp.jpg             リンクを貼ったときのカードの画像（1200×630。さいしょの画面から、歯車・おしらせ・フッターを消して撮ったもの）
sitemap.xml・robots.txt 検索エンジン（Google Search Console など）むけ
tools/make_glyphs.py    数字・記号・ひらがなの字形をつくるスクリプト（形を直したいときに）
tools/make_drops.py     前のドロップ（かんたんな球）の SVG をつくるスクリプト。実行すると、いまのドロップが上書きされるので注意
tools/make_drop_pngs.js 小さいドロップの PNG（img/drops/small/）を img/drops/*.svg からつくるスクリプト

よくある変更

• レベルを追加・変更する：js/modes/addition.js などの levels に1行足します。ボタンは自動でできます。

  { label: 'Lv12もんだい', comment: 'こたえが20まで', drop: 'L',
    patterns: () => P.pairs(1, 9, 1, 9, (a, b) => a + b <= 20) },
  

• ドロップの色を変える：img/drops/*.svg の色（グラデーションの stop-color など）を直接書きかえます。 （tools/make_drops.py は前のかんたんな球をつくるスクリプトなので、実行するといまのドロップが上書きされます） 書きかえたら node tools/make_drop_pngs.js で、小さいドロップの PNG（img/drops/small/）もつくりなおします。
• 数字・記号・ひらがなの形を直す：tools/make_glyphs.py の BASE（線の通り道）を変えて python3 tools/make_glyphs.py。 字形は、教科書体の書き方のきまりに合わせて、タマドロのために一から描いたものです（フォントをなぞったものではありません）。 あとで最終調整する点は、スクリプトの先頭に覚え書きがあります。
• タマのセリフを変える：tashizan_message.json。

保存データ（localStorage）

キー	中身
add_coins_3 など	レベルごとのドロップ（最新10こ）。画像名は以前のまま /img/Lmaru.png で記録し、表示のときに img/drops/L.svg にする
addition_level_3_best_time など	ベストタイム（百マスは秒、ほかはミリ秒）
hundredgrid_level_3_records など	百マスのタイム（上位5件）・累積正答数
tamadoro.log.v1	1回あそぶごとの記録（いつ・レベル・時間・まちがい・ドロップ）
tamadoro.stats.v1	1問ごとのできぐあい（回数・まちがい・時間・苦手HP hp。にがてマップ・にがてちょうせん用）
tamadoro.schema	以前のドロップを記録に取りこんだしるし
keys_coins_3・keys_level_3_best_time など	けんばんの ドロップ・ベストタイム（レベル1 が おとあそび）
black_coins_3・black_level_3_best_time など	くろいけんばんの ドロップ・ベストタイム
notes_coins_3・notes_level_3_best_time など	おんぷよみの ドロップ・ベストタイム（レベル1 が しくみ）
tamadoro.notes.song	/song で きめた きょくふう（曲調の id か 系統。ないときは ノブの わりあいで えらぶ）
tamadoro.notes.dataVersion	おんぷよみの データの 版（js/modes/notes.js の dataVersion と ちがうと、まえの データを 消す）
rhythm_coins_3 など	リズムの ドロップ（レベル1 が ちょうせい）
tamadoro.rhythm.offset	リズムの ちょうせいで はかった ずれ（秒。プラスは おそめに たたく）
tamadoro.music.enabled	/music on にしたか（true で「おんがくのへや」が出る）
tamadoro.sound.muted	「おと なし」にしたか（true で ぜんぶの音を鳴らさない）
tamadoro.piano.names	じゆうにひこうの「音名かくにん」を ON にしたか
tamadoro.piano.keyWidth	じゆうにひこうの「けんばんの はば」（px。ないときは 画面の はばに合わせた めやす）

「データをセーブ」は localStorage をまるごと tamadoro_月日時分.txt に書き出します。

「データをロード」は、読みこみかたを2つから選べます。

• いまのデータに たして よみこむ：ファイルにあるデータだけ入れかえます。ファイルにないデータ（ほかのモードのドロップ・記録・設定）は、そのままのこります。
• ぜんぶ うわがきして よみこむ：いまの localStorage をぜんぶ消してから、ファイルのデータを入れます。ファイルがこわれているときは、何も消しません。

どちらも、読みこんだあとに tamadoro.schema がなければ（むかしのアプリのセーブファイルなど）、ドロップを記録に取りこみます。

テスト

tests/ に、ブラウザを自動で動かして確かめるテストがあります（Node.js と Playwright が必要）。

cd tests
npm install
npx playwright install chromium
npm test