JavaScript: dibuixa un punt

Aprenem a dibuixar un punt en JavaScript en un navegador... no és tècnicament difícil, però només per a aquells que no estan preparats per dibuixar un punt a Internet, això és, per descomptat, tot un èxit.

Hi ha moltes maneres de dibuixar un punt, mirem-les

Constructors de jocs



Utilitzant Unity/Godot/microStudio o qualsevol dels milers de creadors de jocs... tots crearan algun codi d'una manera o altra que serà JavaScript o Webassembly, i encara ens mostraran el punt.No ens interessa aquest camí.no entendrem realment què està passant, el control sobre el codi serà mínim i il·legible en el codi font, a més és enorme.

Frameworks de JavaScript

Aquest camí dels Jedi és el més proper possible a nosaltres, perquè.el nostre codi no serà gran i clar com el dia, no abstraurem gaire, no augmentarem molt el nostre codi amb biblioteques.El control del codi també seria fantàstic

JavaScript pur

Aquest és, per descomptat, el camí dels Jedi.El codi és el més complicat possible, el màxim control de coses que, per dir-ho, no cal controlar.Els codis font són els més mínims i amb el coneixement del JavaScript de Golimy, podem anar amb seguretat a buscar feina, perquè.necessitem gent així.

Però la nostra tasca no és trobar feina, sinó dibuixar un punt d'una manera senzilla i fàcil.El nostre vector és la velocitat i la flexibilitat.

Vaig triar la biblioteca

p5js per dibuixar un punt.No és només això, per descomptat, si la tasca fos dibuixar un punt i ja està, per descomptat, tot s'hauria de fer en JavaScript nu, però ho faig en perspectiva, .k.llavors tu i jo farem altres coses que es veuran increïbles, i per això necessitem una bona eina.Un d'ells és p5js.

A golim JavaScript, hem de crear un llenç per definir les funcions d'inicialització i redibuix, a p5 això també es fa, però de manera molt concisa.

Però primer..

Configuració mínima de l'entorn per al desenvolupament de JavaScript

descarregar

p5.min.js i mantenir-lo al costat.

com això

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

Això s'obrirà al vostre navegador així:

Bé, HTML és comprensible, però quin tipus de codi JavaScript és aquest?

la funció de configuració és inicialització, s'executa una vegada, en ella creem un llenç, és a dir.zona on dibuixarem un punt.window.innerWidth, window.innerHeight

és l'amplada i l'alçada de la pantalla, és a dir.definim un llenç de pantalla completa i sí, l'HTML també té un estil molt important per a això

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

No necessitem inicialitzar res més, només cal dibuixar un punt.Mireu el principi aquí .. la funció de dibuix s'executa, per exemple, 60 vegades per segon, i 60 vegades per segon dibuixarem el nostre punt .. Semblaria que això és estúpid, només hem de dibuixar un punt i això és això, però en el futur serà la base de tota l'animació general.

En general, el codi per dibuixar un punt és extremadament senzill:

point(10,10)

i ja està!

Tanmateix, el nostre codi és una mica més gran

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

fons negre

estrella blanca

gruix de punt 10

i el dibuixem al centre de la vertical i l'horitzontal.

Bé... vam dibuixar un punt al llenç, tot és com hauria de ser, però fins i tot podríem dibuixar-lo en HTML pur sense cap JavaScript.. Com seria?

Ho fa elemental i encara més fàcil, però els principis són completament diferents, aquí teniu el codi final per dibuixar un quadrat al centre de la pantalla

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

El resultat és gairebé el mateix

Sí, és bastant fàcil dibuixar alguna cosa al centre en HTML, però per afegir animacions, i més encara una interactiva sana, hauràs de pensar segons els principis de CSS.Encara que és una tasca força interessant.Només una cosa elemental mata tot això, no hi ha números aleatoris en CSS, això matarà tots els nostres intents en el futur, per això donaré menys preferència a aquesta direcció.

Si m'imagino que vull fer un cel estrellat en CSS nu, aleshores tot no em sortirà bé, perquèles estrelles haurien d'aparèixer en posicions aleatòries, i si tenen coordenades pre-creades, no serà tan bonic ni tan senzill, perquè podeu escriure un generador de números aleatoris en CSS, però aquest codi semblarà completament lleig, il·legible i difícil de llegir. entendre!





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