JavaScript: nuqta chizish

Brauzerda JavaScript-da nuqta chizishni o'rganamiz.. bu texnik jihatdan qiyin emas, faqat chalg'itadiganlar uchun va Internetda nuqta chizishga tayyor bo'lmaganlar uchun - bu, albatta, butun yutuq.

Nuqtani chizishning ko'plab usullari mavjud, keling, ularni ko'rib chiqaylik

O'yin konstruktorlari



Unity/Godot/microStudio yoki minglab o'yin quruvchilardan foydalanish.. Ularning barchasi u yoki bu tarzda JavaScript yoki Webassembly kodini yaratadi va baribir bizga fikrni ko'rsatadi.Bizni bu yo'l qiziqtirmaydi.biz haqiqatan ham nima bo'layotganini tushunolmaymiz, kodni boshqarish manba kodida minimal va o'qib bo'lmaydigan bo'ladi, bundan tashqari u juda katta.

JavaScript ramkalar

Jedining bu yo'li bizga imkon qadar yaqin, chunki.bizning kodimiz kun kabi katta va ravshan bo'lmaydi, biz ko'p mavhum bo'lmaymiz, kutubxonalar bilan kodimizni juda ko'paytirmaymiz.Kod nazorati ham ajoyib bo'lar edi

Sof JavaScript

Bu, albatta, Jedining yo'li.Kod imkon qadar murakkab, narsalarni maksimal darajada boshqarish, go'yo nazorat qilish kerak emas.Manba kodlari eng minimal va golimy JavaScript bilimi bilan, biz faqat xavfsiz ish olish uchun borish mumkin, chunki.bizga shunday insonlar kerak.

Ammo bizning vazifamiz ish topish emas, balki oddiy va oson yo'l bilan nuqta chizishdir.Bizning vektorimiz tezlik va moslashuvchanlikdir.

Men kutubxonani tanladim

p5js nuqta chizish.Bu shunchaki emas, albatta, agar vazifa nuqtani chizish bo'lsa va tamom bo'lsa, albatta, hamma narsa yalang'och JavaScript-da bajarilishi kerak edi, lekin men buni istiqbolda qilyapman, .k.keyin siz va men ajoyib ko'rinadigan boshqa narsalarni qilamiz va buning uchun bizga yaxshi vosita kerak.Ulardan biri p5js.

Golim JavaScript-da biz ishga tushirish va qayta chizish funktsiyalarini aniqlash uchun tuval yaratishimiz kerak, p5 da bu ham amalga oshiriladi, lekin juda ixcham.

Lekin birinchi..

JavaScript-ni ishlab chiqish uchun minimal muhitni sozlash

Yuklab olish

p5.min.js va uni yonma-yon saqlang.

mana bunday

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

Natijada brauzeringiz shu tarzda ochiladi

Xo'sh, HTML tushunarli, lekin bu qanday JavaScript kodi?

o'rnatish funktsiyasi - ishga tushirish, u bir marta bajariladi, unda biz tuval yaratamiz, ya'ni.nuqta chizadigan maydon.window.innerWidth, window.innerHeight

ekranning kengligi va balandligi, ya'ni.biz to'liq ekranli tuvalni belgilaymiz va ha, HTML buning uchun juda muhim uslubga ega

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

Boshqa hech narsani ishga tushirishimiz shart emas, faqat nuqta chizishimiz kerak.Bu erda printsipga qarang .. chizish funksiyasi bajariladi, masalan, soniyada 60 marta va soniyada 60 marta biz nuqtani chizamiz .. bu ahmoqona tuyuladi, biz shunchaki nuqta chizishimiz kerak va bu u, lekin kelajakda u umumiy barcha animatsiya uchun asos bo'ladi.

Umuman olganda, nuqta chizish uchun kod juda oddiy:

point(10,10)

va tamom !

Biroq, bizning kodimiz biroz kattaroqdir

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

fon qora

oq yulduz

nuqta qalinligi 10

va biz uni vertikal va gorizontalning markazida chizamiz.

Xo'sh.. biz tuvalga nuqta chizdik, hamma narsa bo'lishi kerak edi, lekin biz uni hech qanday JavaScriptsiz sof HTMLda ham chizishimiz mumkin edi.. U qanday ko'rinishda bo'lar edi?

Bu uni oddiy va hatto osonlashtiradi, lekin printsiplar butunlay boshqacha, bu erda ekranning markazida kvadrat chizish uchun yakuniy kod

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

Natija deyarli bir xil

Ha, HTMLda markazda biror narsani chizish juda oson, lekin animatsiyalarni qo'shish va undan ham ko'proq aqlli interaktiv bo'lish uchun siz CSS tamoyillari bo'yicha o'ylashingiz kerak bo'ladi.Bu juda qiziqarli vazifa bo'lsa-da.Bularning barchasini faqat bitta elementar narsa o'ldiradi, CSS-da tasodifiy raqamlar yo'q, bu kelajakda bizning barcha urinishlarimizni o'ldiradi, shuning uchun men bu yo'nalishga kamroq ustunlik beraman.

Agar yalang'och CSS-da yulduzli osmonni yaratmoqchi ekanligimni tasavvur qilsam, men uchun hamma narsa ishlamaydi, chunkiyulduzlar tasodifiy joylarda paydo bo'lishi kerak va agar ular oldindan yaratilgan koordinatalarga ega bo'lsa, bu unchalik chiroyli va oddiy bo'lmaydi, chunki siz CSS-da tasodifiy sonlar generatorini yozishingiz mumkin, ammo bunday kod butunlay xunuk, o'qib bo'lmaydigan va qiyin ko'rinadi. tushunmoq!



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