JavaScript: nakreslete tečku

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

Herní konstruktéři



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á.

JavaScriptové rámce

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é

Čistý JavaScript

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!





bg bs ca ceb co cs cy da de el en eo es et fa fi fr fy ga gd gl gu ha haw hi hmn hr ht hu id ig is it iw ja jw ka kk km kn ko ku ky la lb lo lt lv mg mi mk ml mn mr ms mt my ne nl no ny or pa pl ps pt ro ru rw sd si sk sl sm sn so sr st su sv sw ta te tg th tk tl tr tt ug uk ur uz vi xh yi yo zh zu
Text to speech
QR-Code generator
Parsedown cheatsheet. Markdown
Filter data by column with regular expressions
Engines for creating games on LUA ?
JavaScript: draw a point
JavaScript: Speaking text in Chinese