Matrix raining code effect using JavaScript
The new Matrix movie is coming this year, and I ’ m so hyped for it that I had to create this iconic effect with my tools. Itse toteutus on todella yksinkertainen ja käytin siihen vain HTML: ää, CSS: ää ja vanilla JavaScriptiä.
jos haluat videoformaatin, voit katsoa siitä tutoriaalini YouTubesta:
toteutus
käytän HTML-kanavaa ”Digital rain” – efektin luomiseen, ja meillä on kaikki kirjautumiset javascriptissä.
HTML
HTML-tiedosto on todella yksinkertainen. Kropassa meillä on vain <canvas>, ja mukana on myös javascript-tiedosto täällä alareunassa, voit myös sisällyttää sen päähän defer – attribuutilla.
<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
tämäkin jää todella lyhyeksi. CSS vain periaatteessa tehdä elin täyttää koko kuvaikkunan ja asettaa Musta taustaväri sitä.
html { background: black; height: 100%; overflow: hidden;}body { margin: 0; padding: 0; height: 100%;}Javascript
tämä toteutus on hankkeen Lion lionshare.
ensin on alustettava Kangas 2D-kontekstilla. Asetin myös kankaan ottamaan koko näkymän asettamalla sen leveyden ja korkeuden:
const canvas = document.getElementById('Matrix');const context = canvas.getContext('2d');canvas.width = window.innerWidth;canvas.height = window.innerHeight;seuraavaksi luon aakkoset, joista poimimme merkit sadetta varten. Käytän katakana-hahmoja (muunnelmaa Katakana-symboleista käytettiin itse Matrix-elokuvassa.), latinalaisilla aakkosilla ja arabialaisilla numeroilla. Näiden yhdistäminen luo aakkoset.
const katakana = 'アァカサタナハマヤャラワガザダバパイィキシチニヒミリヰギジヂビピウゥクスツヌフムユュルグズブヅプエェケセテネヘメレヱゲゼデベペオォコソトノホモヨョロヲゴゾドボポヴッン';const latin = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';const nums = '0123456789';const alphabet = katakana + latin + nums;meidän on laskettava, kuinka monta ”sadepylvästä” mahtuu näytölle, ja sitä varten asetan kiinteän kirjasinkoon ja jaan leveyden ikkunan sisävedelle saadakseni tarkan sarakeluvun.
const fontSize = 16;const columns = canvas.width/fontSize;käytän antennia sadepisaroiden tallentamiseen ja muokkaamiseen. Tietyn elementin indeksi on sadepisaran koordinaatti X-akselilla, ja tietyn elementin arvo pitää sen koordinaatin Y-akselilla. Näin emme tarvitse 2D-järjestelmää. Alustaa array täytän sen kanssa ykkösiä, joten jälkeen alustus meillä on sama tarkka korkeus jokaisen sarakkeen: 1.
const rainDrops = ;for( let x = 0; x < columns; x++ ) { rainDrops = 1;}nyt on aika toteuttaa tulisija meidän vaikutus piirtää toiminto. Ensin maalaamme koko kankaan läpinäkyvällä mustalla värillä. Tämä antaa meille trail vaikutus sadepisarat, kun pisara putoaa jo hukkua merkkiä hiljalleen häivyttää. Seuraavaksi asetan kirjasinkoon ja värin (tietenkin se on vihreä 😎). Ja nyt tulee 🔑 – avain. Kierrän sadepisara-järjestelmän läpi ja valitsen jokaiselle alkuaineelle satunnaisen merkin aakkosistamme ja teen sen sarakkeen seuraavassa asennossa. Tärkeää tässä on, että sinun täytyy kertoa koordinaatit (alkuainearvo ja indeksi) fonttikoko saada täydellinen väli. Lopuksi meidän on siirrettävä sadepisaramme, jotka putosivat näkymän korkeuden alapuolelle, tuon pylvään yläosaan. Saada sade vaikutus en laita sitä alkuun heti, mutta lisätä hieman satunnaisuutta lisäämällä satunnainen mahdollisuus tehdä, että.
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++; }};viimeisenä vaiheena minun on kutsuttava draw-funktiota välein ja tämä kutsuu draw-funktiota 30ms välein.
setInterval(draw, 30);johtopäätös
tämä on todella hauska projekti luoda ja yritin pitää toteutuksen niin aloittelijaystävällisenä kuin pystyin. Toivottavasti nautit siitä, jos etsit opetussisältöä web development follow me, luon opettavaisia YouTube-videoita, ja Instagram-viestejä liian.
Hyvää Hakkerointia!
missä voit oppia minulta lisää?
luon koulutussisältöjä, jotka kattavat web-kehityksen useilla alustoilla, voit vapaasti check tarkistaa ne.
luon myös uutiskirjeen, jossa Jaan luomani viikon tai 2 viikon koulutussisällön. No bull💩 vain opetuksellinen sisältö.
🔗 linkit:
- 🍺 Support free education and buy me a beer
- 💬 Join our community on Discord
- 📧 Newsletter Subscribe here
- 🎥 YouTube Javascript Academy
- 🐦 Twitter: @dev_adamnagy
- 📷 Instagram @javascriptacademy