JavaScript: tegne en prikk

La oss lære å tegne et poeng i JavaScript i en nettleser.. det er ikke teknisk vanskelig, men bare for de som famler, og for de som ikke er forberedt på å tegne et poeng på Internett - dette er selvfølgelig en hel prestasjon.

Det er mange måter å tegne et poeng på, la oss se på dem

Spillkonstruktører



Ved å bruke Unity/Godot/microStudio eller noen av de tusenvis av spillbyggere... vil de alle lage en eller annen kode på en eller annen måte som vil være JavaScript eller Webassembly, og fortsatt vise oss poenget.Vi er ikke interessert i denne veien.vi vil egentlig ikke forstå hva som skjer, kontroll over koden vil være minimal og uleselig i kildekoden, dessuten er den enorm.

JavaScript-rammer

Denne Jedi-banen er så nær oss som mulig, fordi.koden vår vil ikke være stor og tydelig, vi vil ikke abstrahere mye, vi vil ikke øke koden vår i stor grad med biblioteker.Kodekontroll ville også vært bra

Ren JavaScript

Dette er selvfølgelig Jediens måte.Koden er så komplisert som mulig, den maksimale kontrollen over ting som så å si ikke trenger å kontrolleres.Kildekodene er de mest minimale og med kunnskap om golimy JavaScript kan vi trygt gå for å få en jobb, fordi.vi trenger slike mennesker.

Men vår oppgave er ikke å finne en jobb, men å tegne en prikk på en enkel og lettvint måte.Vår vektor er hastighet og fleksibilitet.

Jeg valgte biblioteket

p5js å tegne en prikk.Det er ikke bare det, selvfølgelig, hvis oppgaven var å tegne et poeng og det er det, ville selvfølgelig alt måtte gjøres i bare JavaScript, men jeg gjør dette i perspektiv, .k.da vil du og jeg gjøre andre ting som vil se fantastiske ut, og for dette trenger vi et godt verktøy.En av dem er p5js.

I golim JavaScript må vi lage et lerret for å definere initialiserings- og omtegningsfunksjonene, i p5 gjøres dette også, men veldig konsist.

Men først..

Minimum miljøoppsett for JavaScript-utvikling

nedlasting

p5.min.js og hold den side ved side.

som dette

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

Som et resultat vil nettleseren din åpnes slik

Vel, HTML er forståelig, men hva slags JavaScript-kode er dette?

oppsettsfunksjonen er initialisering, den utføres én gang, i den lager vi et lerret, dvs.område hvor vi skal tegne et punkt.vindu.innerBredde, vindu.innerhøyde

er bredden og høyden på skjermen, dvs.vi definerer et fullskjerms lerret og ja, HTML har en veldig viktig stil for dette også

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

Vi trenger ikke initialisere noe annet, vi trenger bare å tegne en prikk.Se på prinsippet her .. tegnefunksjonen utføres for eksempel 60 ganger per sekund, og 60 ganger per sekund vil vi tegne poenget vårt .. det ser ut til at dette er dumt, vi trenger bare å tegne et punkt og det er det, men i fremtiden vil det være grunnlaget for generell all animasjon.

Generelt er koden for å tegne et punkt ekstremt enkel:

point(10,10)

og alt!

Imidlertid er koden vår litt større

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

bakgrunn svart

hvit stjerne

prikktykkelse 10

og vi tegner den i midten av vertikal og horisontal.

Vel.. vi tegnet en prikk på lerretet, alt er som det skal være, men vi kunne til og med tegnet det på ren HTML uten JavaScript. Hvordan ville det se ut?

Det gjør det elementært og enda enklere, men prinsippene er helt annerledes, her er den endelige koden for å tegne en firkant i midten av skjermen

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

Resultatet er nesten det samme

Ja, det er ganske enkelt å tegne noe i sentrum i HTML, men for å legge til animasjoner, og enda mer en fornuftig interaktiv, må du tenke i henhold til prinsippene for CSS.Selv om det er en ganske interessant oppgave.Bare én elementær ting dreper alt dette, det er ingen tilfeldige tall i CSS, dette vil drepe alle forsøkene våre i fremtiden, og det er derfor jeg vil gi mindre preferanse til denne retningen.

Hvis jeg forestiller meg at jeg vil lage en stjernehimmel på bar CSS, så vil ikke alt ordne seg for meg, fordistjerner skal vises i tilfeldige posisjoner, og hvis de har forhåndslagrede koordinater, vil det ikke være så vakkert og ikke så enkelt, fordi du kan skrive en tilfeldig tallgenerator i CSS, men en slik kode vil se helt stygg ut, uleselig og vanskelig å forstå!



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