JavaScript: teiknaðu punkt

Við skulum læra hvernig á að teikna punkt í JavaScript í vafra.. það er ekki tæknilega erfitt, heldur bara fyrir þá sem tuða og fyrir þá sem eru ekki tilbúnir að draga punkt á netinu - þetta er auðvitað heill árangur.

Það eru margar leiðir til að draga punkt, við skulum skoða þær

Leikjasmiðir



Með því að nota Unity/Godot/microStudio eða einhvern af þúsundum leikjasmiða.. þeir munu allir búa til einhvern kóða á einn eða annan hátt sem verður JavaScript eða Webassembly, og sýna okkur samt tilganginn.Við höfum ekki áhuga á þessari leið.við munum í raun ekki skilja hvað er að gerast, stjórn yfir kóðanum verður í lágmarki og ólæsileg í frumkóðann, auk þess sem hann er gríðarlegur.

JavaScript rammar

Þessi leið Jedisins er eins nálægt okkur og hægt er, vegna þess að.Kóðinn okkar verður ekki stór og skýr eins og dagurinn er, við munum ekki draga mikið saman, við munum ekki auka kóðann okkar mikið með bókasöfnum.Kóðastýring væri líka frábær

Hreint JavaScript

Þetta er auðvitað leið Jedi.Kóðinn er eins flókinn og hægt er, hámarks eftirlit með hlutum sem svo að segja þarf ekki að stjórna.Frumkóðarnir eru í lágmarki og með þekkingu á golimy JavaScript getum við bara örugglega farið til að fá vinnu, vegna þess að.við þurfum svona fólk.

En verkefni okkar er ekki að finna vinnu heldur að teikna punkt á einfaldan og auðveldan hátt.Vigur okkar er hraði og sveigjanleiki.

Ég valdi bókasafnið

p5js að teikna punkt.Það er ekki bara það, auðvitað, ef verkefnið væri að draga punkt og það er það, þá þyrfti auðvitað allt að gerast í berum JavaScript, en ég geri þetta í samhengi, .k.þá gerum við þú og ég aðra hluti sem munu líta ótrúlega út og til þess þurfum við gott verkfæri.Einn þeirra er p5js.

Í golim JavaScript þurfum við að búa til striga til að skilgreina frumstillingar- og endurteikningaraðgerðirnar, í p5 er þetta líka gert, en mjög hnitmiðað.

En fyrst..

Lágmarksumhverfisuppsetning fyrir JavaScript þróun

Sækja

p5.min.js og halda því hlið við hlið.

svona

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

Þetta mun opnast í vafranum þínum svona:

Jæja, HTML er skiljanlegt, en hvers konar JavaScript kóða er þetta?

uppsetningaraðgerðin er frumstilling, hún er keyrð einu sinni, í henni búum við til striga, þ.e.svæði þar sem við teiknum punkt.window.innerWidth, window.innerHeight

er breidd og hæð skjásins, þ.e.við skilgreinum striga á öllum skjánum og já, HTML hefur mjög mikilvægan stíl fyrir þetta líka

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

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

Já, það er frekar auðvelt að teikna eitthvað í miðjunni í HTML, en til að bæta við hreyfimyndum, og enn frekar skynsamlegri gagnvirkri, verður þú að hugsa í samræmi við meginreglur CSS.Þó það sé frekar áhugavert verkefni.Aðeins einn grunnþáttur drepur allt þetta, það eru engar handahófskenndar tölur í CSS, þetta mun drepa allar tilraunir okkar í framtíðinni, þess vegna mun ég gefa minni val á þessa stefnu.

Ef ég ímynda mér að ég vilji búa til stjörnubjartan himin á berum CSS, þá mun allt ekki ganga upp fyrir mig, þvístjörnur ættu að birtast í tilviljunarkenndum stöðum og ef þær eru með fyrirfram búnar hnit, þá verður það ekki svo fallegt og ekki svo einfalt, því það er hægt að skrifa slembitölugjafa í CSS, en slíkur kóði mun líta alveg ljótur, ólæsilegur og erfitt að skil!





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