Matrix raining code effect using JavaScript
az új Matrix film idén érkezik, és annyira izgatott vagyok, hogy ezt az ikonikus hatást kellett létrehoznom az eszközeimmel. Maga a megvalósítás nagyon egyszerű, és csak HTML-t, CSS-t és Vanilla javascript-et használtam hozzá.
ha inkább egy videó formátum, akkor nézd meg a bemutató rajta a YouTube-on:
implementáció
HTML canvas használatával hozom létre a “Digital rain” effektust, és az összes bejelentkezés javascript-ben lesz.
HTML
a HTML fájl nagyon egyszerű lesz. A törzsben csak egy <canvas> lesz, és a javascript fájlt is ide tettem az aljára, a fejbe is beilleszthetjük a defer attribútummal.
<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
ez is nagyon rövid lesz. A CSS-ben alapvetően csak a testet töltöm ki az egész nézetablakban, és fekete háttérszínt állítok be.
html { background: black; height: 100%; overflow: hidden;}body { margin: 0; padding: 0; height: 100%;}Javascript
ez a megvalósítás lesz a projekt oroszlánrésze.
először 2D kontextussal kell inicializálnunk a vásznat. Azt is meg a vásznon, hogy vegye fel az egész nézetablakban beállításával ez szélessége és magassága:
const canvas = document.getElementById('Matrix');const context = canvas.getContext('2d');canvas.width = window.innerWidth;canvas.height = window.innerHeight;ezután elkészítem az ábécét, amelyből kiválasztjuk a karaktereinket az esőre. Katakana karaktereket fogok használni (a Katakana szimbólumok egy változatát használták magában a Mátrix filmben.), a latin ábécé és az arab számok. Ezek összefűzése létrehozza az ábécét.
const katakana = 'アァカサタナハマヤャラワガザダバパイィキシチニヒミリヰギジヂビピウゥクスツヌフムユュルグズブヅプエェケセテネヘメレヱゲゼデベペオォコソトノホモヨョロヲゴゾドボポヴッン';const latin = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';const nums = '0123456789';const alphabet = katakana + latin + nums;ki kell számolnunk, hogy hány “esőoszlop” fér el a képernyőn, és ehhez beállítok egy rögzített betűméretet, és elosztom a szélességet az ablak belső szélességén, hogy megkapjam a pontos oszlopszámot.
const fontSize = 16;const columns = canvas.width/fontSize;egy tömböt használok, hogy eltároljam és rendereljem az esőcseppeket. Egy adott elem indexe az X tengelyen lévő esőcsepp koordinátája lesz, az adott elem értéke pedig az Y tengelyen tartja a koordinátáját. Így nincs szükségünk 2D tömbre. A tömb inicializálásához kitöltöm azokat, így az inicializálás után minden oszlophoz azonos magasság lesz: 1.
const rainDrops = ;for( let x = 0; x < columns; x++ ) { rainDrops = 1;}most itt az ideje, hogy megvalósítsuk a hatásunk kandallóját, a draw funkciót. Először az egész vásznat átlátszó fekete színnel festjük. Ez megadja nekünk az esőcseppek nyomvonalát, amikor a csepp esik, a már megfulladt karakterek lassan elhalványulnak. Ezután beállítom a betűméretet és a színt(természetesen zöld színű). És most jön a főcím. Végigjárom az esőcsepp tömböt, és minden elemhez kiválasztok egy véletlenszerű karaktert az ábécénkből, és ezt az oszlop következő pozíciójába renderelem. A lényeg itt az, hogy meg kell szorozni a koordinátákat (elemnt érték és index) a betűmérettel, hogy a tökéletes térköz. Végül meg kell mozgatnunk az esőcseppeket, amelyek a nézetablak magassága alá estek, az oszlop tetejére. Az esőhatás elérése érdekében nem azonnal teszem a tetejére, hanem egy kis véletlenszerűséget adok hozzá egy véletlenszerű esély hozzáadásával.
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++; }};utolsó lépésként meg kell hívnom a draw funkciót egy intervallumban, ez pedig minden 30 ms-ban meghívja a draw funkciót.
setInterval(draw, 30);következtetés
ez egy nagyon szórakoztató projekt létrehozása, és megpróbáltam a megvalósítást a lehető kezdőbarátabbá tenni. Remélem tetszett, ha keres oktatási tartalom Webfejlesztés kövess engem, hozok létre oktatási YouTube videók, Instagram hozzászólás is.
Boldog Hackelést!
hol tudhat meg többet tőlem?
több platformon készítek webfejlesztést lefedő oktatási tartalmat, nyugodtan nézd meg őket.
hírlevelet is készítek, ahol megosztom az általam létrehozott heti vagy 2 heti oktatási tartalmat. Nincs bika, csak oktatási tartalom.
linkek:
- 🍺 támogasd az ingyenes oktatást és vegyél nekem egy sört
- gyerünk, Csatlakozz a Discord közösséghez
- reggel Hírlevél feliratkozás
- reggel youtube Javascript Akadémia
- reggel Twitter: @dev_adamnagy
- reggel Instagram @javascriptacademy