Javascriptを使ったMatrix raining code effect

Javascriptを使ったMatrix raining code effect

新しいMatrixムービーが今年来ています。私はツールを使ってこの象徴的なエフェクトを作成しなければならなかったことをとても誇示しています。 実装自体は本当にシンプルで、HTML、CSS、およびバニラjavascriptのみを使用しました。

あなたはビデオ形式を好む場合は、YouTubeでそれについての私のチュートリアルを確認することができます:

実装

私は”デジタル雨”効果を作成するためにHTMLキャンバスを使用します,そして、我々はjavascriptですべてのログインを持っています.HTML

HTMLファイルは本当にシンプルになります。 本文には<canvas>しかありませんが、javascriptファイルも下部に含まれています。defer属性を使用して頭に含めることもできます。

<html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./styles.css"> <title>Matrix digital rain</title></head><body> <canvas></canvas> <script src="./index.js"></script></body></html>
全画面モードに入る全画面モードを終了する

CSS

これも本当に短くなります。 CSSでは、基本的にボディをビューポート全体に塗りつぶすだけで、黒い背景色を設定します。

html { background: black; height: 100%; overflow: hidden;}body { margin: 0; padding: 0; height: 100%;}
全画面モードに入る全画面モードを終了する

Javascript

この実装は、プロジェクトのli lionshareになります。
まず、キャンバスを2Dコンテキストで初期化する必要があります。 また、幅と高さを設定して、ビューポート全体を占めるようにキャンバスを設定しました:

const canvas = document.getElementById('Matrix');const context = canvas.getContext('2d');canvas.width = window.innerWidth;canvas.height = window.innerHeight;
全画面モードに入る全画面モードを終了する

次に、私たちは雨のために私たちの文字を選択し、そこからアルファベットを作成します。 私はカタカナ文字を使用します（マトリックス映画自体ではカタカナ記号のバリエーションが使用されていました。）、ラテンアルファベットとアラビア数字。 これらを連結するとアルファベットが作成されます。

const katakana = 'アァカサタナハマヤャラワガザダバパイィキシチニヒミリヰギジヂビピウゥクスツヌフムユュルグズブヅプエェケセテネヘメレヱゲゼデベペオォコソトノホモヨョロヲゴゾドボポヴッン';const latin = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';const nums = '0123456789';const alphabet = katakana + latin + nums;
全画面モードに入る全画面モードを終了する

画面に収まる”雨の列”の数を計算し、固定のfontsizeを設定し、ウィンドウのinnerWidthの幅を分割して正確な列数を取得する必要があります。

const fontSize = 16;const columns = canvas.width/fontSize;
全画面モードに入る全画面モードを終了する

私は雨滴を格納し、レンダリングするために配列を使用します。 与えられた要素のインデックスはx軸上の雨滴の座標になり、与えられた要素の値はY軸上の座標を保持します。 このようにして、2D配列は必要ありません。 配列を初期化するために、私はそれを1で埋めるので、初期化の後、すべての列に対して同じ正確な高さになります：1。

const rainDrops = ;for( let x = 0; x < columns; x++ ) { rainDrops = 1;}
全画面モードに入る全画面モードを終了する

今では、私たちの効果のハース描画関数を実装する時間です。 まず、キャンバス全体を透明な黒色でペイントします。 これは、ドロップがすでに溺れる文字がゆっくりとフェードアウトします落ちるとき、私たちに雨滴にトレイル効果を与えます。 次に、fontsizeとcolorを設定します（もちろんgreen😎です）。 そして今、🔑キーが来ます。 私は雨滴の配列をループし、すべての要素について、私は私たちのアルファベットからランダムな文字を選択し、列の次の位置にそれをレンダリングし ここで重要なことは、完璧な間隔を得るために、座標（elemnt値とインデックス）にフォントサイズを乗算する必要があることです。 最後に、ビューポートの高さを下回った雨滴をその列の上部に移動する必要があります。 雨の効果を得るために、私はすぐにトップにそれを置くことはありませんが、それを行うためのランダムなチャンスを追加することによって少し無

const draw = () => { context.fillStyle = 'rgba(0, 0, 0, 0.05)'; context.fillRect(0, 0, canvas.width, canvas.height); context.fillStyle = '#0F0'; context.font = fontSize + 'px monospace'; for(let i = 0; i < rainDrops.length; i++) { const text = alphabet.charAt(Math.floor(Math.random() * alphabet.length)); context.fillText(text, i*fontSize, rainDrops*fontSize); if(rainDrops*fontSize > canvas.height && Math.random() > 0.975){ rainDrops = 0; } rainDrops++; }};
全画面モードに入る全画面モードを終了する

最後のステップとして、私は間隔でdraw関数を呼び出す必要があり、これは30msごとにdraw関数を呼び出します.

setInterval(draw, 30);
全画面モードに入る全画面モードを終了する

結論

これは作成するのが本当に楽しいプロジェクトであり、私はできる限り初心者に優しい実装を維持しようとしました。 あなたがそれを楽しんだことを願っています,あなたは、web開発上の教育コンテンツを求める場合は、私に従ってください,私は教育Instagramのビデオを作

ハッピーハッキング！

どこで私からより多くを学ぶことができますか？

私はいくつかのプラットフォームでweb開発をカバーする教育コンテンツを作成し、それらをチェックアウトして自由に感じます。

私はまた、私が作成した週のまたは2週間の教育コンテンツを共有するニュースレターを作成します。 いいえブル♥ちょうど教育コンテンツ。

←リンク:

  • 🍺 無料の教育をサポートし、私にビールを購入
  • ►Discordに私たちのコミュニティに参加
  • ►ニュースレターはこちらを購読
  • ►YouTube Javascriptアカデミー
  • ►Twitter：@dev_adamnagy
  • ►Instagram@javascriptacademy

Leave a Reply

メールアドレスが公開されることはありません。