Matrix raining code effect using JavaScript
noul film Matrix vine în acest an și sunt atât de exagerat pentru asta încât a trebuit să creez acest efect iconic cu instrumentele mele. Punerea în aplicare în sine este foarte simplu și am folosit doar HTML, CSS și vanilie javascript pentru ea.
dacă preferați un format video, puteți verifica tutorialul meu pe el pe YouTube:
implementare
voi folosi HTML canvas pentru a crea efectul „Digital rain” și vom avea toate datele de conectare în javascript.
HTML
fișierul HTML va fi foarte simplu. În corp vom avea doar un <canvas> și am inclus și fișierul javascript aici în partea de jos, îl puteți include și în cap cu atributul 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
acest lucru va fi foarte scurt prea. În CSS am face doar practic corpul umple întregul viewport și a stabilit o culoare de fundal negru pentru ea.
html { background: black; height: 100%; overflow: hidden;}body { margin: 0; padding: 0; height: 100%;}Javascript
această implementare va fi cota de leu a proiectului.
mai întâi trebuie să inițializăm pânza noastră cu un context 2D. Am setat, de asemenea, panza pentru a prelua întregul viewport prin setarea este lățime și înălțime:
const canvas = document.getElementById('Matrix');const context = canvas.getContext('2d');canvas.width = window.innerWidth;canvas.height = window.innerHeight;în continuare creez alfabetul din care ne vom alege personajele pentru ploaie. Voi folosi caractere katakana (o variantă a simbolurilor Katakana a fost folosită în filmul Matrix în sine.), alfabetul latin și numerele arabe. Concatenarea acestora va crea alfabetul.
const katakana = 'アァカサタナハマヤャラワガザダバパイィキシチニヒミリヰギジヂビピウゥクスツヌフムユュルグズブヅプエェケセテネヘメレヱゲゼデベペオォコソトノホモヨョロヲゴゾドボポヴッン';const latin = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';const nums = '0123456789';const alphabet = katakana + latin + nums;trebuie să calculăm câte „coloane de ploaie” se vor potrivi pe ecran și pentru a face acest lucru, voi seta o dimensiune fixă a fontului și voi împărți lățimea pe lățimea interioară a ferestrei pentru a obține numărul exact de coloane.
const fontSize = 16;const columns = canvas.width/fontSize;voi folosi o matrice pentru a stoca și face picăturile de ploaie. Indicele unui element dat va fi coordonata picăturii de ploaie pe axa X, iar valoarea unui element dat va menține coordonata sa pe axa Y. În acest fel nu avem nevoie de o matrice 2D. Pentru a inițializa matrice am umple cu cu cele, astfel încât după inițializarea vom avea aceeași înălțime exactă pentru fiecare coloană: 1.
const rainDrops = ;for( let x = 0; x < columns; x++ ) { rainDrops = 1;}acum este timpul să implementăm Vatra efectului nostru funcția de tragere. Mai întâi vom picta întreaga pânză cu o culoare neagră transparentă. Acest lucru ne va da efectul de traseu asupra picăturilor de ploaie, când picătura cade, personajele deja înecate se vor estompa încet. În continuare voi seta fontsize și culoarea(desigur, este verde). Și acum vine cheia de la centenar. Voi bucla prin matrice raindrop, și pentru fiecare element voi alege un caracter aleatoriu din alfabetul nostru și face că, în următoarea poziție a coloanei. Important este că trebuie să înmulțiți coordonatele (valoarea elemnt și indexul) cu dimensiunea fontului pentru a obține distanța perfectă. În cele din urmă, trebuie să ne mutăm picăturile de ploaie care au scăzut sub înălțimea portului de vizualizare, în partea de sus a coloanei respective. Pentru a obține efectul de ploaie, nu îl pun imediat în vârf, ci adaug un pic de întâmplare adăugând o șansă aleatorie de a face asta.
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++; }};ca un ultim pas am nevoie pentru a apela funcția draw într-un interval și acest lucru va apela funcția draw în fiecare 30ms.
setInterval(draw, 30);concluzie
acesta este un proiect foarte distractiv de creat și am încercat să păstrez implementarea cât mai prietenoasă pentru începători. Sper că v-a plăcut, dacă căutați conținut educațional pe dezvoltarea web Urmați-mă, creez videoclipuri educaționale YouTube și postări Instagram.
Hacking Fericit!
unde poți afla mai multe de la mine?
creez conținut educațional care acoperă dezvoltarea web pe mai multe platforme, nu ezitați să le verificați.
de asemenea, creez un buletin informativ în care împărtășesc conținutul educațional al săptămânii sau săptămânii 2 pe care l-am creat. Nu taur conținut doar educativ.
link-uri de la Strasbourg:
- 🍺 sprijiniți educația gratuită și cumpărați-mi o bere
- intră în comunitatea noastră pe Discord
- newsletter-ul de la newsletter-ul de la Facebook Abonează-te aici
- Academia JavaScript YouTube de la Facebook
- Twitter de la Twitter: @ dev_adamnagy
- Instagram de la Facebook @javascriptacademy