Matrix raining code effect using JavaScript
nowy film Matrix nadchodzi w tym roku i jestem tak podekscytowany tym, że musiałem stworzyć ten kultowy efekt za pomocą moich narzędzi. Sama implementacja jest naprawdę prosta i używałem tylko HTML, CSS i vanilla javascript do tego.
jeśli wolisz format wideo, możesz sprawdzić mój tutorial na nim na YouTube:
implementacja
użyję HTML canvas do stworzenia efektu „Digital rain”, a my będziemy mieć wszystkie logowanie w javascript.
HTML
plik HTML będzie naprawdę prosty. W ciele będziemy mieli tylko <canvas>, a ja również plik javascript tutaj na dole, możesz również dołączyć go w głowie z atrybutem 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 też będzie naprawdę krótkie. W CSS po prostu sprawiam, że ciało wypełnia cały viewport i ustawiam dla niego czarny kolor tła.
html { background: black; height: 100%; overflow: hidden;}body { margin: 0; padding: 0; height: 100%;}Javascript
Ta implementacja będzie podstawą projektu.
najpierw musimy zainicjalizować nasze płótno kontekstem 2D. Ustawiłem również płótno, aby zajęło cały widok, ustawiając jego szerokość i wysokość:
const canvas = document.getElementById('Matrix');const context = canvas.getContext('2d');canvas.width = window.innerWidth;canvas.height = window.innerHeight;następnie tworzę alfabet, z którego wybierzemy nasze postacie na deszcz. Użyję znaków katakany (odmiana symboli katakany została użyta w samym filmie Matrix.), alfabetu łacińskiego i cyfr arabskich. Połączenie ich stworzy alfabet.
const katakana = 'アァカサタナハマヤャラワガザダバパイィキシチニヒミリヰギジヂビピウゥクスツヌフムユュルグズブヅプエェケセテネヘメレヱゲゼデベペオォコソトノホモヨョロヲゴゾドボポヴッン';const latin = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';const nums = '0123456789';const alphabet = katakana + latin + nums;musimy obliczyć, ile „kolumn deszczowych” zmieści się na ekranie i w tym celu ustawię stałą wielkość i podzielę szerokość na wewnętrznej szerokości okna, aby uzyskać dokładną liczbę kolumn.
const fontSize = 16;const columns = canvas.width/fontSize;użyję tablicy do przechowywania i renderowania kropli deszczu. Indeks danego elementu będzie współrzędną kropli deszczu na osi X, a wartość danego elementu będzie utrzymywała jego współrzędną na osi Y. W ten sposób nie potrzebujemy tablicy 2D. Aby zainicjalizować tablicę wypełniam ją jedynkami, więc po inicjalizacji będziemy mieli taką samą dokładną wysokość dla każdej kolumny: 1.
const rainDrops = ;for( let x = 0; x < columns; x++ ) { rainDrops = 1;}teraz nadszedł czas, aby zaimplementować palenisko naszego efektu funkcję rysowania. Najpierw pomalujemy całe płótno przezroczystym czarnym kolorem. To da nam efekt szlaku na krople deszczu, gdy spadnie kropla, już utopione postacie powoli zanikną. Następnie ustawię wielkość czcionki i kolor (oczywiście jest zielony 😎). A teraz klucz🔑. Przejdę przez tablicę kropli deszczu i dla każdego elementu wybieram losowy znak z naszego alfabetu i renderuję go w następnej pozycji kolumny. Ważną rzeczą jest to, że musisz pomnożyć współrzędne (wartość elemnt i indeks)z rozmiarem czcionki, aby uzyskać idealne odstępy. Na koniec musimy przesunąć krople deszczu, które spadły poniżej wysokości widoku, na górę tej kolumny. Aby uzyskać efekt deszczu, nie umieszczam go od razu na górze, ale dodaję trochę losowości, dodając przypadkową szansę 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++; }};w ostatnim kroku muszę wywołać funkcję rysowania w interwale, a to wywoła funkcję rysowania co 30ms.
setInterval(draw, 30);wniosek
jest to naprawdę fajny projekt do stworzenia i starałem się utrzymać implementację tak przyjazną dla początkujących, jak tylko mogłem. Mam nadzieję, że ci się podobało, jeśli szukasz treści edukacyjnych na temat tworzenia stron internetowych, Obserwuj mnie, tworzę edukacyjne filmy na YouTube i posty na Instagramie.
Happy Hacking!
gdzie można dowiedzieć się więcej ode mnie?
tworzę treści edukacyjne obejmujące tworzenie stron internetowych na kilku platformach, zapraszam do zapoznania się z nimi.
tworzę również newsletter, w którym dzielę się tygodniowymi lub dwutygodniowymi treściami edukacyjnymi, które stworzyłem. No bull just tylko treści edukacyjne.
> linki:
- 🍺 Wesprzyj darmową edukację i kup mi piwo
- Join Dołącz do naszej społeczności na Discord
- Subscribe Zapisz się tutaj do newslettera
- YouTube Akademia Javascript YouTube
- Twitter Twitter: @ dev_adamnagy
- Instagram Instagram @javascriptacademy