Matrix raining Code effect using JavaScript
Der neue Matrix-Film kommt dieses Jahr und ich bin so begeistert, dass ich diesen ikonischen Effekt mit meinen Werkzeugen erstellen musste. Die Implementierung selbst ist wirklich einfach und ich habe nur HTML, CSS und Vanilla Javascript dafür verwendet.
Wenn Sie ein Videoformat bevorzugen, können Sie mein Tutorial auf YouTube überprüfen:
Implementierung
Ich werde HTML Canvas verwenden, um den „Digital Rain“ -Effekt zu erzeugen, und wir werden alle Details in Javascript haben.
HTML
Die HTML-Datei wird wirklich einfach sein. Im Körper haben wir nur eine <canvas> , und ich habe auch die Javascript-Datei hier unten eingefügt, Sie können sie auch mit dem Attribut defer in den Kopf aufnehmen.
<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
Dies wird auch sehr kurz sein. In CSS lasse ich den Körper im Grunde genommen das gesamte Ansichtsfenster ausfüllen und eine schwarze Hintergrundfarbe dafür festlegen.
html { background: black; height: 100%; overflow: hidden;}body { margin: 0; padding: 0; height: 100%;}Javascript
Diese Implementierung wird der 🦁 Löwenanteil des Projekts sein.
Zuerst müssen wir unsere Leinwand mit einem 2D-Kontext initialisieren. Ich habe auch die Leinwand so eingestellt, dass sie das gesamte Ansichtsfenster einnimmt, indem ich ihre Breite und Höhe festlege:
const canvas = document.getElementById('Matrix');const context = canvas.getContext('2d');canvas.width = window.innerWidth;canvas.height = window.innerHeight;Als nächstes erstelle ich das Alphabet, aus dem wir unsere Charaktere für den Regen auswählen. Ich werde Katakana-Zeichen verwenden (Eine Variation von Katakana-Symbolen wurde im Matrix-Film selbst verwendet.), das lateinische Alphabet und arabische Zahlen. Die Verkettung dieser wird das Alphabet erstellen.
const katakana = 'アァカサタナハマヤャラワガザダバパイィキシチニヒミリヰギジヂビピウゥクスツヌフムユュルグズブヅプエェケセテネヘメレヱゲゼデベペオォコソトノホモヨョロヲゴゾドボポヴッン';const latin = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';const nums = '0123456789';const alphabet = katakana + latin + nums;Wir müssen berechnen, wie viele „Regenspalten“ auf den Bildschirm passen, und dazu setze ich eine feste Schriftgröße und teile die Breite in der Innenbreite des Fensters, um die genaue Spaltenzahl zu erhalten.
const fontSize = 16;const columns = canvas.width/fontSize;Ich werde ein Array verwenden, um die Regentropfen zu speichern und zu rendern. Der Index eines bestimmten Elements ist die Koordinate des Regentropfens auf der X-Achse, und der Wert eines bestimmten Elements enthält seine Koordinate auf der Y-Achse. Auf diese Weise benötigen wir kein 2D-Array. Um das Array zu initialisieren, fülle ich es mit Einsen, so dass wir nach der Initialisierung für jede Spalte genau die gleiche Höhe haben: 1.
const rainDrops = ;for( let x = 0; x < columns; x++ ) { rainDrops = 1;}Jetzt ist es Zeit, den Herd unseres Effekts die Draw-Funktion zu implementieren. Zuerst malen wir die ganze Leinwand mit einer transparenten schwarzen Farbe. Dies gibt uns den Trail-Effekt auf die Regentropfen, wenn der Tropfen fällt, werden die bereits ertrinkenden Charaktere langsam verblassen. Als nächstes stelle ich die Schriftgröße und die Farbe ein (natürlich ist es grün 😎). Und jetzt kommt die 🔑-Taste. Ich durchlaufe das Regentropfen-Array und wähle für jedes Element ein zufälliges Zeichen aus unserem Alphabet aus und rendere es an der nächsten Position der Spalte. Wichtig dabei ist, dass Sie die Koordinaten (elemnt-Wert und Index) mit der Schriftgröße multiplizieren müssen, um den perfekten Abstand zu erhalten. Zuletzt müssen wir unsere Regentropfen, die unter die Höhe des Ansichtsfensters gefallen sind, an den oberen Rand dieser Spalte verschieben. Um den Regeneffekt zu erzielen, setze ich ihn nicht sofort nach oben, sondern füge ein wenig Zufälligkeit hinzu, indem ich eine zufällige Chance hinzufüge, dies zu tun.
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++; }};Als letzten Schritt muss ich die Zeichnungsfunktion in einem Intervall aufrufen, wodurch die Zeichnungsfunktion alle 30 ms aufgerufen wird.
setInterval(draw, 30);Fazit
Dies ist ein wirklich lustiges Projekt und ich habe versucht, die Implementierung so anfängerfreundlich wie möglich zu halten. Ich hoffe es hat Ihnen gefallen, wenn Sie Bildungsinhalte zur Webentwicklung suchen, folgen Sie mir, ich erstelle lehrreiche YouTube-Videos, und Instagram-Beiträge auch.
Viel Spaß beim Hacken!
Wo können Sie mehr von mir erfahren?
Ich erstelle Bildungsinhalte für Web-Entwicklung auf mehreren Plattformen, fühlen Sie sich frei, 👀 check them out.
Ich erstelle auch einen Newsletter, in dem ich die von mir erstellten Bildungsinhalte der Woche oder 2-Woche teile. Kein bull💩 nur Bildungsinhalte.
🔗 Verlinkungen:
- 🍺 Unterstützen Sie kostenlose Bildung und kaufen Sie mir ein Bier
- 💬 Treten Sie unserer Community auf Discord bei
- 📧 Newsletter Abonnieren Sie hier
- 🎥 YouTube Javascript Academy
- 🐦 Twitter: @dev_adamnagy
- 📷 Instagram @javascriptacademy