JavaScript: nakreslite bodku

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

Herní konštruktéri



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

JavaScript Frameworks

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

Čistý JavaScript

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ť!



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