JavaScript: nacrtajte točku

Naučimo nacrtati točku u JavaScriptu u pregledniku.. nije tehnički teško, ali samo za one koji petljaju, a za one koji nisu spremni nacrtati točku na Internetu - ovo je naravno cijelo postignuće.

Postoji mnogo načina za crtanje točke, pogledajmo ih

Konstruktori igara



Koristeći Unity/Godot/microStudio ili bilo koji od tisuća graditelja igara.. svi će oni na ovaj ili onaj način stvoriti neki kod koji će biti JavaScript ili Webassembly, a ipak će nam pokazati bit.Taj put nas ne zanima.nećemo baš razumjeti što se događa, kontrola nad kodom će biti minimalna i nečitljiva u izvornom kodu, osim toga ogromna.

JavaScript okviri

Ovaj put Jedija nam je što bliži, jer.naš kod neće biti velik i jasan kao dan, nećemo puno apstrahirati, nećemo značajno povećati naš kod knjižnicama.Kontrola koda također bi bila sjajna

Čisti JavaScript

Ovo je naravno put Jedija.Šifra je maksimalno komplicirana, maksimalna kontrola stvari koje, takoreći, ne treba kontrolirati.Izvorni kodovi su najminimalniji i sa znanjem golimog JavaScripta, možemo samo mirno ići po posao, jer.takvi ljudi nam trebaju.

No, naš zadatak nije pronaći posao, već na jednostavan i lak način nacrtati točku.Naš vektor su brzina i fleksibilnost.

Odabrao sam knjižnicu

p5js nacrtati točku.Nije to samo to, naravno, da je zadatak nacrtati točku i to je to, naravno, sve bi se moralo raditi u golom JavaScriptu, ali ovo radim u perspektivi, .k.onda ćemo ti i ja raditi druge stvari koje će izgledati nevjerojatno, a za to nam je potreban dobar alat.Jedan od njih je p5js.

U golim JavaScriptu trebamo stvoriti platno za definiranje funkcija inicijalizacije i ponovnog crtanja, u p5 je to također učinjeno, ali vrlo sažeto.

Ali prvo..

Minimalna postavka okruženja za razvoj JavaScripta

preuzimanje datoteka

p5.min.js i držite ga jedno uz drugo.

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

skica.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 pregledniku ovako:

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

funkcija postavljanja je inicijalizacija, izvršava se jednom, u njoj kreiramo platno, t.j.područje gdje ćemo nacrtati točku.window.innerWidth, window.innerHeight

je širina i visina ekrana, t.j.definiramo platno preko cijelog zaslona i da, HTML također ima vrlo važan stil za to

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

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

Općenito, kod za crtanje točke je vrlo jednostavan:

point(10,10)

i to je to!

Međutim, naš je kod nešto veći

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

pozadina crna

bijela zvijezda

debljina točke 10

i crtamo ga u središtu okomitog i horizontalnog.

Pa... nacrtali smo točku na platnu, sve je kako treba, ali mogli bismo je čak nacrtati na čistom HTML-u bez ikakvog 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 gotovo isti

Da, u HTML-u je prilično lako nacrtati nešto u sredini, ali da biste dodali animacije, a još više zdravu interaktivnost, morat ćete razmišljati prema principima CSS-a.Iako je to prilično zanimljiv zadatak.Samo jedna elementarna stvar sve to ubija, u CSS-u nema slučajnih brojeva, to će ubiti sve naše pokušaje u budućnosti, zbog čega ću manje preferirati ovaj smjer.

Ako zamislim da želim napraviti zvjezdano nebo na golom CSS-u, onda mi neće sve uspjeti, jerzvijezde bi se trebale pojaviti na slučajnim pozicijama, 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 razumjeti!



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