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

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

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

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

DEMO

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

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

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

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

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

HTML ファイルの作成

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

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

JavaScript ファイルの作成

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

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

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

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

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

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

• GitHubのコード

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