JavaScript: narišite piko

Naučimo se risati točko v JavaScriptu v brskalniku.. tehnično ni težko, ampak samo za tiste, ki se pomikajo, in za tiste, ki niso pripravljeni narisati točke na internetu - to je seveda cel dosežek.

Obstaja veliko načinov za risanje točke, poglejmo si jih

Konstruktorji iger



Z uporabo Unity/Godot/microStudio ali katerega koli od tisočih graditeljev iger bodo vsi tako ali drugače ustvarili neko kodo, ki bo JavaScript ali Webassembly, in nam še vedno pokaže bistvo.Ta pot nas ne zanima.ne bomo zares razumeli, kaj se dogaja, nadzor nad kodo bo minimalen in neberljiv v izvorni kodi, poleg tega je ogromen.

Ogrodje JavaScript

Ta Jedijeva pot nam je čim bližje, ker.naša koda ne bo velika in jasna kot dan, ne bomo veliko abstrahirali, ne bomo močno povečali naše kode s knjižnicami.Tudi nadzor kode bi bil odličen

Čisti JavaScript

To je seveda pot Jedijev.Koda je čim bolj zapletena, maksimalni nadzor nad stvarmi, ki jih tako rekoč ni treba nadzorovati.Izvorne kode so najbolj minimalne in z znanjem golimega JavaScripta se lahko kar varno odpravimo po službo, ker.take ljudi potrebujemo.

A naša naloga ni najti zaposlitve, ampak na preprost in enostaven način zarisati piko na i.Naš vektor sta hitrost in fleksibilnost.

Izbrala sem knjižnico

p5js narisati piko.Ne gre seveda samo za to, če bi bila naloga narisati točko in to je to, bi bilo seveda vse treba narediti v golem JavaScriptu, ampak to delam v perspektivi, .k.potem bova ti in jaz naredila druge stvari, ki bodo videti neverjetno, in za to potrebujemo dobro orodje.Eden izmed njih je p5js.

V golim JavaScriptu moramo ustvariti platno za definiranje funkcij inicializacije in ponovnega risanja, v p5 je tudi to storjeno, vendar zelo jedrnato.

Ampak najprej..

Minimalna nastavitev okolja za razvoj JavaScript

Prenesi

p5.min.js in ga hranite drug ob drugem.

Všečkaj 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>

skica.js

    function setup() {
    createCanvas(window.innerWidth, window.innerHeight);
    }

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

Posledično se bo vaš brskalnik odprl takole

No, HTML je razumljiv, toda kakšna JavaScript koda je to?

funkcija nastavitve je inicializacija, izvede se enkrat, v njej ustvarimo platno, t.j.območje, kjer bomo narisali točko.window.innerWidth, window.innerHeight

je širina in višina zaslona, ​​tj.definiramo celozaslonsko platno in da, HTML ima tudi za to zelo pomemben slog

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

Ničesar drugega nam ni treba inicializirati, samo narisati moramo piko.Poglejte si načelo tukaj .. funkcija risanja se izvede na primer 60-krat na sekundo in 60-krat na sekundo bomo narisali svojo točko .. zdi se, da je to neumno, samo točko moramo narisati in to je to pa bo v prihodnosti osnova za splošno vso animacijo.

Na splošno je koda za risanje točke izjemno preprosta:

point(10,10)

in vse!

Vendar je naša koda nekoliko večja

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

črno ozadje

bela zvezda

debelina pike 10

in ga narišemo v središču navpične in vodoravne.

No.. na platno smo narisali piko, vse je kot mora biti, lahko pa bi jo narisali celo na čisti HTML brez JavaScripta.. Kako bi to izgledalo?

To je elementarno in še lažje, vendar so načela popolnoma drugačna, tukaj je končna koda za risanje kvadrata na sredini zaslona

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

Da, v HTML-ju je precej enostavno narisati nekaj v središču, a če želite dodati animacije in še bolj zdravo interaktivno, boste morali razmišljati po načelih CSS.Čeprav je to precej zanimiva naloga.Samo ena elementarna stvar ubije vse to, v CSS-ju ni naključnih številk, to bo uničilo vse naše poskuse v prihodnosti, zato bom tej smeri dajal manj prednosti.

Če si predstavljam, da želim narediti zvezdnato nebo na golem CSS, potem mi ne bo vse šlo, kerzvezde naj se pojavljajo na naključnih pozicijah, in če imajo vnaprej ustvarjene koordinate, ne bo tako lepo in ne tako preprosto, saj lahko v CSS napišete generator naključnih števil, vendar bo takšna koda videti popolnoma grda, neberljiva in težko berljiva. razumeti!





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