JavaScript: zana digo

Bari mu koyi yadda za a zana batu a cikin JavaScript a cikin mai bincike.. ba a fasaha ba ne mai wuyar gaske, amma ga waɗanda ke yin fumble kawai, kuma ga waɗanda ba su da shiri don zana batu a kan Intanet - wannan hakika cikakkiyar nasara ce.

Akwai hanyoyi da yawa don zana batu, bari mu duba su

Masu ginin wasan



Yin amfani da Unity/Godot/microStudio ko kowane daga cikin dubunnan maginin wasan ... duk za su ƙirƙiri wasu lambobi ta hanya ɗaya ko wata waɗanda za su zama JavaScript ko Webassembly, kuma har yanzu suna nuna mana batun.Ba mu da sha'awar wannan tafarki.ba za mu fahimci ainihin abin da ke faruwa ba, sarrafa lambar zai zama kaɗan kuma ba za a iya karantawa a cikin lambar tushe ba, ban da yana da girma.

Tsarin JavaScript

Wannan hanyar Jedi yana kusa da mu, saboda.lambar mu ba za ta zama babba kuma a bayyane kamar rana ba, ba za mu ƙasƙantar da yawa ba, ba za mu ƙara yawan lambar mu tare da ɗakunan karatu ba.Sarrafa lamba zai yi kyau kuma

JavaScript mai tsafta

Tabbas wannan ita ce hanyar Jedi.Lambar yana da rikitarwa kamar yadda zai yiwu, matsakaicin iko na abubuwan da, kamar yadda yake, baya buƙatar sarrafawa.Lambobin tushen sune mafi ƙanƙanta kuma tare da ilimin golimy JavaScript, za mu iya kawai tafi lafiya don samun aiki, saboda.muna bukatar irin wadannan mutane.

Amma aikinmu ba shine neman aiki ba, amma don zana ɗigo a hanya mai sauƙi da sauƙi.Vector mu shine sauri da sassauci.

Na zaɓi ɗakin karatu

p5js a zana digo.Ba haka ba ne kawai, ba shakka, idan aikin ya zana batu kuma shi ke nan, ba shakka, duk abin da za a yi shi ne a cikin JavaScript mara kyau, amma ina yin wannan a cikin hangen nesa, .k.to, ni da kai za mu yi wasu abubuwan da za su yi kama da ban mamaki, kuma don wannan muna buƙatar kayan aiki mai kyau.Daya daga cikinsu shine p5js.

A cikin golim JavaScript, muna buƙatar ƙirƙirar zane don ayyana farawa da sake fasalin ayyukan, a cikin p5 ma ana yin wannan, amma a taƙaice.

Amma da farko..

Mafi ƙarancin Muhalli don Ci gaban JavaScript

Zazzagewa

p5.min.js kuma ku ajiye shi gefe da gefe.

kamar wannan

index.html

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

zane.js

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

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

Wannan zai buɗe a cikin burauzar ku kamar haka:

Da kyau, HTML ana iya fahimta, amma wane irin lambar JavaScript ne wannan?

aikin saitin shine farawa, ana aiwatar da shi sau ɗaya, a ciki muna ƙirƙirar zane, watau.yankin da za mu zana batu.taga.innerWiidth, taga.innerHeight

shine fadin da tsayin allon, watau.mun ayyana zane mai cikakken allo kuma a, HTML ɗin yana da salo mai mahimmanci ga wannan kuma

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

Ba ma buƙatar fara wani abu dabam, kawai muna buƙatar zana digo.Dubi ka'idar a nan .. Ana aiwatar da aikin zane, alal misali, sau 60 a sakan daya, kuma sau 60 a cikin dakika daya zamu zana ma'anar mu. shi, amma a nan gaba zai zama ginshiƙi na gabaɗaya duk animation.

Gabaɗaya, lambar don zana batu abu ne mai sauƙin gaske:

point(10,10)

kuma shi ke nan!

Koyaya, lambar mu ta ɗan fi girma

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

baya baki

farin tauraro

kaurin digo 10

kuma muna zana shi a tsakiyar tsaka-tsaki da a kwance.

To.. mun zana digo a kan zane, duk abin da ya kamata ya kasance, amma muna iya zana shi a kan HTML mai tsabta ba tare da JavaScript ba.. Yaya zai kasance?

Yana sa shi zama na farko har ma ya fi sauƙi, amma ka'idodin sun bambanta sosai, a nan ne lambar ƙarshe don zana murabba'i a tsakiyar allon.

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

Sakamakon kusan iri ɗaya ne

Ee, yana da sauƙin zana wani abu a tsakiya a cikin HTML, amma don ƙara rayarwa, har ma da ma'amala mai hankali, dole ne kuyi tunani bisa ga ka'idodin CSS.Ko da yake aiki ne mai ban sha'awa sosai.Elementary abu daya ne kawai ya kashe duk wannan, babu bazuwar lambobi a cikin CSS, wannan zai kashe duk ƙoƙarinmu a nan gaba, wanda shine dalilin da yasa zan ba da fifiko ga wannan shugabanci.

Idan na yi tunanin cewa ina so in yi sararin sama mai taurari a kan CSS, to komai ba zai yi min aiki ba, sabodataurari ya kamata su bayyana a cikin bazuwar matsayi, kuma idan sun riga sun ƙirƙira daidaitawa, ba zai zama da kyau sosai ba kuma ba mai sauƙi ba, saboda zaku iya rubuta janareta na lambar bazuwar a cikin CSS, amma irin wannan lambar za ta yi kama da mummuna, ba za a iya karantawa ba kuma da wuya. fahimta!



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