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