JavaScript: lukis satu titik

Mari belajar cara melukis mata dalam JavaScript dalam penyemak imbas.. ia tidak sukar secara teknikal, tetapi hanya untuk mereka yang meraba-raba, dan bagi mereka yang tidak bersedia untuk melukis mata di Internet - ini sudah tentu satu pencapaian keseluruhan.

Terdapat banyak cara untuk menarik mata, mari kita lihat

Pembina permainan



Menggunakan Unity/Godot/microStudio atau mana-mana daripada beribu-ribu pembina permainan.. mereka semua akan mencipta beberapa kod dalam satu atau lain cara yang akan menjadi JavaScript atau Webassembly, dan masih menunjukkan kepada kami maksudnya.Kami tidak berminat dengan laluan ini.kita tidak akan benar-benar memahami apa yang berlaku, kawalan ke atas kod akan menjadi minimum dan tidak boleh dibaca dalam kod sumber, selain itu adalah besar.

Rangka Kerja JavaScript

Laluan Jedi ini sedekat mungkin dengan kami, kerana.kod kami tidak akan menjadi besar dan jelas seperti hari, kami tidak akan abstrak banyak, kami tidak akan banyak meningkatkan kod kami dengan perpustakaan.Kawalan kod juga bagus

JavaScript tulen

Ini sudah tentu cara Jedi.Kod ini adalah serumit mungkin, kawalan maksimum bagi perkara yang, seolah-olah, tidak perlu dikawal.Kod sumber adalah yang paling minimum dan dengan pengetahuan JavaScript golimy, kita boleh pergi dengan selamat untuk mendapatkan pekerjaan, kerana.kita memerlukan orang seperti itu.

Tetapi tugas kita bukan untuk mencari kerja, tetapi untuk melukis titik dengan cara yang mudah dan mudah.Vektor kami adalah kelajuan dan fleksibiliti.

Saya memilih perpustakaan

p5js untuk melukis titik.Bukan itu sahaja, sudah tentu, jika tugas itu adalah untuk menarik mata dan itu sahaja, sudah tentu, semuanya perlu dilakukan dalam JavaScript kosong, tetapi saya melakukan ini dalam perspektif, .k.maka anda dan saya akan melakukan perkara lain yang akan kelihatan hebat, dan untuk ini kita memerlukan alat yang baik.Salah satunya ialah p5js.

Dalam JavaScript golim, kita perlu mencipta kanvas untuk menentukan fungsi permulaan dan lukisan semula, dalam p5 ini juga dilakukan, tetapi sangat ringkas.

Tapi dulu..

Persediaan Persekitaran Minimum untuk Pembangunan JavaScript

Muat turun

p5.min.js dan simpan sebelah menyebelah.

macam ni

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

Akibatnya, pelayar anda akan terbuka seperti ini

Nah, HTML boleh difahami, tetapi apakah jenis kod JavaScript ini?

fungsi persediaan adalah pemula, ia dilaksanakan sekali, di dalamnya kita mencipta kanvas, i.e.kawasan di mana kita akan melukis mata.window.innerWidth, window.innerHeight

ialah lebar dan ketinggian skrin, i.e.kami mentakrifkan kanvas skrin penuh dan ya, HTML mempunyai gaya yang sangat penting untuk ini juga

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

Kita tidak perlu memulakan apa-apa lagi, kita hanya perlu melukis satu titik.Lihat prinsip di sini .. fungsi seri dilaksanakan, contohnya, 60 kali sesaat, dan 60 kali sesaat kita akan menarik mata kita.. nampaknya ini bodoh, kita hanya perlu melukis mata dan itu ia, tetapi pada masa akan datang ia akan menjadi asas untuk umum semua animasi.

Secara umum, kod untuk melukis titik adalah sangat mudah:

point(10,10)

dan semua!

Walau bagaimanapun, kod kami lebih besar sedikit

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

latar belakang hitam

bintang putih

ketebalan titik 10

dan kami melukisnya di tengah-tengah menegak dan mendatar.

Nah.. kami melukis titik pada kanvas, semuanya adalah seperti yang sepatutnya, tetapi kami juga boleh melukisnya pada HTML tulen tanpa sebarang JavaScript.. Apakah rupanya?

Ia menjadikannya asas dan lebih mudah, tetapi prinsipnya berbeza sama sekali, berikut ialah kod akhir untuk melukis segi empat sama di tengah skrin

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

Hasilnya hampir sama

Ya, agak mudah untuk melukis sesuatu di tengah dalam HTML, tetapi untuk menambah animasi, dan lebih-lebih lagi interaktif yang waras, anda perlu berfikir mengikut prinsip CSS.Walaupun ia adalah tugas yang agak menarik.Hanya satu perkara asas yang membunuh semua ini, tiada nombor rawak dalam CSS, ini akan membunuh semua percubaan kami pada masa hadapan, itulah sebabnya saya akan kurang memberi keutamaan kepada arah ini.

Jika saya membayangkan bahawa saya mahu membuat langit berbintang pada CSS kosong, maka semuanya tidak akan berjaya untuk saya, keranabintang harus muncul dalam kedudukan rawak, dan jika mereka mempunyai koordinat pra-dicipta, ia tidak akan begitu cantik dan tidak begitu mudah, kerana anda boleh menulis penjana nombor rawak dalam CSS, tetapi kod tersebut akan kelihatan benar-benar hodoh, tidak boleh dibaca dan sukar untuk faham!





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