ЈаваСцрипт: нацртајте тачку

Хајде да научимо како да нацртамо тачку у ЈаваСцрипт-у у претраживачу.. није технички тешко, али само за оне који петљају, а за оне који нису спремни да нацртају тачку на Интернету - ово је наравно читаво достигнуће.

Постоји много начина да нацртате тачку, хајде да их погледамо

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



Користећи Унити/Годот/мицроСтудио или било који од хиљада градитеља игара.. сви ће они на овај или онај начин креирати неки код који ће бити ЈаваСцрипт или Вебассембли, а ипак ће нам показати поенту.Нас овај пут не занима.нећемо баш разумети шта се дешава, контрола над кодом ће бити минимална и нечитљива у изворном коду, осим тога огромна.

ЈаваСцрипт Фрамеворкс

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

Чисти ЈаваСцрипт

Ово је наравно пут Џедаја.Шифра је максимално компликована, максимална контрола ствари које, такорећи, не треба контролисати.Изворни кодови су најминималнији и са познавањем голимог ЈаваСцрипт-а можемо безбедно да идемо да се запослимо, јер.такви људи су нам потребни.

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

Ја сам изабрао библиотеку

p5js да нацртам тачку.Није само то, наравно, ако је задатак био да се нацрта тачка и то је то, наравно, све би морало да се ради у голом ЈаваСцрипт-у, али ово радим у перспективи, .к.онда ћемо ти и ја радити друге ствари које ће изгледати невероватно, а за ово нам је потребан добар алат.Један од њих је п5јс.

У голим ЈаваСцрипт-у, потребно је да креирамо платно да дефинишемо функције иницијализације и поновног цртања, у п5 је и то урађено, али врло концизно.

Али прво..

Минимално подешавање окружења за развој ЈаваСцрипт-а

Преузимање

p5.min.js и држите га један поред другог.

овако

индек.хтмл

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

скетцх.јс

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

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

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

Па, ХТМЛ је разумљив, али какав је ово ЈаваСцрипт код?

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

је ширина и висина екрана, тј.дефинишемо платно преко целог екрана и да, ХТМЛ такође има веома важан стил за ово

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

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

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

point(10,10)

и сви!

Међутим, наш код је мало већи

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

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

бела звезда

дебљина тачке 10

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

Па.. нацртали смо тачку на платну, све је како треба, али могли бисмо је чак и нацртати на чистом ХТМЛ-у без ЈаваСцрипта.. Како би то изгледало?

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

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

Резултат је скоро исти

Да, прилично је лако нацртати нешто у центру у ХТМЛ-у, али да бисте додали анимације, а још више нормалну интерактивност, мораћете да размишљате по принципима ЦСС-а.Иако је то прилично занимљив задатак.Све ово убија само једна елементарна ствар, у ЦСС-у нема насумичних бројева, ово ће убити све наше покушаје у будућности, због чега ћу мање давати предност овом правцу.

Ако замислим да желим да направим звездано небо на голом ЦСС-у, онда ми неће све успети, јерзвездице треба да се појављују на насумичне позиције, а ако имају унапред креиране координате, то неће бити тако лепо и не тако једноставно, јер можете написати генератор случајних бројева у ЦСС-у, али ће такав код изгледати потпуно ружно, нечитљиво и тешко разумети!



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