JavaScript: tarik titik

Ayo sinau carane tarik titik ing JavaScript ing browser .. iku ora teknis angel, nanging mung kanggo wong-wong sing fumble, lan kanggo wong-wong sing ora disiapake kanggo tarik titik ing Internet - iki mesthi prestasi kabèh.

Ana akeh cara kanggo nggambar titik, ayo dideleng

Konstruktor game



Nggunakake Unity / Godot / microStudio utawa salah siji saka ewu tukang game .. kabeh bakal nggawe sawetara kode ing salah siji cara utawa liyane sing bakal JavaScript utawa Webassembly, lan isih nuduhake kita titik.Kita ora kasengsem ing dalan iki.kita ora bakal ngerti tenan apa mengkono, kontrol liwat kode bakal minimal lan ora bisa diwaca ing kode sumber, saliyane iku ageng.

Kerangka JavaScript

Iki dalan saka Jedi minangka cedhak kita, amarga.kode kita ora bakal gedhe lan cetha minangka dina, kita ora abstrak akeh, kita ora bakal nemen nambah kode karo perpustakaan.Kontrol kode bakal apik banget

JavaScript murni

Iki mesthi cara Jedi.Kode iku minangka rumit sabisa, kontrol maksimum samubarang kang, kaya, ora perlu kanggo kontrol.Kode sumber sing paling minimal lan karo kawruh saka golimy JavaScript, kita mung bisa kanthi aman kanggo njaluk proyek, amarga.kita butuh wong kaya ngono.

Nanging tugas kita ora golek proyek, nanging nggambar titik kanthi cara sing gampang lan gampang.Vektor kita yaiku kacepetan lan keluwesan.

Aku milih perpustakaan

p5js kanggo nggambar titik.Iku ora mung sing, mesthi, yen tugas iki kanggo tarik titik lan iku, mesthi, kabeh kudu rampung ing JavaScript gundhul, nanging aku mengkono iki ing perspektif, .k.banjur sampeyan lan aku bakal nindakake liyane sing bakal katon apik tenan, lan iki kita kudu alat apik.Salah sijine yaiku p5js.

Ing golim JavaScript, kita kudu nggawe kanvas kanggo nemtokake fungsi initialization lan redrawing, ing p5 iki uga rampung, nanging banget concisely.

Nanging dhisik..

Persiyapan Lingkungan Minimal kanggo Pangembangan JavaScript

Ngundhuh

p5.min.js lan tetep jejer.

kaya iki

index.html

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

sketsa.js

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

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

Iki bakal mbukak ing browser sampeyan kaya iki:

Ya, HTML bisa dingerteni, nanging kode JavaScript apa iki?

fungsi persiyapan punika initialization, wis kaleksanan sapisan, ing kita nggawe kanvas, i.e.area ngendi kita bakal tarik titik.window.innerWidth, window.innerHeight

punika jembaré lan dhuwur saka layar, i.e.kita nemtokake kanvas layar wutuh lan ya, HTML nduweni gaya sing penting banget kanggo iki

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

Kita ora perlu miwiti apa-apa liyane, kita mung kudu nggambar titik.Deleng prinsip ing kene .. fungsi tarik dileksanakake, contone, 60 kaping per detik, lan 60 kaping per detik kita bakal tarik titik kita .. iku bakal koyone sing iki bodho, kita mung perlu kanggo tarik titik lan sing. iku, nanging ing mangsa iku bakal basis kanggo umum kabeh animasi.

Umumé, kode kanggo nggambar titik gampang banget:

point(10,10)

lan iku!

Nanging, kode kita rada gedhe

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

latar mburi ireng

lintang putih

ketebalan titik 10

lan kita tarik ing tengah vertikal lan horisontal.

Inggih .. kita nggambar titik ing kanvas, kabeh kaya sing dikarepake, nanging kita bisa nggambar ing HTML murni tanpa JavaScript.. Apa sing bakal katon?

Iku ndadekake dhasar lan malah luwih gampang, nanging prinsip temen beda, punika kode final kanggo nggambar kothak ing tengah layar.

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

Hasile meh padha

Ya, cukup gampang kanggo nggambar soko ing tengah ing HTML, nanging kanggo nambah animasi, lan malah luwih interaktif waras, sampeyan kudu mikir miturut prinsip CSS.Senajan iku cukup tugas menarik.Mung siji perkara dhasar sing mateni kabeh iki, ora ana nomer acak ing CSS, iki bakal mateni kabeh usaha kita ing mangsa ngarep, mulane aku bakal menehi pilihan sing kurang kanggo arah iki.

Yen aku mbayangno yen aku pengin nggawe langit lintang ing CSS gundhul, banjur kabeh ora bakal bisa kanggo kula, amargalintang kudu katon ing posisi acak, lan yen padha wis koordinat wis digawe, iku ora bakal dadi ayu lan ora supaya prasaja, amarga sampeyan bisa nulis generator nomer acak ing CSS, nanging kode kuwi bakal katon rampung elek, ora bisa diwaca lan hard kanggo ngertos!



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