Matrix raining code effect pomocí JavaScriptu
nový Matrix film přichází v tomto roce, a já jsem tak medializovaný za to, že jsem musel vytvořit tento ikonický efekt s mými nástroji. Samotná implementace je opravdu jednoduchá a použil jsem pro ni pouze HTML, CSS a vanilkový javascript.
pokud dáváte přednost formátu videa, můžete se podívat na můj tutoriál na YouTube:
implementace
použiji HTML plátno k vytvoření efektu“ Digital rain “ a budeme mít všechna přihlášení v JavaScriptu.
HTML
soubor HTML bude opravdu jednoduchý. V těle budeme mít pouze <canvas> a také jsem zde v dolní části zahrnul soubor javascript, můžete jej také zahrnout do hlavy atributem 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
to bude také opravdu krátké. V CSS jsem v podstatě udělal, aby tělo vyplnilo celý výřez a nastavilo pro něj černou barvu pozadí.
html { background: black; height: 100%; overflow: hidden;}body { margin: 0; padding: 0; height: 100%;}Javascript
Tato implementace bude základem projektu.
nejprve musíme inicializovat naše plátno s 2D kontextem. Také jsem nastavil plátno tak, aby zabíralo celý výřez nastavením jeho šířky a výšky:
const canvas = document.getElementById('Matrix');const context = canvas.getContext('2d');canvas.width = window.innerWidth;canvas.height = window.innerHeight;dále vytvořím abecedu, ze které budeme vybírat naše postavy pro déšť. Budu používat znaky katakana (variace symbolů Katakana byla použita v samotném filmu Matrix.), latinská abeceda a arabská čísla. Jejich zřetězení vytvoří abecedu.
const katakana = 'アァカサタナハマヤャラワガザダバパイィキシチニヒミリヰギジヂビピウゥクスツヌフムユュルグズブヅプエェケセテネヘメレヱゲゼデベペオォコソトノホモヨョロヲゴゾドボポヴッン';const latin = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';const nums = '0123456789';const alphabet = katakana + latin + nums;musíme spočítat, kolik „dešťových sloupců“se vejde na obrazovku, a k tomu nastavím pevnou velikost písma a rozdělím šířku na vnitřní šířku okna, abych získal přesný počet sloupců.
const fontSize = 16;const columns = canvas.width/fontSize;použiji pole k uložení a vykreslení dešťových kapek. Index daného prvku bude souřadnicí dešťové kapky na ose X a hodnota daného prvku bude držet jeho souřadnici na ose Y. Tímto způsobem nepotřebujeme 2D pole. Pro inicializaci pole ho naplním jedničkami, takže po inicializaci budeme mít stejnou přesnou výšku pro každý sloupec: 1.
const rainDrops = ;for( let x = 0; x < columns; x++ ) { rainDrops = 1;}nyní je čas implementovat ohnisko našeho efektu draw funkce. Nejprve namalujeme celé plátno průhlednou černou barvou. To nám dá účinek stezky na dešťové kapky, když kapka spadne, již utopené postavy pomalu zmizí. Dále nastavím velikost písma a barvu (samozřejmě je zelená). A teď přichází klíč . Projdu pole raindrop, a pro každý prvek vyberu náhodný znak z naší abecedy a vykreslím to na další pozici sloupce. Důležité je, že musíte vynásobit souřadnice (elemnt hodnota a index) velikostí písma, abyste získali perfektní mezery. Nakonec musíme přesunout naše dešťové kapky, které klesly pod výšku výřezu, na vrchol tohoto sloupce. Chcete-li získat dešťový efekt, nedávám to hned na vrchol, ale přidejte trochu náhodnosti přidáním náhodné šance na to.
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++; }};jako poslední krok musím volat draw funkci v intervalu a to bude volat draw funkci v každých 30ms.
setInterval(draw, 30);závěr
Jedná se o opravdu zábavný projekt, který jsem vytvořil, a snažil jsem se udržet implementaci co nejpříjemnější pro začátečníky. Doufám, že se vám to líbilo, pokud hledáte vzdělávací obsah na vývoji webu Následujte mě, vytvářím vzdělávací videa YouTube, a Instagram příspěvky příliš.
Šťastný Hacking!
kde se ode mě můžete dozvědět více?
vytvářím vzdělávací obsah pokrývající vývoj webových stránek na několika platformách, neváhejte se na ně podívat.
vytvářím také informační bulletin, kde sdílím týdenní nebo 2 týdenní vzdělávací obsah, který jsem vytvořil. Žádný bulvár, jen vzdělávací obsah.
Links odkazy:
- 🍺 Podporujte bezplatné vzdělávání a kupte mi pivo
- Join Připojte se k naší komunitě na Discord
- Newsletter Newsletter přihlaste se k odběru zde
- YouTube YouTube Javascript Academy
- Twitter Twitter: @dev_adamnagy
- Instagram Instagram @ javascriptacademy