matrice raining code effect brug af JavaScript
den nye Matrice-film kommer i år, og jeg er så hyped for det, at jeg var nødt til at skabe denne ikoniske effekt med mine værktøjer. Implementeringen i sig selv er virkelig enkel, og jeg brugte kun HTML, CSS og vanilla javascript til det.
hvis du foretrækker et videoformat, kan du tjekke min tutorial om det på YouTube:
implementering
jeg bruger HTML canvas til at oprette “Digital rain” – effekten, og vi vil have alt login i javascript.
HTML
HTML-filen bliver virkelig enkel. I kroppen har vi kun en <canvas>, og jeg inkluderede også javascript-filen her i bunden, du kan også inkludere den i hovedet med attributten 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
dette vil også være meget kort. I CSS får jeg bare kroppen til at fylde hele visningen og indstille en sort baggrundsfarve til den.
html { background: black; height: 100%; overflow: hidden;}body { margin: 0; padding: 0; height: 100%;}Javascript
denne implementering vil være den Krish lionshare af projektet.
først skal vi initialisere vores lærred med en 2D-kontekst. Jeg indstiller også lærredet til at tage hele visningen op ved at indstille bredden og højden:
const canvas = document.getElementById('Matrix');const context = canvas.getContext('2d');canvas.width = window.innerWidth;canvas.height = window.innerHeight;dernæst opretter jeg alfabetet, hvorfra vi vælger vores karakterer til regnen. Jeg vil bruge katakana tegn (en variation af Katakana symboler blev brugt i matricen filmen selv.), det latinske alfabet og arabiske tal. Sammenkædningen af disse vil skabe alfabetet.
const katakana = 'アァカサタナハマヤャラワガザダバパイィキシチニヒミリヰギジヂビピウゥクスツヌフムユュルグズブヅプエェケセテネヘメレヱゲゼデベペオォコソトノホモヨョロヲゴゾドボポヴッン';const latin = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';const nums = '0123456789';const alphabet = katakana + latin + nums;vi er nødt til at beregne, hvor mange “regnkolonner” der passer på skærmen, og for at gøre det indstiller jeg en fast skriftstørrelse og deler bredden på vinduets indre bredde for at få det nøjagtige kolonneantal.
const fontSize = 16;const columns = canvas.width/fontSize;jeg vil bruge et array til at gemme og gøre regndråberne. Indekset for et givet element vil være koordinaten for regndråben på H-aksen, og værdien af et givet element vil holde det koordinat på Y-aksen. På denne måde har vi ikke brug for et 2D-array. For at initialisere arrayet fylder jeg det op med dem, så efter initialiseringen har vi den samme nøjagtige højde for hver kolonne: 1.
const rainDrops = ;for( let x = 0; x < columns; x++ ) { rainDrops = 1;}nu er det tid til at gennemføre hjertet af vores effekt trækfunktionen. Først vil vi male hele lærredet med en gennemsigtig sort farve. Dette vil give os sporeffekten på regndråberne, når dråben falder, vil de allerede druknede tegn langsomt falme ud. Næste sætter jeg skriftstørrelsen og farven (selvfølgelig er den grøn liter). Og nu kommer den røde nøgle. Jeg løber gennem raindrop-arrayet, og for hvert element vælger jeg et tilfældigt tegn fra vores alfabet og gør det i den næste position i kolonnen. Det vigtige her er, at du skal multiplicere koordinaterne (elemnt værdi og indeks) med skriftstørrelsen for at få den perfekte afstand. Endelig er vi nødt til at flytte vores regndråber, der faldt under visningshøjden, til toppen af denne kolonne. For at få regneffekten sætter jeg det ikke øverst med det samme, men tilføjer lidt tilfældighed ved at tilføje en tilfældig chance for at gø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 sidste trin skal jeg kalde trækfunktionen i et interval, og dette vil kalde trækfunktionen i hver 30ms.
setInterval(draw, 30);konklusion
dette er et rigtig sjovt projekt at skabe, og jeg forsøgte at holde implementeringen så begyndervenlig som jeg kunne. Håber du nød det, hvis du søger pædagogisk indhold på internetudvikling følg mig, Jeg opretter uddannelsesmæssige YouTube-videoer og Instagram-indlæg også.
Glad Hacking!
Hvor kan du lære mere af mig?
jeg opretter uddannelsesindhold, der dækker internetudvikling på flere platforme, er du velkommen til at tjekke dem ud.
jeg opretter også et nyhedsbrev, hvor jeg deler ugens eller 2 ugers uddannelsesindhold, som jeg oprettede. Ingen tyr Kurt bare pædagogisk indhold.
links:
- 🍺 støt gratis uddannelse og køb mig en øl
- kart Deltag i vores samfund på Discord
- karit nyhedsbrev abonner her
- karit YouTube Javascript Academy
- karit kvidre: @ dev_adamnagy
- karit Instagram @javascriptacademy