JavaScript: rita en prick

Låt oss lära oss hur man ritar en punkt i JavaScript i en webbläsare.. det är inte tekniskt svårt, utan bara för de som fumlar, och för de som inte är beredda att dra en punkt på Internet - detta är förstås en hel bedrift.

Det finns många sätt att dra en punkt, låt oss titta på dem

Spelkonstruktörer



Genom att använda Unity/Godot/microStudio eller någon av de tusentals spelbyggarna... kommer de alla att skapa någon kod på ett eller annat sätt som kommer att vara JavaScript eller Webassembly, och ändå visa oss poängen.Vi är inte intresserade av denna väg.vi kommer inte riktigt att förstå vad som händer, kontrollen över koden kommer att vara minimal och oläslig i källkoden, dessutom är den enorm.

JavaScript-ramverk

Den här Jedins väg är så nära oss som möjligt, eftersom.vår kod kommer inte att vara stor och tydlig som dagen, vi kommer inte att abstrahera mycket, vi kommer inte att öka vår kod avsevärt med bibliotek.Kodkontroll skulle också vara bra

Ren JavaScript

Detta är naturligtvis Jedins sätt.Koden är så komplicerad som möjligt, den maximala kontrollen över saker som så att säga inte behöver kontrolleras.Källkoderna är de mest minimala och med kunskapen om golimy JavaScript kan vi bara säkert gå för att få ett jobb, eftersom.vi behöver sådana människor.

Men vår uppgift är inte att hitta ett jobb, utan att rita en prick på ett enkelt och lättsamt sätt.Vår vektor är hastighet och flexibilitet.

Jag valde biblioteket

p5js att rita en prick.Det är inte bara det, naturligtvis, om uppgiften var att rita en punkt och det är det, så måste allting göras i blott JavaScript, men jag gör detta i perspektiv, .k.då kommer du och jag att göra andra saker som kommer att se fantastiska ut, och för detta behöver vi ett bra verktyg.En av dem är p5js.

I golim JavaScript behöver vi skapa en duk för att definiera initierings- och omritningsfunktionerna, i p5 görs detta också, men väldigt kortfattat.

Men först..

Minsta miljöinställningar för JavaScript-utveckling

Ladda ner

p5.min.js och håll det sida vid sida.

så här

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 ett resultat kommer din webbläsare att öppnas så här

Tja, HTML är förståeligt, men vilken typ av JavaScript-kod är detta?

inställningsfunktionen är initialisering, den exekveras en gång, i den skapar vi en duk, d.v.s.område där vi kommer att rita en punkt.window.innerWidth, window.innerHeight

är skärmens bredd och höjd, dvs.vi definierar en fullskärmsduk och ja, HTML har en mycket viktig stil för detta också

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

Vi behöver inte initiera något annat, vi behöver bara rita en prick.Titta på principen här .. ritningsfunktionen exekveras till exempel 60 gånger per sekund, och 60 gånger per sekund kommer vi att rita vår punkt .. det verkar som att detta är dumt, vi behöver bara rita en punkt och det är det, men i framtiden kommer det att ligga till grund för allmän all animation.

I allmänhet är koden för att rita en punkt extremt enkel:

point(10,10)

och alla!

Vår kod är dock något större

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

bakgrund svart

vit stjärna

pricktjocklek 10

och vi ritar det i mitten av vertikal och horisontell.

Tja.. vi ritade en prick på duken, allt är som det ska, men vi skulle till och med kunna rita det på ren HTML utan något JavaScript.. Hur skulle det se ut?

Det gör det elementärt och ännu enklare, men principerna är helt annorlunda, här är den sista koden för att rita en kvadrat i mitten av skärmen

<!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 är nästan detsamma

Ja, det är ganska lätt att rita något i mitten i HTML, men för att lägga till animationer, och ännu mer en förnuftig interaktiv, måste du tänka enligt principerna för CSS.Även om det är en ganska intressant uppgift.Bara en elementär sak dödar allt detta, det finns inga slumpmässiga siffror i CSS, detta kommer att döda alla våra försök i framtiden, varför jag kommer att ge mindre företräde åt denna riktning.

Om jag föreställer mig att jag vill göra en stjärnhimmel på bar CSS, så kommer allt inte att fungera för mig, eftersomstjärnor bör dyka upp i slumpmässiga positioner, och om de har förskapade koordinater blir det inte så vackert och inte så enkelt, eftersom du kan skriva en slumpgenerator i CSS, men sådan kod kommer att se helt ful, oläslig och svår att förstå!





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