JavaScript: nacrtajte tačku

Hajde da naučimo kako da nacrtamo tačku u JavaScript-u u pretraživaču.. nije tehnički teško, ali samo za one koji petljaju, a za one koji nisu spremni da nacrtaju tačku na internetu - ovo je naravno čitavo dostignuće.

Postoji mnogo načina da nacrtate tačku, pogledajmo ih

Konstruktori igara



Koristeći Unity/Godot/microStudio ili bilo koji od hiljada graditelja igara.. svi će oni na ovaj ili onaj način kreirati neki kod koji će biti JavaScript ili Webassembly, a ipak će nam pokazati poentu.Nas ovaj put ne zanima.nećemo baš shvatiti šta se dešava, kontrola nad kodom će biti minimalna i nečitljiva u izvornom kodu, osim toga ogromna.

JavaScript Frameworks

Ovaj put Džedaja nam je što je moguće bliži, jer.naš kod neće biti velik i jasan kao dan, nećemo puno apstrahovati, nećemo značajno povećati naš kod bibliotekama.Kontrola koda bi također bila odlična

Čisti JavaScript

Ovo je naravno put Džedaja.Šifra je maksimalno komplikovana, maksimalna kontrola stvari koje, takoreći, ne treba kontrolisati.Izvorni kodovi su najminimalniji i sa poznavanjem golimog JavaScripta možemo samo bezbedno da idemo da se zaposlimo, jer.takvi ljudi nam trebaju.

Ali naš zadatak nije da nađemo posao, već da na jednostavan i lak način nacrtamo tačku.Naš vektor je brzina i fleksibilnost.

Ja sam izabrao biblioteku

p5js da nacrtam tacku.Nije samo to, naravno, da je zadatak bio da se nacrta tacka i to je to, naravno, sve bi se moralo raditi u golom JavaScript-u, ali ja to radim u perspektivi, .k.onda ćemo ti i ja raditi druge stvari koje će izgledati fantastično, a za ovo nam je potreban dobar alat.Jedan od njih je p5js.

U golim JavaScript-u, potrebno je da kreiramo platno da definišemo funkcije inicijalizacije i ponovnog crtanja, u p5 je i to urađeno, ali vrlo koncizno.

Ali prvo..

Minimalno podešavanje okruženja za razvoj JavaScripta

Skinuti

p5.min.js i držite ga jedno pored drugog.

Volim ovo

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);
    }

Ovo će se otvoriti u vašem pretraživaču ovako:

Pa, HTML je razumljiv, ali kakav je ovo JavaScript kod?

funkcija podešavanja je inicijalizacija, izvršava se jednom, u njoj kreiramo platno, tj.područje u kojem ćemo nacrtati tačku.window.innerWidth, window.innerHeight

je širina i visina ekrana, tj.definišemo platno preko celog ekrana i da, HTML takođe ima veoma važan stil za ovo

<body style="margin: 0px;">

Ne trebamo ništa drugo inicijalizirati, samo trebamo nacrtati tačku.Pogledaj princip ovdje.. funkcija crtanja se izvršava npr. 60 puta u sekundi, a 60 puta u sekundi ćemo nacrtati našu tačku.. izgleda da je ovo glupo, samo treba nacrtati tačku i to je ali u budućnosti će to biti osnova za opštu svu animaciju.

Generalno, kod za crtanje tačke je izuzetno jednostavan:

point(10,10)

i to je to!

Međutim, naš kod je malo veći

  background(0);
  stroke('white');
  strokeWeight(10);
  point(window.innerWidth/2,window.innerHeight/2);

pozadina crna

bela zvezda

debljina tačke 10

i crtamo ga u sredini vertikalne i horizontalne.

Pa... nacrtali smo tačku na platnu, sve je kako treba, ali mogli bismo je čak nacrtati i na čistom HTML-u bez JavaScripta.. Kako bi to izgledalo?

To ga čini elementarnim i još lakšim, ali principi su potpuno drugačiji, evo konačnog koda za crtanje kvadrata u sredini ekrana

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

Rezultat je skoro isti

Da, prilično je lako nacrtati nešto u centru u HTML-u, ali da biste dodali animacije, a još više normalnu interaktivnost, morat ćete razmišljati po principima CSS-a.Iako je to prilično zanimljiv zadatak.Samo jedna elementarna stvar ubija sve ovo, u CSS-u nema nasumičnih brojeva, ovo će ubiti sve naše pokušaje u budućnosti, zbog čega ću manje davati prednost ovom pravcu.

Ako zamislim da želim da napravim zvjezdano nebo na golom CSS-u, onda mi neće sve uspjeti, jerzvijezde bi se trebale pojaviti na nasumične pozicije, a ako imaju unaprijed kreirane koordinate, to neće biti tako lijepo i ne tako jednostavno, jer možete napisati generator slučajnih brojeva u CSS-u, ali će takav kod izgledati potpuno ružno, nečitljivo i teško razumej!





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