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

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

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

【早送り】プログラミングで赤い雨を再現 / JavaScript

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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