JavaScript: uzzīmējiet punktu

Mācīsimies uzzīmēt punktu JavaScript pārlūkprogrammā.. tas nav tehniski sarežģīti, bet tikai tiem, kas skraida, un tiem, kas nav gatavi zīmēt punktu internetā - tas, protams, ir vesels sasniegums.

Ir daudz veidu, kā uzzīmēt punktu, apskatīsim tos

Spēļu konstruktori



Izmantojot Unity/Godot/microStudio vai kādu no tūkstošiem spēļu veidotāju.. tie visi vienā vai otrā veidā izveidos kādu kodu, kas būs JavaScript vai Webassembly, un tomēr parādīs mums būtību.Mūs šis ceļš neinteresē.īsti nesapratīsim, kas notiek, kontrole pār kodu būs minimāla un avota kodā neizlasāma, turklāt milzīga.

JavaScript ietvari

Šis džedaju ceļš mums ir pēc iespējas tuvāks, jo.mūsu kods nebūs liels un skaidrs kā diena, mēs daudz neabstraktēsim, mēs ļoti nepalielināsim savu kodu ar bibliotēkām.Arī koda kontrole būtu lieliska

Tīrs JavaScript

Tas, protams, ir Jedi veids.Kods ir pēc iespējas sarežģītāks, maksimāla kontrole pār lietām, kuras it kā nav jākontrolē.Pirmkodi ir minimālākie un ar golimy JavaScript zināšanām varam vienkārši droši doties dabūt darbu, jo.mums tādi cilvēki ir vajadzīgi.

Bet mūsu uzdevums nav atrast darbu, bet vienkārši un viegli uzzīmēt punktu.Mūsu vektors ir ātrums un elastība.

Es izvēlējos bibliotēku

p5js lai uzzīmētu punktu.Tas nav tikai tas, protams, ja uzdevums būtu uzzīmēt punktu un viss, protams, viss būtu jādara tukšā JavaScript, bet es to daru perspektīvā, .k.tad jūs un es darīsim citas lietas, kas izskatīsies lieliski, un šim nolūkam mums ir nepieciešams labs rīks.Viens no tiem ir p5js.

Golim JavaScript mums ir jāizveido audekls, lai definētu inicializācijas un pārzīmēšanas funkcijas, p5 tas arī tiek darīts, bet ļoti kodolīgi.

Bet vispirms..

Minimālā vides iestatīšana JavaScript izstrādei

Lejupielādēt

p5.min.js un turiet to blakus.

kā šis

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

Tas jūsu pārlūkprogrammā tiks atvērts šādi:

Nu, HTML ir saprotams, bet kas tas par JavaScript kodu?

iestatīšanas funkcija ir inicializācija, tā tiek izpildīta vienu reizi, tajā mēs veidojam audeklu, t.i.apgabals, kurā mēs uzzīmēsim punktu.logs.innerWidth, logs.innerHeight

ir ekrāna platums un augstums, t.i.mēs definējam pilnekrāna audeklu, un jā, arī HTML ir ļoti svarīgs stils

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

Mums nekas cits nav jāinicializē, mums vienkārši jāuzzīmē punkts.Paskaties šeit principu .. zīmēšanas funkcija tiek izpildīta, piemēram, 60 reizes sekundē, un 60 reizes sekundē mēs uzzīmēsim savu punktu.. šķiet, ka tas ir stulbi, mums vienkārši jāuzzīmē punkts un tas ir to, bet turpmāk tas būs pamats vispārējai visai animācijai.

Kopumā punkta zīmēšanas kods ir ļoti vienkāršs:

point(10,10)

un tas arī viss!

Tomēr mūsu kods ir nedaudz lielāks

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

fons melns

balta zvaigzne

punkta biezums 10

un mēs to uzzīmējam vertikālā un horizontālā centrā.

Nu.. uzzīmējām punktu uz audekla, viss ir kā nākas, bet varētu pat uz tīra HTML bez jebkāda JavaScript.. Kā tas izskatītos?

Tas padara to elementāru un pat vienkāršāku, taču principi ir pilnīgi atšķirīgi, šeit ir galīgais kods kvadrāta zīmēšanai ekrāna centrā

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

Rezultāts ir gandrīz tāds pats

Jā, uzzīmēt kaut ko centrā HTML ir diezgan vienkārši, taču, lai pievienotu animācijas un vēl jo vairāk saprātīgu interaktīvu, būs jādomā pēc CSS principiem.Lai gan tas ir diezgan interesants uzdevums.Tikai viena elementāra lieta to visu nogalina, CSS nav nejaušu skaitļu, tas nogalinās visus mūsu mēģinājumus nākotnē, tāpēc es došu mazāk priekšroku šim virzienam.

Ja es iedomājos, ka gribu uz plika CSS uztaisīt zvaigžņotas debesis, tad man viss neizdosies, jozvaigznēm vajadzētu parādīties nejaušās pozīcijās un, ja tām būs iepriekš izveidotas koordinātes, tas nebūs tik skaisti un ne tik vienkārši, jo CSS var ierakstīt nejaušu skaitļu ģeneratoru, bet šāds kods izskatīsies pilnīgi neglīts, nesalasāms un grūti uztverams. saproti!



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