Matrix raining code effect using JavaScript
Den nye Matrix-filmen kommer i år,og jeg er så hyped for det at jeg måtte lage denne ikoniske effekten med verktøyene mine. Implementeringen i seg selv er veldig enkel, og jeg brukte BARE HTML, CSS og vanilje javascript for det.
hvis du foretrekker et videoformat, kan du sjekke min tutorial på Det På YouTube:
Implementering
jeg bruker HTML canvas til å lage «Digital rain» – effekten, og vi vil ha all innlogging i javascript.
HTML
HTML-filen vil være veldig enkel. I kroppen vil vi bare ha en <canvas>, og jeg inkluderte også javascript-filen her nederst, du kan også inkludere den i hodet med defer – attributtet.
<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
Dette vil også være veldig kort. I CSS jeg bare i utgangspunktet gjøre kroppen fylle hele synsfeltet og sette en svart bakgrunnsfarge for det.
html { background: black; height: 100%; overflow: hidden;}body { margin: 0; padding: 0; height: 100%;}Javascript
denne implementeringen vil være den 🦁 lionshare av prosjektet.
først må vi initialisere lerretet vårt MED EN 2d-kontekst. Jeg har også satt lerretet til å ta opp hele synsfeltet ved å sette det bredde og høyde:
const canvas = document.getElementById('Matrix');const context = canvas.getContext('2d');canvas.width = window.innerWidth;canvas.height = window.innerHeight;Deretter lager jeg alfabetet som vi vil velge våre tegn for regnet. Jeg skal bruke katakana tegn (en variant Av Katakana symboler ble brukt I Matrix filmen selv.), det latinske alfabetet og arabiske tall. Sammenkoblingen av disse vil skape alfabetet.
const katakana = 'アァカサタナハマヤャラワガザダバパイィキシチニヒミリヰギジヂビピウゥクスツヌフムユュルグズブヅプエェケセテネヘメレヱゲゼデベペオォコソトノホモヨョロヲゴゾドボポヴッン';const latin = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';const nums = '0123456789';const alphabet = katakana + latin + nums;vi må beregne hvor mange «regn kolonner» vil passe på skjermen, og for å gjøre det jeg skal sette en fast skriftstørrelse og dele bredden på vinduets innerWidth å få nøyaktig kolonne teller.
const fontSize = 16;const columns = canvas.width/fontSize;jeg bruker en matrise til å lagre og gjengi regndråpene. Indeksen for et gitt element vil være koordinaten til regndråpen På X-aksen, og verdien av et gitt element vil holde det koordinat På Y-aksen. På denne måten trenger VI ikke EN 2D-array. For å initialisere arrayet fyller jeg det opp med med, så etter initialiseringen vil vi ha samme eksakte høyde for hver kolonne: 1.
const rainDrops = ;for( let x = 0; x < columns; x++ ) { rainDrops = 1;}Nå er det på tide å implementere hjertet av vår effekt draw-funksjonen. Først skal vi male hele lerretet med en gjennomsiktig svart farge. Dette vil gi oss stien effekt på regndråpene, når dråpen faller de allerede drukne tegnene vil sakte fade ut. Deretter skal jeg sette skriftstørrelsen og fargen(selvfølgelig er det grønt 😎). Og nå kommer den 🔑 nøkkelen. Jeg går gjennom raindrop-arrayet, og for hvert element velger jeg et tilfeldig tegn fra alfabetet vårt og gjør det i neste posisjon i kolonnen. Det viktigste her er at du må multiplisere koordinatene (elemnt verdi og indeks) med skriftstørrelsen for å få den perfekte avstanden. Til slutt må vi flytte våre regndråper som falt under viewport høyde, til toppen av den kolonnen. For å få regneffekten legger jeg det ikke til toppen med en gang, men legger til litt tilfeldighet ved å legge til en tilfeldig sjanse til å gjøre det.
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++; }};Som et siste skritt må jeg ringe draw-funksjonen i et intervall, og dette vil ringe draw-funksjonen i hver 30ms.
setInterval(draw, 30);Konklusjon
Dette er et veldig morsomt prosjekt å lage, og jeg prøvde å holde implementeringen så nybegynnervennlig som mulig. Håper du likte det, hvis du søker pedagogisk innhold på webutvikling følg meg, lager jeg pedagogiske YouTube-videoer og Instagram-innlegg også.
Glad Hacking!
Hvor kan du lære mer fra meg?
jeg lager utdanningsinnhold som dekker webutvikling på flere plattformer, ta gjerne en titt på dem.
jeg lager også et nyhetsbrev der jeg deler ukens eller 2 ukes pedagogiske innhold som jeg opprettet. Ingen bull💩 bare pedagogisk innhold.
🔗 Lenker:
- 🍺 Støtt gratis utdannelse og kjøp meg en øl
- 💬 Bli med i samfunnet Vårt På Uenighet
- 📧 Nyhetsbrev Abonner her
- 🎥 YouTube Javascript Academy
- 🐦 Twitter: @ dev_adamnagy
- 📷 Instagram @javascriptacademy