JavaScript: kaha kiko kiko

E aʻo kākou pehea e huki ai i kahi kiko ma JavaScript ma ka polokalamu kele pūnaewele.

Nui nā ala e kaha ai i kahi kiko, e nānā kākou

Nā mea kūkulu pāʻani



Ke hoʻohana nei i Unity/Godot/microStudio a i ʻole nā ​​tausani o nā mea hana pāʻani.ʻAʻole mākou hoihoi i kēia ala.ʻAʻole mākou e hoʻomaopopo maoli i ka mea e hana nei, e liʻiliʻi ka mana ma luna o ke code a hiki ʻole ke heluhelu ʻia i ke code kumu, ʻoi aku ka nui.

JavaScript Frameworks

ʻO kēia ala o ka Jedi kahi kokoke loa iā mākou, no ka mea.ʻAʻole nui a maopopo kā mākou code e like me ka lā, ʻaʻole mākou e abstract nui, ʻaʻole mākou e hoʻonui nui i kā mākou code me nā hale waihona puke.ʻOi aku ka maikaʻi o ka mana code

JavaScript maʻemaʻe

ʻO kēia ke ala o ka Jedi.He paʻakikī ke code, ʻo ka mana kiʻekiʻe o nā mea, me he mea lā, ʻaʻole pono e hoʻomalu ʻia.ʻO nā code kumu ka mea liʻiliʻi loa a me ka ʻike o golimy JavaScript, hiki iā mākou ke hele palekana e kiʻi i kahi hana, no ka mea.pono mākou i kēlā poʻe.

Akā ʻo kā mākou hana ʻaʻole ia e ʻimi i kahi hana, akā e huki i kahi kiko ma kahi ala maʻalahi a maʻalahi.ʻO kā mākou vector ka wikiwiki a me ka maʻalahi.

Ua koho au i ka hale waihona puke

p5js e kaha kiko.ʻAʻole wale ia, ʻoiaʻiʻo, inā ʻo ka hana e huki i kahi kikoʻī a ʻo ia, ʻoiaʻiʻo, pono e hana ʻia nā mea āpau ma ka JavaScript wale nō, akā ke hana nei au i kēia ma ke ʻano, .k.a laila e hana ʻoe a me au i nā mea kupanaha ʻē aʻe, a no kēia pono mākou i kahi mea hana maikaʻi.ʻO kekahi o lākou he p5js.

Ma golim JavaScript, pono mākou e hana i kahi canvas e wehewehe i ka hana hoʻomaka a me ka unuhi hou ʻana, ma ka p5 ua hana pū ʻia kēia, akā pōkole loa.

Akā ʻo ka mua..

Hoʻonohonoho kaiapuni liʻiliʻi no ka hoʻomohala ʻana i ka JavaScript

Hoʻoiho

p5.min.js a e malama ma kahi aoao.

e like me kēia

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

E wehe ʻia kēia ma kāu polokalamu kele pūnaewele e like me kēia:

ʻAe, hiki ke hoʻomaopopo ʻia ka HTML, akā he aha ke ʻano o kēia code JavaScript?

ʻO ka hana hoʻonohonoho ka hoʻomaka ʻana, ua hoʻokō ʻia i hoʻokahi manawa, i loko o laila mākou e hana ai i kahi canvas, ʻo ia.wahi a kakou e kikoo ai.pukaaniani.innerWidth, pukaaniani.innerHeight

ʻo ia ka laulā a me ke kiʻekiʻe o ka pale, ʻo ia hoʻi.wehewehe mākou i kahi kāwele piha piha a ʻae, he ʻano koʻikoʻi ko ka HTML no kēia

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

ʻAʻole pono mākou e hoʻomaka i kahi mea ʻē aʻe, pono mākou e kaha kiʻi i kahi kiko.E nānā i ke kumu maʻaneʻi .. ua hoʻokō ʻia ka hana huki, no ka laʻana, 60 mau manawa i kēlā me kēia kekona, a he 60 mau manawa i kēlā me kēia kekona e huki mākou i kā mākou kiko .. me he mea lā he naʻaupō kēia, pono mākou e huki i kahi kiko a ʻo ia. ʻo ia, akā i ka wā e hiki mai ana ʻo ia ke kumu no ka nui o nā animation āpau.

Ma keʻano laulā, maʻalahi loa ke code no ke kahakaha ʻana i kahi kiko:

point(10,10)

a ʻo ia nō!

Eia naʻe, ʻoi aku ka nui o kā mākou code

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

ʻeleʻele hope

hōkū keʻokeʻo

mānoanoa kiko 10

a huki mākou ia ma waenakonu o ke kuʻekuʻe a me ka pae.

ʻAe.. ua kaha mākou i kahi kiko ma ka canvas, ua like nā mea a pau e like me ka mea e pono ai, akā hiki iā mākou ke kaha kiʻi ma ka HTML maʻemaʻe me ka ʻole o JavaScript. He aha ke ʻano?

Hana ia i ke kula haʻahaʻa a ʻoi aku ka maʻalahi, akā ʻokoʻa loa nā kumumanaʻo, eia ke code hope no ke kaha kiʻi ʻana i kahi ʻāpana i waenakonu o ka pale.

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

Ua aneane like ka hopena

ʻAe, he mea maʻalahi ke kahakiʻi i kahi mea ma ke kikowaena HTML, akā i mea e hoʻohui ai i nā animations, a ʻoi aku ka maikaʻi o kahi kamaʻilio maʻemaʻe, pono ʻoe e noʻonoʻo e like me nā loina o CSS.ʻOiai he hana hoihoi.Hoʻokahi wale nō mea haʻahaʻa e pepehi i kēia mau mea a pau, ʻaʻohe helu helu ma CSS, e pepehi kēia i kā mākou mau hoʻāʻo a pau i ka wā e hiki mai ana, ʻo ia ke kumu e hāʻawi liʻiliʻi ai au i kēia kuhikuhi.

Inā wau e noʻonoʻo makemake wau e hana i ka lani hōkū ma kahi CSS, a laila ʻaʻole pono nā mea a pau iaʻu, no ka meaPono e ʻike ʻia nā hōkū i nā kūlana maʻamau, a inā ua hana mua lākou i nā hoʻonohonoho, ʻaʻole ia e nani loa a ʻaʻole maʻalahi, no ka mea hiki iā ʻoe ke kākau i kahi helu helu maʻamau i CSS, akā e nānā ʻino kēlā code, ʻaʻole hiki ke heluhelu ʻia a paʻakikī hoʻi. maopopo!



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