【JavaScript】プログラミングで血の雨を再現

JavaScript
スポンサーリンク

本記事では JavaScript を使って、赤い雨の再現をするプログラムについて紹介しています。

 

YouTubeに動画もあるので、ぜひご覧ください。

 

【早送り】プログラミングで赤い雨を再現 / JavaScript
スポンサーリンク

プログラミングで血の雨を再現

 

DEMO

まず、はじめにこちらが完成品のサンプルです。

 

まず、背景写真を読み込み、赤い長方形を描画して、それが下に少しずつ落ちていくようにします。

一番下までいったら、描画する座標をまた一番上に戻し、雨が降っているように見せます。

 

また図形の透明度も、変更できるようにします。

 

長い棒ほど、くっきり映るようにし、短い棒はぼやけて見えるようにしています。

HTML ファイルの作成

 

まず最初に下記のような html ファイルを作成します。

 

 

“img.png” という名前の背景写真を html ファイルと同じディレクトリ内に用意します。

JavaScript ファイルの作成

 

index.js、rain.js という二つのファイルを作ります。

 

 

 

changeScale() という関数は長い棒ほどくっきり映り、短い棒ほど少しボヤけて見えるようするためのものです。

この関数を使い、alpha の値を決めています。

alpha の値は図形の透明度をあらわします。

 

0~1の数で表され、0だと全く見えない状態、1だと普通の状態ということになります。

 

draw() 関数で、描画を行い、update() 関数内で情報の更新についての動作を行っています。

 

 

以上、血の雨を再現するプログラムのソースコードについてでした。

コメント