JavaScript: iġbed tikka

Ejja nitgħallmu kif tiġbed punt fil-JavaScript f'browser.. mhuwiex teknikament diffiċli, iżda biss għal dawk li jgergru, u għal dawk li mhumiex lesti li jiġbed punt fuq l-Internet - dan naturalment huwa kisba sħiħa.

Hemm ħafna modi kif tiġbed punt, ejja nħarsu lejhom

Kostrutturi tal-logħob



Bl-użu ta 'Unity/Godot/microStudio jew kwalunkwe mill-eluf ta' bennejja tal-logħob.. kollha se joħolqu xi kodiċi b'xi mod jew ieħor li se jkun JavaScript jew Webassembly, u xorta juruna l-punt.M’aħniex interessati f’din it-triq.aħna mhux se nifhmu verament x'qed jiġri, il-kontroll fuq il-kodiċi se jkun minimu u ma jinqarax fil-kodiċi tas-sors, minbarra li huwa enormi.

Oqfsa JavaScript

Din it-triq tal-Jedi hija kemm jista 'jkun qrib tagħna, għaliex.il-kodiċi tagħna mhux se jkun kbir u ċar daqs il-jum, mhux se nistratta ħafna, mhux se nżidu ħafna l-kodiċi tagħna bil-libreriji.Il-kontroll tal-kodiċi jkun kbir ukoll

JavaScript pur

Dan huwa naturalment il-mod tal-Jedi.Il-kodiċi huwa ikkumplikat kemm jista 'jkun, il-kontroll massimu ta' affarijiet li, kif kien, m'għandux għalfejn jiġi kkontrollat.Il-kodiċijiet tas-sors huma l-aktar minimi u bl-għarfien ta 'Golimy JavaScript, nistgħu biss sikur tmur biex tikseb impjieg, minħabba.għandna bżonn nies bħal dawn.

Imma l-kompitu tagħna mhuwiex li nsibu xogħol, iżda li niġbed tikka b'mod sempliċi u faċli.Il-vettur tagħna huwa l-veloċità u l-flessibilità.

Għażilt il-librerija

p5js biex tiġbed tikka.Mhuwiex biss li, ovvjament, jekk il-kompitu kien li jiġbed punt u dak hu, ovvjament, kollox ikollu jsir b'JavaScript vojt, iżda qed nagħmel dan f'perspettiva, .k.allura jien u int se nagħmlu affarijiet oħra li jidhru tal-għaġeb, u għal dan għandna bżonn għodda tajba.Wieħed minnhom huwa p5js.

Fil-golim JavaScript, għandna bżonn noħolqu tila biex niddefinixxu l-funzjonijiet ta 'inizjalizzazzjoni u tfassil mill-ġdid, f'p5 dan isir ukoll, iżda b'mod konċiż ħafna.

Imma l-ewwel..

Setup ta' Ambjent Minimu għall-Iżvilupp ta' JavaScript

Niżżel

p5.min.js u żommu ħdejn xulxin.

bħal dan

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

Bħala riżultat, il-browser tiegħek se jiftaħ hekk

Ukoll, HTML jinftiehem, imma x'tip ta 'kodiċi JavaScript huwa dan?

il-funzjoni tas-setup hija l-inizjalizzazzjoni, hija esegwita darba, fiha noħolqu kanvas, i.e.żona fejn se niġbdu punt.window.innerWidth, window.innerHeight

hija l-wisa 'u l-għoli tal-iskrin, i.e.aħna niddefinixxu kanvas full-screen u iva, l-HTML għandu stil importanti ħafna għal dan ukoll

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

Больше инициализировать нам ничего не надо,а просто надо нарисовать точку. Тут смотрите какой принцип.. функция draw выполняется например 60 раз в секунду, и 60 раз в секунду мы будем рисовать нашу точку.. казалось бы что это тупо, нам же просто точку надо нарисовать и все, но в дальнейшем это будет основа вообще для всей анимации.

Вообще код рисования точки крайне прост:

point(10,10)

и все !

Однако наш код немного больше

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

фон черный

звезда белая

толщина точки 10

и рисуем мы ее по центру вертикали и горизонтали.

Что же.. мы нарисовали точку на канвасе, все как полагается, но но мы могли вообще нарисовать ее и на чистом HTML без всяких JavaScript.. Как это бы выглядело ?

Делает это элементарно и даже проще, но принципы совсем другие, вот конечный код рисования уже квадратика в центре экрана

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

Результат почти тот же

Iva, huwa pjuttost faċli li tiġbed xi ħaġa fiċ-ċentru f'HTML, iżda sabiex iżżid animazzjonijiet, u aktar u aktar interattiva sane, ser ikollok taħseb skond il-prinċipji tas-CSS.Għalkemm huwa kompitu pjuttost interessanti.Ħaġa waħda elementari biss toqtol dan kollu, m'hemm l-ebda numri każwali fis-CSS, dan se joqtol it-tentattivi kollha tagħna fil-futur, u huwa għalhekk li se nagħti inqas preferenza lil din id-direzzjoni.

Jekk nimmaġina li rrid nagħmel sema stilla fuq CSS vojt, allura kollox mhux se jirnexxili, għaxstilel għandhom jidhru f'pożizzjonijiet każwali, u jekk ikollhom koordinati maħluqa minn qabel, mhux se jkun daqshekk sabiħ u mhux daqshekk sempliċi, għaliex tista 'tikteb ġeneratur ta' numri bl-addoċċ f'CSS, iżda kodiċi bħal dan jidher kompletament ikrah, ma jinqarax u diffiċli biex tifhem!



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