JavaScriptでゲームプログラミングをしています。 次のように画像に動きをつけたいのですが、ど

JavaScriptでゲームプログラミングをしています。

次のように画像に動きをつけたいのですが、どのようにすれば良いでしょうか。

まず、適当な大きさの円の画像とそれよりも小さい玉の画像を用意します。
球を円の中にマウスで持ってきて、円の縁を内側から押し上げると、その動きに合わせてその部分が広がる？変形する？。
球を遠ざけると円の形が戻る。

非常にわかりづらいですが、画像を用意しました。
わかる方教えていただけると嬉しいです。

質問者からの補足コメント

• 一番聞きたいことは、別で作った画像にプログラムでアニメーションを加えることはできるのかということです。

    補足日時：2022/09/29 20:07

No.1 ベストアンサー 回答者： fujillin 回答日時： 2022/09/30 00:03

こんばんは

HTMLベースということで良いのでしょうか？
具体的な内容がはっきりとしないので、大雑把な回答になりますけれど・・

＞別で作った画像にプログラムでアニメーションを加えることはできるのかということです。
「画像」というものがJPEG、PNG等のようないわゆる画像と言う意味で良いのでしょうか？
アニメーションと言ってもいろいろありますが、移動や拡大/縮小であれば、比較的簡単にできます。
（表示位置を変えたり、サイズを変更したりするだけなので・・）
自由に変形をしたいとなると、canvas等に一旦取り込んでおいて、分解して変形を施すといった操作が必要になりますし、かなり面倒かと思います。
（変形の内容にもよりますが、矩形を台形になどのような単純なものならさほどではないと思います）
だいぶ以前に、通常の画像を取り込んで、円筒面上に投影してスライドさせるということ試みたことはありますけれど・・
https://oshiete.goo.ne.jp/qa/7608841.html

一方で、ご質問文を見る限りは対象が単純な円のようなので、図形を描画してしまった方が簡単なように思われます。
その方が、当たりの計算や、変形の計算が簡単になるでしょうから。
例えば、大円の変形が始まるのは
　（大円と小円の中心点間の距離）＞（大円の半径）-（小円の半径）
という式で簡単に判定できます。

図形描画ということになると多分canvasかSVG利用ということになると思われます。
単純移動だけならSVGの方が簡単かもしれませんが、変形するのなら逐次描画となるので、どちらでもあまり変わらないと思います。
変形をどのような雰囲気にしたいのかが不明ですけれど、一番単純そうな包絡線的なものを考えれば、2円の接線を計算すれば単純包絡図形を描画することは可能でしょう。
多分、これをベースにして、なさりたいような図形に曲線化することになるのではないでしょうか？