JavaScript: нацртајте точка

Ајде да научиме како да нацртаме точка во JavaScript во прелистувач.. тоа не е технички тешко, но само за оние кои се шегуваат и за оние кои не се подготвени да нацртаат точка на Интернет - ова е секако цело достигнување.

Постојат многу начини да се извлече точка, ајде да ги погледнеме

Конструктори на игри



Користејќи Unity/Godot/microStudio или кој било од илјадниците создавачи на игри.. сите тие ќе создадат некој код на еден или друг начин кој ќе биде JavaScript или Webassembly, а сепак ќе ни ја покажат поентата.Нас не интересира овој пат.ние навистина нема да разбереме што се случува, контролата врз кодот ќе биде минимална и нечитлива во изворниот код, покрај тоа што е огромна.

JavaScript Рамки

Овој пат на Џедаите ни е што е можно поблизок, бидејќи.нашиот код нема да биде голем и јасен како ден, нема да апстрахираме многу, нема многу да го зголемиме нашиот код со библиотеки.Контролата на кодот исто така би била одлична

Чист JavaScript

Ова е секако начинот на џедаите.Кодот е максимално комплициран, максималната контрола на нештата која, како што рече, не треба да се контролира.Изворните шифри се најминимални и со познавање на golimy JavaScript, можеме само безбедно да одиме да се вработиме, затоа што.ни требаат такви луѓе.

Но, нашата задача не е да најдеме работа, туку да нацртаме точка на едноставен и лесен начин.Нашиот вектор е брзина и флексибилност.

Ја избрав библиотеката

p5js да нацрта точка.Не е само тоа, се разбира, ако задачата беше да се извлече точка и тоа е тоа, се разбира, сè ќе треба да се направи во гол JavaScript, но јас го правам ова во перспектива, .k.тогаш јас и ти ќе правиме други работи што ќе изгледаат неверојатно, а за ова ни треба добра алатка.Еден од нив е p5js.

Во golim JavaScript, треба да создадеме платно за да ги дефинираме функциите за иницијализација и прецртување, во p5 и ова е направено, но многу концизно.

Но прво..

Минимално поставување на околина за развој на JavaScript

Преземи

p5.min.js и чувајте го рамо до рамо.

како ова

индекс.html

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

скица.js

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

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

Како резултат на тоа, вашиот прелистувач ќе се отвори вака

Па, HTML е разбирлив, но каков вид JavaScript код е ова?

функцијата за поставување е иницијализација, се извршува еднаш, во неа создаваме платно, т.е.област каде што ќе нацртаме точка.прозорец.внатрешна ширина, прозорец.внатрешна висина

е ширината и висината на екранот, т.е.ние дефинираме платно на цел екран и да, HTML има многу важен стил и за ова

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

Не треба ништо друго да иницијализираме, само треба да нацртаме точка.Погледнете го принципот овде .. функцијата цртање се извршува, на пример, 60 пати во секунда, а 60 пати во секунда ќе ја нацртаме нашата точка.. се чини дека ова е глупаво, само треба да нацртаме точка и тоа е тоа, но во иднина ќе биде основа за општа анимација.

Во принцип, кодот за цртање точка е исклучително едноставен:

point(10,10)

и се!

Сепак, нашиот код е малку поголем

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

црна позадина

бела ѕвезда

дебелина на точка 10

и го цртаме во центарот на вертикалата и хоризонталата.

Па.. нацртавме точка на платното, се е како што треба, но можевме дури и да го нацртаме на чист HTML без никаков JavaScript.. Како би изгледало?

Тоа го прави елементарно и уште полесно, но принципите се сосема различни, еве го конечниот код за цртање квадрат во центарот на екранот

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

Резултатот е речиси ист

Да, многу е лесно да се нацрта нешто во центарот во HTML, но за да додадете анимации, а уште повеќе разумна интерактивна, ќе треба да размислувате според принципите на CSS.Иако тоа е доста интересна задача.Само една елементарна работа го убива сето ова, нема случајни броеви во CSS, ова ќе ги убие сите наши обиди во иднина, поради што ќе и дадам помала предност на оваа насока.

Ако замислам дека сакам да направам ѕвездено небо на гол CSS, тогаш сè нема да ми успее, бидејќиѕвездите треба да се појавуваат во случајни позиции, а ако имаат претходно креирани координати, нема да биде толку убаво и не толку едноставно, затоа што можете да напишете генератор на случаен број во CSS, но таквиот код ќе изгледа сосема грдо, нечитлив и тежок за разберете!



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