JavaScript: manaova teboka

Andeha isika hianatra ny fomba hanintonana teboka iray amin'ny JavaScript amin'ny navigateur.. tsy sarotra ara-teknika izany, fa ho an'ireo izay mikorontana ihany, ary ho an'ireo izay tsy vonona ny hanao sary amin'ny Internet - mazava ho azy fa fahombiazana iray manontolo izany.

Misy fomba maro hanintonana teboka iray, andao hojerentsika

Mpamorona lalao



Amin'ny fampiasana Unity/Godot/microStudio na iray amin'ireo mpanorina lalao an'arivony.. samy hamorona fehezan-dalàna amin'ny fomba iray na hafa izay JavaScript na Webassembly, ary mbola hampiseho amintsika ny hevitra.Tsy liana amin'io lalana io izahay.tsy ho azontsika tsara ny zava-mitranga, ny fifehezana ny kaody dia ho faran'izay kely ary tsy azo vakina ao amin'ny kaody loharano, ankoatra izany dia goavana.

JavaScript Frameworks

Io lalan'ny Jedi io dia akaiky indrindra antsika, satria.tsy ho lehibe sy mazava toy ny andro ny kaodinay, tsy hanazava be loatra izahay, tsy hampitombo be ny code amin'ny tranomboky.Ny fifehezana kaody dia mety tsara koa

JavaScript madio

Mazava ho azy fa fomban'ny Jedi izany.Ny kaody dia sarotra araka izay azo atao, ny fifehezana ambony indrindra amin'ny zavatra izay, raha ny marina, dia tsy mila fehezina.Ny kaody loharano no faran'izay kely indrindra ary miaraka amin'ny fahalalana ny golimy JavaScript, afaka mandeha soa aman-tsara isika mba hahazo asa, satria.mila olona toy izany isika.

Fa ny asantsika dia tsy ny fitadiavana asa, fa ny manao teboka amin'ny fomba tsotra sy mora.Ny vector ataontsika dia hafainganam-pandeha sy flexibilité.

Nifidy ny tranomboky aho

p5js manao teboka.Tsy izany ihany, mazava ho azy, raha ny asa dia ny hanintonana teboka ary izany no izy, mazava ho azy, ny zava-drehetra dia tsy maintsy atao amin'ny JavaScript miboridana, fa manao izany aho amin'ny fomba fijery, .k.dia izaho sy ianao dia hanao zavatra hafa izay toa mahagaga, ary noho izany dia mila fitaovana tsara isika.Ny iray amin'izy ireo dia p5js.

Ao amin'ny JavaScript golim, mila mamorona kanvas isika mba hamaritana ny asa fanombohana sy famerenana indray, ao amin'ny p5 dia vita ihany koa izany, saingy tena fohy.

Fa aloha..

Fanamboarana tontolo iainana faran'izay kely indrindra ho an'ny fampandrosoana JavaScript

DOWNLOAD

p5.min.js ary tehirizo mifanila.

toa izao

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);
    }

Vokatr'izany dia hisokatra toy izao ny navigateur anao

Eny, azo takarina ny HTML, fa karazana code JavaScript inona izany?

ny asa setup dia initialization, dia tanterahina indray mandeha, ao aminy no mamorona lamba, i.e.faritra izay hanaovantsika teboka iray.windows.innerWidth, window.innerHeight

dia ny sakany sy ny haavon'ny efijery, i.e.mamaritra lamban-tsary feno izahay ary eny, ny HTML dia manana fomba tena manan-danja amin'izany koa

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

Tsy mila manao zavatra hafa isika fa manao sary teboka fotsiny.Jereo ny principe eto .. atao ny fonction de draw ohatra in-60 isan-tsegondra, ary in-60 isan-tsegondra no hisintonana ny hevitray .. toa vendrana io fa mila manao pointage fotsiny dia izay. izany, fa amin'ny ho avy dia ho fototra ho an'ny ankapobeny ny animation rehetra.

Amin'ny ankapobeny, ny kaody amin'ny fanaovana teboka dia tena tsotra:

point(10,10)

ary ny rehetra!

Na izany aza, somary lehibe kokoa ny kaodinay

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

mainty ambadika

kintana fotsy

hatevin'ny teboka 10

ary ataontsika eo afovoan'ny mitsangana sy mitsivalana izany.

Eny.. nanao teboka teo amin'ny lamba izahay, araka ny tokony ho izy ny zava-drehetra, fa afaka manao izany amin'ny HTML madio tsy misy JavaScript aza izahay.. Hanao ahoana ny endriny?

Izy io dia mahatonga azy io ho fototra sy mora kokoa, fa ny fitsipika dia samy hafa tanteraka, ity ny kaody farany amin'ny fanaovana efamira eo afovoan'ny efijery

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

Saika mitovy ny vokany

Eny, mora ny manao sary ao afovoan-tanàna amin'ny HTML, fa mba hanampiana sary mihetsika, ary na dia interactive salama kokoa aza, dia tsy maintsy mieritreritra araka ny fitsipiky ny CSS ianao.Na dia tena asa mahaliana.Zavatra fototra iray ihany no mahafaty an'izany rehetra izany, tsy misy isa kisendrasendra ao amin'ny CSS, hamono ny ezaka rehetra ataontsika amin'ny ho avy izany, ka izany no mahatonga ahy tsy hanome vahana an'io lalana io.

Raha mieritreritra aho fa te hanao lanitra feno kintana amin'ny CSS miboridana, dia tsy hahomby amiko ny zava-drehetra, satriaNy kintana dia tokony hiseho amin'ny toerana kisendrasendra, ary raha manana koordinate efa noforonina izy ireo, dia tsy ho tsara tarehy sy tsy dia tsotra loatra izany, satria afaka manoratra mpamokatra isa kisendrasendra ao amin'ny CSS ianao, fa ny fehezan-dalàna toy izany dia ho ratsy tarehy, tsy azo vakina ary sarotra. mahatakatra!



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