YouTube でプログラミング を学習!【趣味プロch】

JavaScript で「降る雪が全部メルティーキッスだったら」を再現

プログラミング
スポンサーリンク

本記事では、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 で降る雪が全部メルティーキッスだったらを再現」のソースコードです。

 

参考にさせて頂いたコード

 

ご質問・ご感想は

ツイッターお問い合わせからいただけるとうれしいです。

 

最後まで読んでくれてありがとうございます。

ツイッターのフォローもお願いします。

それではまた!
 
 


YouTubeチャンネルを開設しました。
主にプログラミングについて配信をしています。

 

 
 

プログラミング
スポンサーリンク
この記事をSNSでシェアする
フォローする
スポンサーリンク

コメント