JavaScript: chora nukta

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

Wajenzi wa mchezo



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.

Mifumo ya JavaScript

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

JavaScript Safi

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!





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