JavaScript: disegna un punto

Impariamo come disegnare un punto in JavaScript in un browser.. non è tecnicamente difficile, ma solo per coloro che armeggiano e per coloro che non sono preparati a disegnare un punto su Internet - questo è ovviamente un intero risultato.

Ci sono molti modi per disegnare un punto, diamo un'occhiata a loro

Costruttori di giochi



Usando Unity/Godot/microStudio o uno qualsiasi delle migliaia di costruttori di giochi.. creeranno tutti del codice in un modo o nell'altro che sarà JavaScript o Webassembly, e ci mostreranno comunque il punto.Non ci interessa questo percorso.non capiremo davvero cosa sta succedendo, il controllo sul codice sarà minimo e illeggibile nel codice sorgente, inoltre è enorme.

Framework JavaScript

Questo percorso dei Jedi è il più vicino possibile a noi, perché.il nostro codice non sarà grande e chiaro come il giorno, non astrarremo molto, non aumenteremo molto il nostro codice con le librerie.Anche il controllo del codice sarebbe fantastico

JavaScript puro

Questa è ovviamente la via dei Jedi.Il codice è il più complicato possibile, il massimo controllo delle cose che, per così dire, non ha bisogno di essere controllato.I codici sorgente sono i più minimi e con la conoscenza di JavaScript golimy, possiamo tranquillamente andare a cercare un lavoro, perché.abbiamo bisogno di queste persone.

Ma il nostro compito non è trovare un lavoro, ma disegnare un punto in modo semplice e facile.Il nostro vettore è velocità e flessibilità.

Ho scelto la libreria

p5js per disegnare un punto.Non è solo questo, ovviamente, se il compito fosse quello di disegnare un punto e basta, ovviamente, tutto dovrebbe essere fatto in JavaScript nudo, ma lo sto facendo in prospettiva, .k.poi io e te faremo altre cose che sembreranno fantastiche, e per questo abbiamo bisogno di un buon strumento.Uno di questi è p5js.

In golim JavaScript, dobbiamo creare una tela per definire le funzioni di inizializzazione e ridisegno, in p5 anche questo viene fatto, ma in modo molto conciso.

Ma prima..

Configurazione minima dell'ambiente per lo sviluppo JavaScript

Scaricamento

p5.min.js e tienilo fianco a fianco.

come questo

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

Questo si aprirà nel tuo browser in questo modo:

Bene, l'HTML è comprensibile, ma che tipo di codice JavaScript è questo?

la funzione di configurazione è l'inizializzazione, viene eseguita una volta, in essa creiamo una tela, ad es.area dove disegneremo un punto.window.innerWidth, window.innerHeight

è la larghezza e l'altezza dello schermo, ad es.definiamo una tela a schermo intero e sì, l'HTML ha uno stile molto importante anche per questo

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

Non abbiamo bisogno di inizializzare nient'altro, dobbiamo solo disegnare un punto.Guarda il principio qui .. la funzione di disegno viene eseguita, ad esempio, 60 volte al secondo e 60 volte al secondo disegneremo il nostro punto .. sembrerebbe che sia stupido, dobbiamo solo disegnare un punto e questo è esso, ma in futuro sarà la base per tutta l'animazione generale.

In generale, il codice per disegnare un punto è estremamente semplice:

point(10,10)

e basta!

Tuttavia, il nostro codice è leggermente più grande

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

sfondo nero

stella bianca

spessore del punto 10

e lo disegniamo al centro della verticale e dell'orizzontale.

Bene.. abbiamo disegnato un punto sulla tela, tutto è come dovrebbe essere, ma potremmo anche disegnarlo su puro HTML senza JavaScript.. Come sarebbe?

Lo rende elementare e ancora più semplice, ma i principi sono completamente diversi, ecco il codice finale per disegnare un quadrato al centro dello schermo

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

Il risultato è quasi lo stesso

Sì, è abbastanza facile disegnare qualcosa al centro in HTML, ma per aggiungere animazioni, e ancor di più un sano interattivo, dovrai pensare secondo i principi dei CSS.Anche se è un compito piuttosto interessante.Solo una cosa elementare uccide tutto questo, non ci sono numeri casuali nei CSS, questo ucciderà tutti i nostri tentativi in ​​futuro, motivo per cui darò meno preferenza a questa direzione.

Se immagino di voler creare un cielo stellato su CSS nudo, allora tutto non funzionerà per me, perchéle stelle dovrebbero apparire in posizioni casuali e, se hanno coordinate precreate, non sarà così bello e non così semplice, perché puoi scrivere un generatore di numeri casuali in CSS, ma tale codice sembrerà completamente brutto, illeggibile e difficile da capire!



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