Aynu baranno sida loo sawiro barta JavaScript ee browserka .. farsamo ahaan maaha mid adag, laakiin kaliya kuwa boodboodaya, iyo kuwa aan diyaar u ahayn inay sawiraan dhibic internetka - tani waa dabcan guul dhan.
Waxaa jira siyaabo badan oo lagu sawiri karo dhibic, aan eegno iyaga
Isticmaalka Midnimada / Godot / microStudio ama mid ka mid ah kumanaanka wax dhisa .. Dhammaantood waxay u abuuri doonaan qaar ka mid ah koodka hal hab ama mid kale oo noqon doona JavaScript ama Webassembly, oo weli na tusaya barta.Dariiqan kuma danaynayno.run ahaantii ma fahmi doono waxa dhacaya, xakamaynta koodhka ayaa noqon doona mid aad u yar oo aan la akhrin karin koodhka isha, ka sokow waa weyn.
Jidkaan Jedi waa sida ugu dhow ee suurtogalka ah annaga, sababtoo ah.Xeerkayagu ma noqon doono mid weyn oo cad sida maalinta, ma noqon doono wax badan oo la taaban karo, si weyn uma kordhin doono koodkayaga maktabadaha.Xakamaynta koodkuna aad bay u fiicnaan lahayd
Tani waa dabcan habka Jedi.Koodhku waa sida ugu adag ee suurtogalka ah, xakamaynta ugu badan ee walxaha, sida ay ahayd, uma baahna in la xakameeyo.Koodhadhka isha ayaa ah kuwa ugu yar iyo aqoonta golimy JavaScript, waxaan si badbaado leh u aadi karnaa si aan shaqo u helno, sababtoo ah.waxaan u baahanahay dadka noocaas ah.
Laakiin shaqadeenu maaha in aan shaqo raadsano, balse waa in aan dhibco ku sawirno hab fudud oo fudud.Xakamayntayadu waa xawaare iyo dabacsanaan.
Waxaan doortay maktabadda
p5js si loo sawiro dhibic.Taasi kaliya maahan, dabcan, haddii hawshu ay tahay in la sawiro dhibic waana taas, dabcan, wax walba waa in lagu sameeyaa JavaScript qaawan, laakiin tan waxaan u sameynayaa dhinaca, .k.ka dib aniga iyo adiga waxaan sameyn doonaa waxyaabo kale oo u muuqan doona cajiib, tan waxaan u baahanahay qalab wanaagsan.Mid ka mid ah waa p5js.Golim JavaScript, waxaan u baahanahay inaan abuurno shiraac si loo qeexo bilowga iyo dib u habeynta howlaha, p5 tan sidoo kale waa la sameeyaa, laakiin si kooban.
Laakin marka hore..
Dejinta Deegaanka Ugu Yar ee Horumarinta JavaScript
Download
p5.min.js oo dhinac u dhig.sida tan
index.html
<html>
<head>
<script src="p5.min.js"></script>
<script src="sketch.js"></script>
</head>
<body style="margin: 0px;">
<main>
</main>
</body>
</html>
sawiro.js
function setup() {
createCanvas(window.innerWidth, window.innerHeight);
}
function draw() {
background(0);
stroke('white');
strokeWeight(10);
point(window.innerWidth/2,window.innerHeight/2);
}
Natiijo ahaan, browserkaagu wuxuu u furmi doonaa sidan
Hagaag, HTML waa la fahmi karaa, laakiin waa maxay nooca JavaScript code kani?
shaqada habayntu waa bilawga, waxa la fuliyaa hal mar, waxa aanu ku abuurnaa shiraac, i.e.aagga aan ku sawiri doonno.window.innerWidth, window.innerHeight
waa ballaca iyo dhererka shaashadda, i.e.waxaanu qeexaynaa sharaca shaashadda oo dhan iyo haa, HTML-ku wuxuu leeyahay qaab aad muhiim u ah kan sidoo kale
<body style="margin: 0px;">
Uma baahnid inaan wax kale bilowno, kaliya waxaan u baahanahay inaan sawiro dhibic.Fiiri mabda'a halkan. waa, laakiin mustaqbalka waxay noqon doontaa saldhigga guud ee dhammaan animation.
Guud ahaan, koodka sawirka dhibicda aad buu u fudud yahay:
point(10,10)
iyo dhammaan!
Si kastaba ha ahaatee, koodkayaga ayaa xoogaa ka weyn
background(0);
stroke('white');
strokeWeight(10);
point(window.innerWidth/2,window.innerHeight/2);
asalka madow
xiddig cad
dhumucda dhibicda 10
waxaana ku sawirnaa dhexda toosan iyo toosan.
Hagaag .. waxaan ku sawirnay dhibco shiraac ah, wax walba waa sidii ay ahayd, laakiin waxaan xitaa ku sawiri karnaa HTML saafi ah iyada oo aan wax JavaScript ah.. Sidee ayay u ekaan doontaa?
Waxay ka dhigtaa dugsi hoose iyo xitaa sahlan, laakiin mabaadi'da ayaa si buuxda u kala duwan, halkan waa code-ka ugu dambeeya ee lagu sawirayo labajibbaaran ee bartamaha shaashadda.
<!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>
Natiijadu waxay ku dhowdahay isku mid
Haa, way fududahay in wax lagu sawiro bartamaha HTML, laakiin si loogu daro animations, iyo xitaa si ka sii badan isdhexgalka miyir-qabka ah, waa inaad ka fikirtaa mabaadi'da CSS.Inkastoo ay tahay hawl aad u xiiso badan.Kaliya hal shay ayaa dila waxaas oo dhan, ma jiraan tirooyin random ah oo ku jira CSS, tani waxay dili doontaa dhammaan isku dayadayada mustaqbalka, taas oo ah sababta aan doorbidi doono jihadan.
Haddii aan qiyaaso inaan rabo inaan samada xiddigta leh ku sameeyo CSS qaawan, markaa wax walba aniga iima shaqeyn doonaan, sababtoo ahxiddiguhu waa inay ka soo muuqdaan jagooyin aan kala sooc lahayn, iyo haddii ay leeyihiin isku-duwayaasha horay loo abuuray, ma noqon doonto mid aad u qurux badan oo aan fududayn, sababtoo ah waxaad ku qori kartaa koronto-dhaliye lambareed ee CSS, laakiin koodka noocan oo kale ah wuxuu u eegi doonaa gebi ahaanba fool xun, aan la akhrin karin oo adag. fahan!