本記事では、JavaScript で「降る雪が全部メルティーキッスだったら」を再現する方法についてご紹介します。
↓YouTube に動画もアップしてあるので、動画派の方は是非そちらをご覧下さい。
【早送りバージョン】「降る雪が全部メルティーキッスだったら」をプログラミングで再現
JavaScript で「降る雪が全部メルティーキッスだったら」を再現
DEMO
まず始めに、こちらが完成したものです。
3種類（ノーマル、苺、抹茶）のメルティーキッスがランダムに雪のように落ちていきます。
落ちていく速度はチョコの大きさに比例して速く落ちるようになっています。
チョコの画像をランダムな向きに回転させ、回る速度もバラバラになっています。
また、遠近感を出すために小さく描画されたチョコはぼやけて映るようにし、大きいチョコはくっきりと描画されるようにしています。
HTML ファイルの作成
始めに以下のHTMLを書きます。
同じフォルダ内に、
- “meiji.png” という普通のメルティーキッスの画像
- “ichigo.png” という苺のメルティーキッスの画像
- “matcha.png” という抹茶のメルティーキッスの画像
- “back.jpg” という背景の画像
を用意します。
JavaScript ファイルの作成
次にJavaScriptファイルを書きます。
“index.js” と “snowflake.js” という一個一個の雪（チョコ）についてのファイルを作ります。
“snowflake.js” ファイルでは、コンストラクタに
- チョコ画像の読み込み
- チョコの大きさ r を8~25の間のランダムな数字で定義
- 画像の透明度をチョコの大きさをもとに決める
などについての処理を書いています。
changeScale() という関数は、小さい画像をぼやけて映るようにし、大きいチョコはくっきり描画するという動作のために使用しています。
以上が「JavaScript で降る雪が全部メルティーキッスだったらを再現」のソースコードです。
参考にさせて頂いたコード
- The Coding Train の Snowfall
コメント