js01の画像

JavaScriptを使って簡単なアニメーションを制作しました。素材は、いらすとや様よりお借りしています。
ラーメンの各トッピングをクリックして完成ボタンを押すと、トッピングの内容によって猫の反応が変わります。

URL

https://bit.ly/40r0OQI

担当範囲・所要時間

コーディング(5時間)

使用ツール

Visual Studio Code / Photoshop

コーディングについて

HTML・CSS・jQuery・JavaScriptで制作しました。
position: absoluteを使って各素材の配置をしています。各トッピングをクリックした回数を条件として、「完成」ボタンをクリック後の動作を分岐させています。今後の改善点として、制限時間を設ける等して、よりゲーム性を持たせたいと考えています。