JavaScript: trase yon pwen

Ann aprann kijan pou trase yon pwen nan JavaScript nan yon navigatè .. li pa teknikman difisil, men sèlman pou moun ki fumble, ak pou moun ki pa prepare yo trase yon pwen sou entènèt la - sa a se nan kou yon siksè antye.

Gen plizyè fason pou trase yon pwen, ann gade yo

Konstriksyon jwèt



Sèvi ak Unity/Godot/microStudio oswa nenpòt nan dè milye de mason jwèt yo.. yo tout pral kreye kèk kòd nan yon fason oswa yon lòt ki pral JavaScript oswa Webassembly, epi yo toujou montre nou pwen an.Nou pa enterese nan chemen sa a.nou p ap reyèlman konprann sa k ap pase, kontwòl sou kòd la pral minim ak lizib nan kòd sous la, san konte li se gwo.

JavaScript Frameworks

Chemen sa a nan Jedi a se osi pre ke posib pou nou, paske.kòd nou an pa pral gwo ak klè tankou jou, nou pa pral abstrè anpil, nou pa pral anpil ogmante kòd nou an ak bibliyotèk.Kontwòl kòd ta bon tou

Pi JavaScript

Sa a se nan kou Jedi a.Kòd la se konplike ke posib, kontwòl maksimòm de bagay sa yo ki, kòm li te, pa bezwen yo dwe kontwole.Kòd sous yo se pi minim la ak konesans nan golimy JavaScript, nou ka jis ale san danje pou jwenn yon travay, paske.nou bezwen moun konsa.

Men, travay nou se pa jwenn yon travay, men trase yon pwen nan yon fason ki senp epi fasil.Vektè nou an se vitès ak fleksibilite.

Mwen te chwazi bibliyotèk la

p5js trase yon pwen.Li pa sèlman sa, nan kou, si travay la te trase yon pwen ak sa a li, nan kou, tout bagay ta dwe fè nan JavaScript fè, men mwen ap fè sa a nan pèspektiv, .k.Lè sa a, ou menm ak mwen pral fè lòt bagay ki pral gade etonan, ak pou sa a nou bezwen yon bon zouti.Youn nan yo se p5js.

Nan golim JavaScript, nou bezwen kreye yon twal pou defini fonksyon yo inisyalizasyon ak redesen, nan p5 sa a se fè tou, men trè kout.

Men avan..

Minimòm Enstalasyon Anviwònman pou Devlopman JavaScript

Telechaje

p5.min.js epi kenbe l kòt a kòt.

tankou sa a

endèks.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);
    }

Kòm yon rezilta, navigatè ou a ap louvri konsa

Oke, HTML se konprann, men ki kalite kòd JavaScript sa a?

fonksyon konfigirasyon an se inisyalizasyon, li egzekite yon fwa, nan li nou kreye yon twal, i.e.zòn kote nou pral trase yon pwen.window.innerWidth, window.innerHeight

se lajè ak wotè ekran an, i.e.nou defini yon twal plen ekran ak repons lan se wi, HTML a gen yon style trè enpòtan pou sa a tou

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

Nou pa bezwen inisyalize nenpòt lòt bagay, nou jis bezwen trase yon pwen.Gade nan prensip la isit la .. se fonksyon an trase egzekite, pou egzanp, 60 fwa pou chak segonn, ak 60 fwa pou chak segonn nou pral trase pwen nou an .. li ta sanble ke sa a se estipid, nou jis bezwen trase yon pwen ak sa a. li, men nan tan kap vini an li pral baz pou jeneral tout animasyon.

An jeneral, kòd pou trase yon pwen trè senp:

point(10,10)

ak tout!

Sepandan, kòd nou an se yon ti kras pi gwo

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

background nwa

etwal blan

epesè pwen 10

epi nou trase li nan sant vètikal la ak orizontal.

Oke.. nou te trase yon pwen sou twal la, tout bagay se jan li ta dwe, men nou ta ka menm trase li sou HTML pi san okenn JavaScript.. Ki sa li ta sanble?

Li fè li elemantè e menm pi fasil, men prensip yo konplètman diferan, isit la se kòd final la pou trase yon kare nan sant ekran an.

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

Rezilta a se prèske menm bagay la

Wi, li se byen fasil trase yon bagay nan sant la nan HTML, men yo nan lòd yo ajoute animasyon, e menm plis konsa yon entèaktif lisid, ou pral oblije panse dapre prensip yo nan CSS.Malgre ke li se byen yon travay enteresan.Se sèlman yon sèl bagay elemantè touye tout bagay sa yo, pa gen okenn nimewo o aza nan CSS, sa a pral touye tout tantativ nou an nan lavni, ki se poukisa mwen pral bay mwens preferans nan direksyon sa a.

Si mwen imajine ke mwen vle fè yon syèl etwal sou CSS vid, Lè sa a, tout bagay pa pral mache byen pou mwen, paskezetwal yo ta dwe parèt nan pozisyon o aza, epi si yo gen kowòdone pre-kreye, li pa pral tèlman bèl epi li pa tèlman senp, paske ou ka ekri yon dèlko nimewo o aza nan CSS, men kòd sa a pral gade konplètman lèd, lizib ak difisil. konprann!





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