Pojďme se naučit nakreslit bod v JavaScriptu v prohlížeči... není to technicky obtížné, ale pouze pro ty, kteří tápou a pro ty, kteří nejsou připraveni nakreslit bod na internetu - to je samozřejmě celý úspěch.
Existuje mnoho způsobů, jak nakreslit bod, pojďme se na ně podívat
Pomocí Unity/Godot/microStudio nebo kteréhokoli z tisíců tvůrců her.. všichni vytvoří nějakým způsobem nějaký kód, který bude JavaScript nebo Webassembly, a přesto nám ukáže smysl.Tato cesta nás nezajímá.opravdu nepochopíme, co se děje, kontrola nad kódem bude minimální a nečitelná ve zdrojovém kódu, navíc je obrovská.
Tato cesta Jediů je nám co nejblíže, protože.náš kód nebude velký a jasný jako den, nebudeme moc abstrahovat, nebudeme moc rozšiřovat náš kód pomocí knihoven.Ovládání kódu by bylo také skvělé
To je samozřejmě způsob Jediů.Kód je co nejsložitější, maximální kontrola věcí, které jakoby není potřeba kontrolovat.Zdrojové kódy jsou minimální a se znalostí golimy JavaScriptu můžeme klidně jít získat práci, protože.takové lidi potřebujeme.
Naším úkolem ale není najít práci, ale jednoduchým a snadným způsobem nakreslit tečku.Naším vektorem je rychlost a flexibilita.
Vybral jsem si knihovnu
p5js nakreslit tečku.Není to samozřejmě jen o tom, že pokud by úkolem bylo nakreslit bod a to je vše, samozřejmě by se vše muselo dělat v holém JavaScriptu, ale dělám to z perspektivy, .k.pak ty a já uděláme další věci, které budou vypadat úžasně, a k tomu potřebujeme dobrý nástroj.Jedním z nich je p5js.V golim JavaScriptu potřebujeme vytvořit plátno pro definování inicializačních a překreslovacích funkcí, v p5 se to dělá také, ale velmi stručně.
Ale nejdřív..
Minimální nastavení prostředí pro vývoj JavaScriptu
Stažení
p5.min.js a držte to vedle sebe.takhle
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);
}
Toto se otevře ve vašem prohlížeči takto:
HTML je srozumitelné, ale co je to za kód JavaScript?
funkce setup je inicializační, provede se jednou, v ní vytvoříme plátno, tzn.oblast, kde budeme kreslit bod.window.innerWidth, window.innerHeight
je šířka a výška obrazovky, tzn.definujeme celoobrazovkové plátno a ano, HTML má také velmi důležitý styl
<body style="margin: 0px;">
Nepotřebujeme nic dalšího inicializovat, stačí nakreslit tečku.Podívejte se na princip zde .. funkce kreslení se provádí např. 60x za sekundu a 60x za sekundu nakreslíme náš bod .. zdálo by se, že je to hloupost, stačí nakreslit bod a je to to, ale v budoucnu to bude základ pro obecnou veškerou animaci.
Obecně je kód pro kreslení bodu velmi jednoduchý:
point(10,10)
a to je vše!
Náš kód je však o něco větší
background(0);
stroke('white');
strokeWeight(10);
point(window.innerWidth/2,window.innerHeight/2);
pozadí černé
bílá hvězda
tloušťka bodu 10
a nakreslíme ji do středu svislé a vodorovné.
No.. nakreslili jsme tečku na plátno, vše je jak má být, ale mohli bychom to nakreslit i na čisté HTML bez jakéhokoli JavaScriptu.. Jak by to vypadalo?
Dělá to elementární a ještě jednodušší, ale principy jsou úplně jiné, zde je konečný kód pro nakreslení čtverce do středu 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ýsledek je téměř stejný
Ano, nakreslit něco do středu v HTML je docela snadné, ale abyste přidali animace a ještě více rozumnou interaktivitu, budete muset přemýšlet podle zásad CSS.I když je to docela zajímavý úkol.Tohle všechno zabíjí jen jedna elementární věc, v CSS nejsou žádná náhodná čísla, to zabije všechny naše pokusy v budoucnu, proto budu tomuto směru dávat menší přednost.
Když si představím, že chci udělat hvězdnou oblohu na holém CSS, tak mi vše nevyjde, protožehvězdy by se měly objevit na náhodných pozicích, a pokud mají předem vytvořené souřadnice, nebude to tak krásné a ani tak jednoduché, protože v CSS můžete napsat generátor náhodných čísel, ale takový kód bude vypadat naprosto ošklivě, nečitelně a těžko rozumět!