JavaScript: tynnu dot

Gadewch i ni ddysgu sut i dynnu pwynt yn JavaScript mewn porwr .. nid yw'n dechnegol anodd, ond dim ond i'r rhai sy'n ymbalfalu, ac i'r rhai nad ydynt yn barod i dynnu pwynt ar y Rhyngrwyd - mae hyn wrth gwrs yn gyflawniad cyfan.

Mae yna lawer o ffyrdd i dynnu pwynt, gadewch i ni edrych arnyn nhw

Adeiladwyr gêm



Gan ddefnyddio Unity/Godot/microStudio neu unrhyw un o’r miloedd o adeiladwyr gêm .. byddan nhw i gyd yn creu rhyw god mewn rhyw ffordd neu’i gilydd a fydd yn JavaScript neu Webassembly, ac yn dal i ddangos y pwynt i ni.Nid oes gennym ddiddordeb yn y llwybr hwn.ni fyddwn yn deall yn iawn beth sy'n digwydd, bydd rheolaeth dros y cod yn fach iawn ac yn annarllenadwy yn y cod ffynhonnell, heblaw ei fod yn enfawr.

Fframweithiau JavaScript

Mae'r llwybr hwn o'r Jedi mor agos â phosibl atom ni, oherwydd.ni fydd ein cod yn fawr ac yn glir fel dydd, ni fyddwn yn haniaethu llawer, ni fyddwn yn cynyddu ein cod yn fawr gyda llyfrgelloedd.Byddai rheoli cod yn wych hefyd

JavaScript pur

Dyma ffordd y Jedi wrth gwrs.Mae'r cod mor gymhleth â phosibl, y rheolaeth fwyaf posibl ar bethau nad oes angen eu rheoli, fel petai.Y codau ffynhonnell yw'r rhai lleiaf posibl a chyda gwybodaeth am JavaScript golimy, gallwn fynd yn ddiogel i gael swydd, oherwydd.mae angen pobl o'r fath arnom.

Ond nid dod o hyd i swydd yw ein tasg, ond tynnu dot mewn ffordd syml a hawdd.Ein fector yw cyflymder a hyblygrwydd.

Dewisais y llyfrgell

p5js i dynnu dot.Nid hynny’n unig, wrth gwrs, os mai’r dasg oedd tynnu pwynt a dyna ni, wrth gwrs, byddai’n rhaid gwneud popeth mewn JavaScript noeth, ond rwy’n gwneud hyn mewn persbectif, .k.yna byddwch chi a minnau'n gwneud pethau eraill a fydd yn edrych yn anhygoel, ac ar gyfer hyn mae angen offeryn da arnom.Un ohonyn nhw yw p5js.

Yn golim JavaScript, mae angen i ni greu cynfas i ddiffinio'r swyddogaethau cychwyn ac ail-lunio, yn t5 gwneir hyn hefyd, ond yn gryno iawn.

Ond yn gyntaf..

Gosodiad Amgylchedd Lleiaf ar gyfer Datblygu JavaScript

Lawrlwythwch

p5.min.js a'i gadw ochr yn ochr.

fel hyn

mynegai.html

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

braslun.js

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

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

Bydd hyn yn agor yn eich porwr fel hyn:

Wel, mae HTML yn ddealladwy, ond pa fath o god JavaScript yw hwn?

y swyddogaeth setup yw ymgychwyn, mae'n cael ei weithredu unwaith, ynddo rydym yn creu cynfas, h.y.maes lle byddwn yn tynnu pwynt.ffenestr.innerWidth, ffenestr.innerHeight

yw lled ac uchder y sgrin, h.y.rydym yn diffinio cynfas sgrin lawn ac oes, mae gan yr HTML arddull bwysig iawn ar gyfer hyn hefyd

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

Nid oes angen i ni gychwyn unrhyw beth arall, mae angen i ni dynnu llun dot.Edrychwch ar yr egwyddor yma .. gweithredir y swyddogaeth dynnu, er enghraifft, 60 gwaith yr eiliad, a 60 gwaith yr eiliad byddwn yn tynnu ein pwynt .. mae'n ymddangos bod hyn yn dwp, mae angen i ni dynnu pwynt a dyna iddo, ond yn y dyfodol bydd yn sail i bob animeiddiad cyffredinol.

Yn gyffredinol, mae'r cod ar gyfer tynnu pwynt yn hynod o syml:

point(10,10)

a dyna ni!

Fodd bynnag, mae ein cod ychydig yn fwy

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

cefndir du

seren wen

trwch dot 10

ac rydym yn ei dynnu yng nghanol y fertigol a'r llorweddol.

Wel.. fe wnaethon ni dynnu dot ar y cynfas, mae popeth fel y dylai fod, ond gallem hyd yn oed ei dynnu ar HTML pur heb unrhyw JavaScript.. Sut olwg fyddai arno?

Mae'n ei gwneud hi'n elfennol a hyd yn oed yn haws, ond mae'r egwyddorion yn hollol wahanol, dyma'r cod terfynol ar gyfer tynnu sgwâr yng nghanol y sgrin.

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

Mae'r canlyniad bron yr un peth

Ydy, mae'n eithaf hawdd tynnu rhywbeth yn y canol yn HTML, ond er mwyn ychwanegu animeiddiadau, a hyd yn oed yn fwy felly rhyngweithiol call, bydd yn rhaid i chi feddwl yn unol ag egwyddorion CSS.Er ei fod yn dasg eithaf diddorol.Dim ond un peth elfennol sy'n lladd hyn i gyd, nid oes niferoedd ar hap yn CSS, bydd hyn yn lladd ein holl ymdrechion yn y dyfodol, a dyna pam y byddaf yn rhoi llai o ffafriaeth i'r cyfeiriad hwn.

Os dychmygaf fy mod am wneud awyr serennog ar CSS noeth, yna ni fydd popeth yn gweithio allan i mi, oherwydddylai sêr ymddangos mewn safleoedd ar hap, ac os oes ganddynt gyfesurynnau wedi'u creu ymlaen llaw, ni fydd mor brydferth ac nid mor syml, oherwydd gallwch chi ysgrifennu generadur rhif ar hap yn CSS, ond bydd cod o'r fath yn edrych yn gwbl hyll, annarllenadwy ac yn anodd ei ddarllen. deall!



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