JavaScript: desenați un punct

Să învățăm cum să desenăm un punct în JavaScript într-un browser.. nu este dificil din punct de vedere tehnic, ci doar pentru cei care bâjbâie și pentru cei care nu sunt pregătiți să deseneze un punct pe Internet - aceasta este, desigur, o întreagă realizare.

Există multe modalități de a desena un punct, să ne uităm la ele

Constructori de jocuri



Folosind Unity/Godot/microStudio sau oricare dintre miile de creatori de jocuri.. toți vor crea un cod într-un fel sau altul care va fi JavaScript sau Webassembly și ne vor arăta în continuare ideea.Nu ne interesează această cale.nu vom înțelege cu adevărat ce se întâmplă, controlul asupra codului va fi minim și imposibil de citit în codul sursă, în plus este uriaș.

Cadre JavaScript

Această cale a Jedi este cât se poate de aproape de noi, pentru că.codul nostru nu va fi mare și clar ca ziua, nu vom abstrage prea mult, nu ne vom mări foarte mult codul cu biblioteci.Controlul codului ar fi grozav

JavaScript pur

Acesta este, desigur, calea Jedi.Codul este cât se poate de complicat, controlul maxim al lucrurilor care, parcă, nu trebuie controlate.Codurile sursă sunt cele mai minime și cu cunoștințele despre JavaScript golimy, putem merge în siguranță pentru a obține un loc de muncă, deoarece.avem nevoie de astfel de oameni.

Dar sarcina noastră nu este să găsim un loc de muncă, ci să desenăm un punct într-un mod simplu și ușor.Vectorul nostru este viteza și flexibilitatea.

Eu am ales biblioteca

p5js a desena un punct.Nu este doar că, desigur, dacă sarcina ar fi să atragă un punct și asta este, desigur, totul ar trebui făcut în JavaScript simplu, dar fac asta în perspectivă, .k.atunci tu și cu mine vom face alte lucruri care vor arăta uimitor și pentru asta avem nevoie de un instrument bun.Unul dintre ele este p5js.

În golim JavaScript, trebuie să creăm o pânză pentru a defini funcțiile de inițializare și redesenare, și în p5 acest lucru se face, dar foarte concis.

Dar mai intai..

Configurarea minimă a mediului pentru dezvoltarea JavaScript

Descarca

p5.min.js și ține-l unul lângă altul.

asa

index.html

    <html>
    <head>
        <script src="p5.min.js"></script>
        <script src="sketch.js"></script>
    </head>
    <body style="margin: 0px;">
        <main>
        </main>
    </body>
    </html>

schiță.js

    function setup() {
    createCanvas(window.innerWidth, window.innerHeight);
    }

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

Drept urmare, browserul dumneavoastră se va deschide astfel

Ei bine, HTML este de înțeles, dar ce fel de cod JavaScript este acesta?

funcția de setare este inițializare, se execută o dată, în ea creăm o pânză, adică.zona în care vom desena un punct.window.innerWidth, window.innerHeight

este lățimea și înălțimea ecranului, adicădefinim o pânză pe ecran complet și da, HTML-ul are un stil foarte important și pentru asta

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

Nu trebuie să inițializam nimic altceva, trebuie doar să desenăm un punct.Uită-te la principiul aici .. funcția de desen se execută, de exemplu, de 60 de ori pe secundă și de 60 de ori pe secundă ne vom trage punctul .. s-ar părea că asta este o prostie, trebuie doar să desenăm un punct și asta este aceasta, dar în viitor va fi baza pentru toate animațiile generale.

În general, codul pentru desenarea unui punct este extrem de simplu:

point(10,10)

si tot!

Cu toate acestea, codul nostru este puțin mai mare

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

fundal negru

stea alba

grosimea punctului 10

și o desenăm în centrul vertical și orizontal.

Ei bine... am desenat un punct pe pânză, totul este așa cum ar trebui să fie, dar am putea chiar să-l desenăm pe HTML pur fără JavaScript.. Cum ar arăta?

O face elementară și chiar mai ușoară, dar principiile sunt complet diferite, iată codul final pentru desenarea unui pătrat în centrul ecranului

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

Rezultatul este aproape același

Da, este destul de ușor să desenezi ceva în centru în HTML, dar pentru a adăuga animații și cu atât mai mult un interactiv sănătos, va trebui să gândești după principiile CSS.Deși este o sarcină destul de interesantă.Un singur lucru elementar omoara toate astea, nu există numere aleatorii în CSS, acest lucru va ucide toate încercările noastre în viitor, motiv pentru care voi acorda mai puțină preferință acestei direcții.

Dacă îmi imaginez că vreau să fac un cer înstelat pe CSS gol, atunci totul nu va merge pentru mine, pentru căstelele ar trebui să apară în poziții aleatorii, iar dacă au coordonate pre-create, nu va fi atât de frumos și nu atât de simplu, deoarece puteți scrie un generator de numere aleatorii în CSS, dar un astfel de cod va arăta complet urât, de necitit și greu de citit. a intelege!



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