跳ね回る図形
画面に映して流しっぱなしにしておけるもの · アート ●●○
ここを変えてみてください
プロンプト
20個のやわらかな円が画面内を漂い、端に当たって跳ね返る画面を作ってください。インストール不要で、他のファイルも使わずにブラウザで開ける単一のHTMLファイル(1ファイルのみ)にしてください。CSSとJavaScriptもその中にすべて含めてください。画像ファイルや外部アドレスは一切使わず、記号が必要な場合は絵文字や文字を使ってください。 それぞれが独自のサイズ、速さ、進行方向を持っています。壁や互いにぶつかって跳ね返り、跳ね返るたびに少し減速して、また元の速さに戻るようにしてください。 時間が経つにつれて色がゆっくりと変化し、二度と同じ見た目にならないようにしてください。 クリックした場所に新しく1つ追加されるようにしてください。また、スライダーで数を変更できるようにしてください。 スマートフォンでも滑らかに動くようにしてください。もし60個で動作が重くなる場合は、フレームレートを落としてカクつかせるくらいなら描画する数を減らしてください。 完成したら、頭の中で数分間動かし続けてみて、画面の外に飛び出してしまったり、隅っこに固まったりしないか確認してください。
使った技: ファイルは1つだけ · まず何を作るか伝える · 表示するものを決める
図形が画面の端に張り付いてしまう場合は、「進行方向を反転させる前に、画面の内側に押し戻してください」と伝えてみてください。
返ってきたものを貼り付けてください
こんなものもあります