JavaScript: nokat çyzyň

Brauzerde JavaScript-de nädip nokat çekmelidigini öwreneliň .. tehniki taýdan kyn däl, diňe ýalňyşýanlar we internetde nokat çekmäge taýyn bolmadyklar üçin - bu elbetde doly üstünlik.

Bir nokat çekmegiň köp usuly bar, geliň olara seredeliň

Oýun konstruktorlary



“Unity / Godot / microStudio” -ny ýa-da müňlerçe oýun gurluşykçysynyň haýsydyr birini ulanmak .. hemmesi JavaScript ýa-da Webassemble boljak bir ýa-da başga bir görnüşde kod döreder we bize henizem nokady görkezer.Bu ýol bizi gyzyklandyranok.nämäniň bolup geçýändigine hakykatdanam düşünmeris, koda gözegçilik iň az we deslapky kodda okalmaz, üstesine-de gaty uly.

JavaScript çarçuwalary

Jediniň bu ýoly bize mümkin boldugyça ýakyn, sebäbi.kodumyz gün ýaly uly we düşnükli bolmaz, köp abstrakt etmeris, kitaphanalarymyz bilen kodumyzy ep-esli artdyrmarys.Kod dolandyryşy hem gaty gowy bolardy

Arassa JavaScript

Bu, elbetde, Jediniň ýoludyr.Kod mümkin boldugyça çylşyrymly, gözegçilik edilmeli däl zatlara iň ýokary gözegçilik.Çeşme kodlary iň az we golly JavaScript-i bilmek bilen, işe girmek üçin arkaýyn gidip bileris, sebäbi.bize beýle adamlar gerek.

Emma biziň wezipämiz iş tapmak däl-de, ýönekeý we aňsat bir nokat çekmek.Biziň wektorymyz tizlik we çeýeligi.

Kitaphanany saýladym

p5js nokat çekmekElbetde, bu diňe bir däl, eger wezipe bir nokat çekmek bolsa we elbetde, hemme zat ýalaňaç JavaScript-de edilmeli bolsa, men muny perspektiwada edýärin .k.şonda sen we men ajaýyp görünjek başga zatlary ederis we munuň üçin gowy gural gerek.Olardan biri p5js.

Golim JavaScript-de başlangyç we gaýtadan işlemek funksiýalaryny kesgitlemek üçin kanwas döretmeli, p5-de bu hem edilýär, ýöne gaty gysga.

Emma ilki bilen ..

JavaScript-i ösdürmek üçin iň az daşky gurşaw

Göçürip al

p5.min.js gapdalynda saklaň.

ýaly

index.html

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

eskiz.js

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

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

Netijede, brauzeriňiz şeýle açylar

Dogrusy, HTML düşnükli, ýöne bu haýsy JavaScript kody?

gurnama funksiýasy başlangyç, bir gezek ýerine ýetirilýär, onda kanwas döredýäris.nokat çekjek ýerimiz.windows.innerWidth, windows.innerHeight

ekranyň ini we beýikligi, ýagnydoly ekranly kanwany kesgitleýäris we hawa, HTML-de munuň üçin gaty möhüm stil bar

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

Başga bir zady başlatmak hökman däl, diňe bir nokat çekmeli.Bu ýerde prinsipe serediň .. çyzuw funksiýasy ýerine ýetirilýär, mysal üçin sekuntda 60 gezek, sekuntda 60 gezek nokadymyzy çekeris .. bu samsyk ýaly görünýär, diňe bir nokat çekmeli we bu geljekde ähli animasiýa üçin esas bolar.

Umuman aýdanyňda, nokat çekmegiň kody gaty ýönekeý:

point(10,10)

we hemmesi!

Şeýle-de bolsa, kodumyz birneme uludyr

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

fon gara

ak ýyldyz

nokat galyňlygy 10

we dikligine we keseligine merkezde çekýäris.

Bolýar .. kanwada bir nokat çyzdyk, hemme zat bolmalysy ýaly, ýöne hiç hili JavaScript bolmasa arassa HTML-de çekip bilerdik .. Nämä meňzeýär?

Ony başlangyç we hatda aňsatlaşdyrýar, ýöne ýörelgeler düýbünden başga, ine, ekranyň ortasynda kwadrat çyzmagyň iň soňky kody

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

Netije birmeňzeş

Hawa, HTML-de merkezde bir zat çekmek gaty aňsat, ýöne animasiýa goşmak we has akylly interaktiw goşmak üçin CSS ýörelgelerine görä pikirlenmeli bolarsyňyz.Bu gaty gyzykly mesele.Diňe bir başlangyç zat bularyň hemmesini öldürýär, CSS-de tötänleýin san ýok, bu geljekde ähli synanyşyklarymyzy öldürer, şonuň üçin bu ugura has az ähmiýet bererin.

Arealaňaç CSS-de ýyldyzly asman ýasamak isleýändigimi göz öňüme getirýän bolsam, hemme zat meniň üçin netije bermez, sebäbiýyldyzlar tötänleýin ýagdaýda peýda bolmaly, öňünden döredilen koordinatlary bar bolsa, beýle owadan bolmaz we beýle bir ýönekeý bolmaz, sebäbi CSS-de tötänleýin san generatoryny ýazyp bilersiňiz, ýöne beýle kod düýbünden ýigrenji, okalmaýan we kyn görüner düşün!





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