JavaScript: xalek bikişîne

Werin em fêr bibin ka meriv çawa di gerokek JavaScript-ê de xalek xêz dike.. ew ji hêla teknîkî ve ne dijwar e, lê tenê ji bo kesên ku dişoxilînin, û ji bo yên ku ne amade ne ku xalek li ser Înternetê xêz bikin - ev bê guman serkeftinek tevahî ye.

Gelek awayên xêzkirina xalekê hene, em li wan binêrin

çêkerên lîstikê



Bi karanîna Unity/Godot/microStudio an yek ji hezaran çêkerên lîstikê.. ew ê hemî bi rengekî an din kodek çêbikin ku dê bibe JavaScript an Webassembly, û dîsa jî xalê nîşanî me bidin.Em bi vê rêyê re eleqedar nabin.em ê bi rastî fam nekin ka çi diqewime, kontrola li ser kodê dê di koda çavkaniyê de hindik be û neyê xwendin, ji bilî wê jî ew pir mezin e.

Çarçoveyên JavaScript

Ev riya Jedi bi qasî ku gengaz nêzî me ye, ji ber.koda me dê wekî rojê ne mezin û zelal be, em ê pir jê razî nebin, em ê koda xwe bi pirtûkxaneyan pir zêde nekin.Kontrolkirina kodê jî dê pir baş be

JavaScript paqij

Helbet ev riya Jediyan e.Kod bi qasî ku pêkan tevlihev e, kontrola herî zêde ya tiştan e ku, wekî ku be, ne hewce ye ku were kontrol kirin.Kodên çavkaniyê yên herî hindik in û bi zanîna JavaScriptê golimy, em dikarin bi ewlehî biçin ku karekî bistînin, ji ber.pêwîstiya me bi kesên wiha heye.

Lê peywira me ne dîtina karekî ye, lê xêzkirina xalekê bi awayekî sade û hêsan e.Vektora me lez û bez e.

Min pirtûkxane hilbijart

p5js bo kişandina xalekê.Ne tenê ew e, bê guman, ger peywir xêzkirina xalek bû û ew e, bê guman, dê her tişt di JavaScript tazî de were kirin, lê ez vê yekê di perspektîfê de dikim, .k.wê hingê ez û hûn ê tiştên din bikin ku dê ecêb xuya bikin, û ji bo vê yekê em hewceyê amûrek baş in.Yek ji wan p5js e.

Di golim JavaScript-ê de, pêdivî ye ku em kanvasek biafirînin da ku fonksiyonên destpêkkirin û ji nû ve xêzkirinê diyar bikin, di p5 de jî ev tê kirin, lê pir bi kurtî.

Lê pêşî..

Ji bo Pêşveçûna JavaScriptê Sazkirina Jîngehê ya Kêmtirîn

Download

p5.min.js û wê li kêleka hev biparêzin.

Welî evê

index.html

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

sketch.js

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

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

Ev ê di geroka we de bi vî rengî vebe:

Welê, HTML tê fêm kirin, lê ev kîjan koda JavaScript-ê ye?

fonksiyona sazkirinê destpêkkirin e, ew yek carî tête darve kirin, di wê de em kanavayek çêdikin, yanî.qada ku em ê xalekê xêz bikin.window.innerWidth, window.innerHeight

firehî û bilindahiya ekranê ye, yanî.em qalibek tev-screen diyar dikin û erê, HTML ji bo vê jî şêwazek pir girîng heye

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

Ne hewce ye ku em tiştek din dest pê bikin, tenê pêdivî ye ku em xalek xêz bikin.Li vir li prensîbê binihêrin .. fonksiyona xêzkirinê tê darve kirin, mînakî, di çirkeyê de 60 carî, û em ê di çirkeyê de 60 carî xala xwe bikişînin .. wusa dixuye ku ev ehmeqî ye, tenê pêdivî ye ku em xalek xêz bikin û ew e ew, lê di pêşerojê de ew ê bibe bingehek ji bo hemî anîmasyonên gelemperî.

Bi gelemperî, koda xêzkirina xalek pir hêsan e:

point(10,10)

û ew e!

Lêbelê, koda me hinekî mezintir e

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

paşperdeya reş

stêrka spî

qalindahiya xalê 10

û em wê di navenda vertîkal û horizontî de dikişînin.

Baş e.. me xalek li ser kavilê xêz kir, her tişt wekî ku divê be, lê me dikaribû wê li ser HTML-ya pak jî bêyî JavaScriptê bikşînim.. Wê çawa xuya bike?

Ew wê seretayî û hê hêsantir dike, lê prensîb bi tevahî cûda ne, li vir koda paşîn a xêzkirina çargoşeyek li navenda ekranê ye

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

Encam hema hema yek e

Erê, xêzkirina tiştek di navendê de di HTML-ê de pir hêsan e, lê ji bo ku hûn anîmasyon lê zêde bikin, û hêj bêtir înteraktîfek saxlem, hûn ê neçar bin ku li gorî prensîbên CSS-ê bifikirin.Her çend ew karekî pir balkêş e.Tenê tiştek bingehîn van hemî dikuje, di CSS-ê de hejmarên bêserûber tune ne, ev ê di pêşerojê de hemî hewildanên me bikuje, ji ber vê yekê ez ê kêmtir tercîhê bidim vî alî.

Ger ez xeyal bikim ku ez dixwazim li ser CSS-ya tazî ezmanek stêrk çêkim, wê hingê dê her tişt ji min re nexebite, ji ber kustêrk divê di pozîsyonên bêserûber de xuya bibin, û ger koordînatên wan ên pêş-afirandî hebin, ew ê ne ew qas xweşik û ne ew qas hêsan be, ji ber ku hûn dikarin di CSS-ê de jeneratorek hejmarên bêserûber binivîsin, lê kodek wusa dê bi tevahî zirav, nexwendî û dijwar xuya bike. têgihîştin!





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