JavaScript: nubrėžkite tašką

Išmokime braižyti tašką JavaScript naršyklėje.. techniškai tai nėra sudėtinga, bet tik tiems, kurie blaškosi, o tiems, kurie nėra pasiruošę brėžti tašką internete - tai, žinoma, yra visas pasiekimas.

Yra daug būdų nubrėžti tašką, pažvelkime į juos

Žaidimų konstruktoriai



Naudodami Unity/Godot/microStudio ar bet kurį iš tūkstančių žaidimų kūrėjų... jie visi vienaip ar kitaip sukurs tam tikrą kodą, kuris bus JavaScript arba Webassembly, ir vis tiek parodys esmę.Mums šis kelias neįdomus.nelabai suprasime kas vyksta, kodo kontrolė bus minimali ir neįskaitoma šaltinio kode, be to jis didžiulis.

JavaScript Frameworks

Šis Jedi kelias yra kuo arčiau mūsų, nes.mūsų kodas nebus didelis ir aiškus kaip diena, daug abstrahuosime, labai nepadidinsime savo kodo su bibliotekomis.Kodo valdymas taip pat būtų puikus

Grynas JavaScript

Žinoma, tai yra Jedi būdas.Kodas yra kuo sudėtingesnis, maksimalus dalykų valdymas, kurių, kaip sakant, nereikia valdyti.Šaltinio kodai yra patys minimaliausi ir, žinant golimy JavaScript, galime tiesiog saugiai eiti įsidarbinti, nes.mums reikia tokių žmonių.

Bet mūsų užduotis yra ne susirasti darbą, o paprastai ir lengvai nupiešti tašką.Mūsų vektorius yra greitis ir lankstumas.

Aš pasirinkau biblioteką

p5js nupiešti tašką.Tai ne tik, žinoma, jei užduotis būtų nubrėžti tašką ir viskas, žinoma, viskas turėtų būti daroma plika JavaScript, bet aš tai darau perspektyviai, .k.tada jūs ir aš darysime kitus dalykus, kurie atrodys nuostabiai, o tam mums reikia gero įrankio.Vienas iš jų yra p5js.

Golim JavaScript turime sukurti drobę, kad apibrėžtume inicijavimo ir perpiešimo funkcijas, p5 tai taip pat daroma, bet labai glaustai.

Bet pirma..

Minimali aplinkos sąranka „JavaScript“ kūrimui

parsisiųsti

p5.min.js ir laikykite jį šalia.

kaip šitas

index.html

    <html>
    <head>
        <script src="p5.min.js"></script>
        <script src="sketch.js"></script>
    </head>
    <body style="margin: 0px;">
        <main>
        </main>
    </body>
    </html>

eskizas.js

    function setup() {
    createCanvas(window.innerWidth, window.innerHeight);
    }

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

Tai atsidarys jūsų naršyklėje taip:

Na, HTML suprantama, bet koks tai JavaScript kodas?

setup funkcija yra inicijavimas, ji vykdoma vieną kartą, joje kuriame drobę, t.y.sritis, kurioje nubrėžsime tašką.langas.innerWidth, window.innerHeight

yra ekrano plotis ir aukštis, t.y.Mes apibrėžiame viso ekrano drobę ir taip, HTML taip pat turi labai svarbų stilių

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

Daugiau nieko inicijuoti nereikia, tereikia nupiešti tašką.Pažiūrėk čia principą .. piešimo funkcija vykdoma pvz 60 kartų per sekundę, o 60 kartų per sekundę brėžsime savo tašką .. atrodytų, kad tai kvaila, reikia tik nupiešti tašką ir viskas tai, bet ateityje tai bus visos bendros animacijos pagrindas.

Apskritai taško piešimo kodas yra labai paprastas:

point(10,10)

Štai ir viskas!

Tačiau mūsų kodas yra šiek tiek didesnis

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

fonas juodas

balta žvaigždė

taško storis 10

ir piešiame jį vertikalios ir horizontalios centre.

Na.. nupiešėm tašką ant drobės, viskas kaip ir turi būti, bet galėtume net grynu HTML nupiešti be jokio JavaScript.. Kaip tai atrodytų?

Tai daro elementarų ir dar lengvesnį, bet principai visiškai kiti, čia yra galutinis kvadrato piešimo kodas ekrano centre

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

Rezultatas beveik toks pat

Taip, HTML nupiešti ką nors centre yra gana paprasta, tačiau norint pridėti animaciją, o tuo labiau protingą interaktyvųjį, teks mąstyti pagal CSS principus.Nors tai gana įdomi užduotis.Tik vienas elementarus dalykas visa tai žudo, CSS nėra atsitiktinių skaičių, tai sunaikins visus mūsų bandymus ateityje, todėl šiai krypčiai teiksiu mažiau pirmenybės.

Jei įsivaizduoju, kad noriu padaryti žvaigždėtą dangų ant pliko CSS, tada man viskas nepavyks, nesŽvaigždės turėtų atsirasti atsitiktinėse pozicijose, o jei jos turi iš anksto susikurtas koordinates, tai nebus taip gražu ir ne taip paprasta, nes galima CSS parašyti atsitiktinių skaičių generatorių, bet toks kodas atrodys visiškai negražiai, neįskaitomas ir sunkiai įskaitomas. suprask!



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