Hebu tujifunze jinsi ya kuteka hatua katika JavaScript katika kivinjari .. si vigumu kitaalam, lakini kwa wale wanaopuuza tu, na kwa wale ambao hawajajiandaa kuteka hatua kwenye mtandao - bila shaka hii ni mafanikio yote.
Kuna njia nyingi za kuchora hatua, wacha tuziangalie
Kwa kutumia Unity/Godot/microStudio au yoyote kati ya maelfu ya waundaji wa mchezo.. wote wataunda msimbo fulani kwa njia moja au nyingine ambao utakuwa JavaScript au Webassembly, na bado watatuonyesha uhakika.Hatupendezwi na njia hii.hatutaelewa kile kinachotokea, udhibiti wa nambari itakuwa ndogo na isiyoweza kusomeka katika msimbo wa chanzo, kando na ni kubwa.
Njia hii ya Jedi ni karibu iwezekanavyo kwetu, kwa sababu.nambari yetu haitakuwa kubwa na wazi kama siku, hatutafikiria sana, hatutaongeza sana nambari zetu na maktaba.Udhibiti wa kanuni ungekuwa mzuri pia
Hii bila shaka ni njia ya Jedi.Kanuni ni ngumu iwezekanavyo, udhibiti wa juu wa mambo ambayo, kama ilivyokuwa, hauhitaji kudhibitiwa.Nambari za chanzo ni chache zaidi na kwa ujuzi wa JavaScript ya golimy, tunaweza kwenda tu kwa usalama kupata kazi, kwa sababu.tunahitaji watu kama hao.
Lakini kazi yetu si kutafuta kazi, lakini kuchora dot kwa njia rahisi na rahisi.Vekta yetu ni kasi na kubadilika.
Nilichagua maktaba
p5js kuchora nukta.Sio hivyo tu, bila shaka, ikiwa kazi ilikuwa kuchora uhakika na ndivyo hivyo, bila shaka, kila kitu kingepaswa kufanywa kwa JavaScript tupu, lakini ninafanya hili kwa mtazamo, .k.basi wewe na mimi tutafanya mambo mengine ambayo yataonekana ya kushangaza, na kwa hili tunahitaji chombo kizuri.Mmoja wao ni p5js.Katika JavaScript ya golim, tunahitaji kuunda turubai ili kufafanua uanzishaji na utendakazi wa kuchora upya, katika p5 hii inafanywa pia, lakini kwa ufupi sana.
Lakini kwanza..
Kiwango cha Chini cha Usanidi wa Mazingira kwa Ukuzaji wa JavaScript
Pakua
p5.min.js na kuiweka upande kwa upande.kama hii
index.html
<html>
<head>
<script src="p5.min.js"></script>
<script src="sketch.js"></script>
</head>
<body style="margin: 0px;">
<main>
</main>
</body>
</html>
mchoro.js
function setup() {
createCanvas(window.innerWidth, window.innerHeight);
}
function draw() {
background(0);
stroke('white');
strokeWeight(10);
point(window.innerWidth/2,window.innerHeight/2);
}
Kwa hivyo, kivinjari chako kitafungua kama hii
Kweli, HTML inaeleweka, lakini hii ni msimbo wa JavaScript wa aina gani?
kazi ya kuanzisha ni kuanzisha, inatekelezwa mara moja, ndani yake tunaunda turuba, i.e.eneo ambalo tutachora hoja.dirisha.innerWidth, dirisha.innerHeight
ni upana na urefu wa skrini, i.e.tunafafanua turubai ya skrini nzima na ndiyo, HTML ina mtindo muhimu sana kwa hili pia
<body style="margin: 0px;">
Hatuhitaji kuanzisha kitu kingine chochote, tunahitaji tu kuchora nukta.Angalia kanuni hapa .. kazi ya kuteka inatekelezwa, kwa mfano, mara 60 kwa pili, na mara 60 kwa sekunde tutachora hoja yetu .. inaweza kuonekana kuwa hii ni ya kijinga, tunahitaji tu kuteka hatua na hiyo ni. yake, lakini katika siku zijazo itakuwa msingi kwa ujumla uhuishaji wote.
Kwa ujumla, nambari ya kuchora hatua ni rahisi sana:
point(10,10)
na wote!
Walakini, nambari yetu ni kubwa kidogo
background(0);
stroke('white');
strokeWeight(10);
point(window.innerWidth/2,window.innerHeight/2);
mandharinyuma nyeusi
nyota nyeupe
unene wa nukta 10
na tunachora katikati ya wima na usawa.
Vizuri .. tulichora nukta kwenye turubai, kila kitu ni kama inavyopaswa kuwa, lakini tunaweza hata kuchora kwenye HTML safi bila JavaScript yoyote.. Je!
Inafanya iwe ya msingi na hata rahisi, lakini kanuni ni tofauti kabisa, hapa kuna nambari ya mwisho ya kuchora mraba katikati ya skrini.
<!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>
Matokeo yake ni karibu sawa
Ndio, ni rahisi sana kuchora kitu katikati katika HTML, lakini ili kuongeza uhuishaji, na hata zaidi maingiliano ya busara, itabidi ufikirie kulingana na kanuni za CSS.Ingawa ni kazi ya kuvutia sana.Jambo moja tu la msingi linaua haya yote, hakuna nambari za nasibu katika CSS, hii itaua majaribio yetu yote katika siku zijazo, ndiyo sababu nitatoa upendeleo mdogo kwa mwelekeo huu.
Ikiwa nitafikiria kuwa nataka kufanya anga yenye nyota kwenye CSS tupu, basi kila kitu hakitanifanyia kazi, kwa sababunyota zinapaswa kuonekana katika nafasi za nasibu, na ikiwa zina kuratibu zilizoundwa hapo awali, haitakuwa nzuri sana na sio rahisi sana, kwa sababu unaweza kuandika jenereta ya nambari isiyo ya kawaida katika CSS, lakini nambari kama hiyo itaonekana kuwa mbaya kabisa, isiyoweza kusomeka na ngumu. kuelewa!