JavaScript: rajzoljon egy pontot

Tanuljuk meg, hogyan kell pontot rajzolni a JavaScript-ben a böngészőben.. ez technikailag nem nehéz, de csak azoknak, akik tapogatóznak, és azoknak, akik nem készültek pontot rajzolni az interneten - ez természetesen teljes eredmény.

Sokféleképpen lehet pontot rajzolni, nézzük meg őket

Játékkonstruktorok



A Unity/Godot/microStudio vagy a több ezer játékkészítő bármelyikével... mindegyik létrehoz valamilyen kódot, így vagy úgy, hogy JavaScript vagy Webassembly lesz, és mégis megmutatja a lényeget.Minket ez az út nem érdekel.nem igazán fogjuk érteni, mi történik, a kód feletti kontroll minimális és olvashatatlan lesz a forráskódban, ráadásul hatalmas.

JavaScript-keretrendszerek

Ez a Jedik útja a lehető legközelebb van hozzánk, mert.a kódunk nem lesz olyan nagy és tiszta, mint a nap, nem fogunk sokat elvonatkoztatni, nem fogjuk nagyon megnövelni a kódunkat könyvtárakkal.A kódvezérlés is jó lenne

Tiszta JavaScript

Ez természetesen a Jedik útja.A kód a lehető legbonyolultabb, olyan dolgok maximális ellenőrzése, amelyeket úgymond nem kell ellenőrizni.A forráskódok a legminimálisabbak és a golimy JavaScript ismeretében nyugodtan mehetünk elhelyezkedni, mert.ilyen emberekre van szükségünk.

De nem az a feladatunk, hogy munkát találjunk, hanem egyszerűen és könnyen megrajzoljunk egy pontot.A vektorunk a gyorsaság és a rugalmasság.

A könyvtárat választottam

p5js pontot rajzolni.Persze nem csak arról van szó, ha pont rajzolás lenne a feladat és ennyi, akkor persze mindent puszta JavaScript-ben kellene csinálni, de ezt perspektívában teszem, .k.akkor te és én más olyan dolgokat fogunk csinálni, amelyek csodálatosan néznek ki, és ehhez szükségünk van egy jó eszközre.Az egyik a p5js.

A golim JavaScriptben egy vásznat kell készítenünk az inicializálási és újrarajzolási funkciók meghatározásához, a p5-ben ez is megtörténik, de nagyon tömören.

De először..

Minimális környezetbeállítás JavaScript-fejlesztéshez

Letöltés

p5.min.js és tartsa egymás mellett.

mint ez

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

Ez így fog megnyílni a böngészőben:

Nos, a HTML érthető, de milyen JavaScript kód ez?

a setup funkció inicializálás, egyszer lefut, benne vásznat készítünk, pl.terület, ahol pontot rajzolunk.window.innerWidth, window.innerHeight

a képernyő szélessége és magassága, azaz.definiálunk egy teljes képernyős vásznat, és igen, a HTML-nek ehhez is van egy nagyon fontos stílusa

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

Semmi mást nem kell inicializálnunk, csak egy pontot kell rajzolnunk.Nézze meg itt az elvet .. a rajzolás függvény például másodpercenként 60-szor hajtódik végre, és másodpercenként 60-szor húzzuk le a pontunkat .. úgy tűnik, ez hülyeség, csak meg kell húzni egy pontot, és ennyi ez lesz, de a jövőben ez lesz az alapja minden általános animációnak.

Általában a pont rajzolásának kódja rendkívül egyszerű:

point(10,10)

és ez az!

A kódunk azonban valamivel nagyobb

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

háttér fekete

fehér csillag

pontvastagság 10

és a függőleges és vízszintes középpontjába rajzoljuk.

Hát.. rajzoltunk egy pontot a vászonra, minden úgy van, ahogy kell, de akár tiszta HTML-re is lerajzolhatnánk JavaScript nélkül.. Hogy nézne ki?

Elemivé és még könnyebbé teszi, de az alapelvek teljesen mások, itt van a végső kód egy négyzet rajzolásához a képernyő közepén

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

Az eredmény majdnem ugyanaz

Igen, HTML-ben elég egyszerű rajzolni valamit a közepére, de ahhoz, hogy animációkat, és még inkább értelmes interaktívat adjunk hozzá, a CSS elvei szerint kell gondolkodni.Bár elég érdekes feladat.Csak egy elemi dolog öli meg mindezt, a CSS-ben nincsenek véletlenszerű számok, ez a jövőben minden próbálkozásunkat megöli, ezért ezt az irányt kevésbé részesítem előnyben.

Ha azt képzelem, hogy csillagos eget akarok csupasz CSS-en csinálni, akkor nekem nem fog menni minden, merta csillagok véletlenszerű pozícióban jelenjenek meg, és ha előre elkészített koordinátáik vannak, akkor nem lesz olyan szép és nem is olyan egyszerű, mert CSS-ben írhatsz véletlenszám generátort, de az ilyen kód teljesen csúnya, olvashatatlan és nehezen olvasható. megért!





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