Poďme sa naučiť nakresliť bod v JavaScripte v prehliadači... nie je to technicky ťažké, ale len pre tých, ktorí tápajú a pre tých, ktorí nie sú pripravení nakresliť bod na internete - to je samozrejme celý úspech.
Existuje mnoho spôsobov, ako nakresliť bod, pozrime sa na ne
Pomocou Unity/Godot/microStudio alebo ktoréhokoľvek z tisícok tvorcov hier.. všetci vytvoria nejakým spôsobom nejaký kód, ktorý bude JavaScript alebo Webassembly, a stále nám ukážu zmysel.Táto cesta nás nezaujíma.naozaj nepochopíme, čo sa deje, kontrola nad kódom bude minimálna a v zdrojovom kóde nečitateľná, navyše je obrovská.
Táto cesta Jediov je nám čo najbližšie, pretože.náš kód nebude veľký a jasný ako deň, nebudeme veľa abstrahovať, nebudeme výrazne rozširovať náš kód pomocou knižníc.Skvelá by bola aj kontrola kódu
Toto je samozrejme spôsob Jediov.Kódex je maximálne komplikovaný, maximálna kontrola vecí, ktoré akoby netreba kontrolovať.Zdrojové kódy sú minimálne a so znalosťou golimy JavaScriptu môžeme pokojne ísť nájsť prácu, pretože.takýchto ľudí potrebujeme.
Ale našou úlohou nie je nájsť si prácu, ale nakresliť bodku jednoduchým a ľahkým spôsobom.Naším vektorom je rýchlosť a flexibilita.
Vybral som si knižnicu
p5js nakresliť bodku.Nejde len o to, samozrejme, ak by úlohou bolo nakresliť bod a to je všetko, samozrejme, všetko by sa muselo robiť v holom JavaScripte, ale robím to z perspektívy, .k.potom ty a ja urobíme iné veci, ktoré budú vyzerať úžasne, a na to potrebujeme dobrý nástroj.Jedným z nich je p5js.V golim JavaScript musíme vytvoriť plátno na definovanie inicializačných a prekresľovacích funkcií, v p5 sa to robí tiež, ale veľmi stručne.
Ale najprv..
Minimálne nastavenie prostredia pre vývoj JavaScriptu
Stiahnuť ▼
p5.min.js a držať to vedľa seba.Páči sa ti to
index.html
<html>
<head>
<script src="p5.min.js"></script>
<script src="sketch.js"></script>
</head>
<body style="margin: 0px;">
<main>
</main>
</body>
</html>
sketch.js
function setup() {
createCanvas(window.innerWidth, window.innerHeight);
}
function draw() {
background(0);
stroke('white');
strokeWeight(10);
point(window.innerWidth/2,window.innerHeight/2);
}
V dôsledku toho sa váš prehliadač otvorí takto
HTML je pochopiteľné, ale čo je toto za kód JavaScript?
funkcia setup je inicializácia, vykoná sa raz, v nej vytvoríme plátno, t.j.oblasť, kde nakreslíme bod.window.innerWidth, window.innerHeight
je šírka a výška obrazovky, t.j.definujeme celoobrazovkové plátno a áno, HTML má tiež veľmi dôležitý štýl
<body style="margin: 0px;">
Nepotrebujeme nič iné inicializovať, stačí nakresliť bodku.Pozrite sa na princíp tu .. funkcia kreslenia sa vykonáva napríklad 60 krát za sekundu a 60 krát za sekundu nakreslíme svoj bod .. zdalo by sa, že je to hlúpe, stačí nakresliť bod a je to ale v budúcnosti bude základom pre všeobecnú animáciu.
Vo všeobecnosti je kód na kreslenie bodu veľmi jednoduchý:
point(10,10)
a všetko!
Náš kód je však o niečo väčší
background(0);
stroke('white');
strokeWeight(10);
point(window.innerWidth/2,window.innerHeight/2);
pozadie čierne
biela hviezda
hrúbka bodky 10
a nakreslíme ho v strede vertikálnej a horizontálnej.
No.. nakreslili sme bodku na plátno, všetko je ako má byť, ale mohli by sme to nakresliť aj na čisto HTML bez akéhokoľvek JavaScriptu.. Ako by to vyzeralo?
Robí to elementárne a ešte jednoduchšie, ale princípy sú úplne odlišné, tu je konečný kód pre kreslenie štvorca v strede obrazovky
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="background-color: black;">
<div style="position: fixed; top: 50%; left: 50%; background-color: white; width: 10px; height: 10px;"></div>
</body>
</html>
Výsledok je takmer rovnaký
Áno, nakresliť niečo do stredu v HTML je celkom jednoduché, ale aby ste pridali animácie a ešte viac rozumnú interaktívnosť, budete musieť myslieť podľa zásad CSS.Aj keď je to celkom zaujímavá úloha.Toto všetko zabíja len jedna elementárna vec, v CSS neexistujú náhodné čísla, toto zabije všetky naše pokusy v budúcnosti, preto budem tomuto smeru uprednostňovať menej.
Ak si predstavím, že chcem spraviť hviezdnu oblohu na holom CSS, tak mi všetko nevyjde, lebohviezdy by sa mali objavovať na náhodných pozíciách a ak majú vopred vytvorené súradnice, nebude to také krásne a ani také jednoduché, pretože v CSS môžete napísať generátor náhodných čísel, ale takýto kód bude vyzerať úplne škaredo, nečitateľne a ťažko rozumieť!