JavaScript: traccia un puntu

Amparate à disegnà un puntu in JavaScript in un navigatore.. ùn hè micca tecnicumente difficiule, ma solu per quelli chì fumble, è per quelli chì ùn sò micca disposti à disegnà un puntu in Internet - questu hè sicuru un successu sanu.

Ci hè parechje manere di disegnà un puntu, fighjemu

Custruttori di ghjoculi



Utilizendu Unity/Godot/microStudio o qualsiasi di i millaie di custruttori di ghjoculi .. tutti creanu qualchì codice in un modu o un altru chì serà JavaScript o Webassembly, è sempre ci mostranu u puntu.Ùn ci interessa micca sta strada.ùn avemu micca veramente capisce ciò chì succede, u cuntrollu di u codice serà minimu è illegibile in u codice fonte, in più hè enormu.

Frameworks JavaScript

Questa strada di u Jedi hè u più vicinu à noi, perchè.u nostru codice ùn serà micca grande è chjaru cum'è ghjornu, ùn avemu micca astrattu assai, ùn avemu micca cresce assai u nostru codice cù biblioteche.U cuntrollu di u codice seria ancu grande

Puru JavaScript

Questu hè di sicuru u modu di i Jedi.U codice hè u più cumplicatu pussibule, u cuntrollu massimu di e cose chì, per esse, ùn deve micca esse cuntrullatu.I codici surghjenti sò i più minimi è cù a cunniscenza di u JavaScript golimy, pudemu solu andà in modu sicuru per avè un travagliu, perchè.avemu bisognu di tali persone.

Ma u nostru compitu ùn hè micca di truvà un travagliu, ma di disegnà un puntu in una manera simplice è faciule.U nostru vettore hè rapidità è flessibilità.

Aghju sceltu a biblioteca

p5js per disegnà un puntu.Ùn hè micca solu chì, sicuru, se u compitu era di disegnà un puntu è questu hè, sicuru, tuttu avissi da esse fattu in JavaScript nudu, ma aghju fattu questu in perspettiva, .k.tandu voi è eiu faremu altre cose chì pareranu maravigghiusu, è per questu avemu bisognu di un bonu strumentu.Unu di elli hè p5js.

In golim JavaScript, avemu bisognu di creà un canvas per definisce e funzioni di inizializazione è redrawing, in p5 questu hè ancu fattu, ma assai cuncisu.

Ma prima..

Configurazione minima di l'ambiente per u sviluppu JavaScript

Scaricate

p5.min.js è tene lu fiancu à fiancu.

cum'è què

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

Questu si apre in u vostru navigatore cusì:

Ebbè, HTML hè comprensibile, ma chì tipu di codice JavaScript hè questu?

a funzione di cunfigurazione hè l'inizializazione, hè eseguita una volta, in questu creamu un canvas, i.e.zona induve avemu da tracciari un puntu.window.innerWidth, window.innerHeight

hè a larghezza è l'altezza di u screnu, i.e.definiscemu un canvas full-screen è iè, l'HTML hà un stile assai impurtante per questu ancu

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

Ùn avemu micca bisognu di inizializà nunda d'altru, avemu solu bisognu di disegnà un puntu.Fighjate à u principiu quì .. a funzione di disegnu hè eseguita, per esempiu, 60 volte per seconda, è 60 volte per seconda tiraremu u nostru puntu .. Sembra chì questu hè stupidu, avemu solu bisognu di disegnà un puntu è questu hè lu, ma in u futuru serà a basa per tutti l'animazione generale.

In generale, u codice per disegnu un puntu hè assai simplice:

point(10,10)

è basta !

Tuttavia, u nostru codice hè un pocu più grande

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

fondu neru

stella bianca

spessore di punti 10

è avemu tiratu in u centru di a verticale è horizontale.

Ebbè.. avemu disegnatu un puntu nantu à a tela, tuttu hè cumu si deve esse, ma pudemu ancu disegnà nantu à HTML puru senza JavaScript.

Face elementari è ancu più faciule, ma i principii sò completamente diffirenti, quì hè u codice finale per disegnu un quadru in u centru di u screnu.

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

U risultatu hè quasi u listessu

Iè, hè abbastanza faciule di disegnà qualcosa in u centru in HTML, ma per aghjunghje animazioni, è ancu più un interattivu sanu, avete da pensà à i principii di CSS.Ancu s'ellu hè un compitu assai interessante.Solu una cosa elementaria uccide tuttu questu, ùn ci sò micca numeri aleatorii in CSS, questu ucciderà tutti i nostri tentativi in ​​u futuru, per quessa, daraghju menu preferenza à sta direzzione.

Se m'imagine chì vogliu fà un celu stellatu nantu à CSS nudu, allora tuttu ùn funziona micca per mè, perchèstelle duveranu apparisce in pusizioni aleatorii, è s'ellu anu pre-creatu coordenate, ùn serà micca cusì bella è micca cusì simplice, perchè pudete scrive un generatore di numeri aleatorii in CSS, ma un tali codice parerà completamente bruttu, illeggibile è difficiuli di fà. capisce !



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