JavaScript: чекит тартуу

Келгиле, JavaScript-те чекитти браузерде кантип тартууну үйрөнөлү.. бул техникалык жактан кыйын эмес, бирок жөн эле тайсалдагандар үчүн, ал эми Интернетте чекит тартууга даяр эместер үчүн - бул албетте бүтүндөй жетишкендик.

Чекитти тартуунун көптөгөн жолдору бар, аларды карап көрөлү

Оюн конструкторлору



Unity/Godot/microStudio же миңдеген оюн куруучулардын бирин колдонуу менен.. алардын баары JavaScript же Webassembly боло турган кандайдыр бир кодду түзүшөт жана дагы эле бизге ойду көрсөтөт.Бизди бул жол кызыктырбайт.биз чындап эле эмне болуп жатканын түшүнбөйбүз, кодду көзөмөлдөө баштапкы коддо минималдуу жана окулбай калат, анын үстүнө бул абдан чоң.

JavaScript алкактары

Джедидин бул жолу бизге мүмкүн болушунча жакын, анткени.биздин кодубуз күн сыяктуу чоң жана түшүнүктүү болбойт, биз көп абстракт кылбайбыз, кодубузду китепканалар менен абдан көбөйтпөйбүз.Кодду көзөмөлдөө да сонун болмок

Таза JavaScript

Бул, албетте, Джединин жолу.Код мүмкүн болушунча татаал, көзөмөлдөөнү талап кылбаган нерселерди максималдуу башкаруу.Булак коддору эң минималдуу жана golimy JavaScript билими менен биз жумушка орношуу үчүн аман-эсен кете алабыз, анткени.бизге ушундай адамдар керек.

Бирок биздин милдет жумуш табуу эмес, жөнөкөй жана оңой жол менен чекит тартуу.Биздин вектор - ылдамдык жана ийкемдүүлүк.

Мен китепкананы тандадым

p5js чекит тартуу.Бул жөн гана эмес, албетте, эгерде тапшырма чекитти тартуу болсо жана ушунусу менен бүтсө, албетте, бардыгы жылаңач JavaScript менен жасалышы керек болчу, бирок мен муну перспективада кылып жатам, .k.анда сен экөөбүз укмуштай көрүнгөн башка иштерди жасайбыз, бул үчүн бизге жакшы курал керек.Алардын бири p5js болуп саналат.

Golim JavaScript'те биз инициализациялоо жана кайра тартуу функцияларын аныктоо үчүн кенепти түзүшүбүз керек, p5те бул да жасалат, бирок абдан кыска.

Бирок биринчи..

JavaScript иштеп чыгуу үчүн минималдуу чөйрө орнотуу

Жүктөп алуу

p5.min.js жана аны жанаша сактоо.

Бул сыяктуу

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

Бул сиздин браузерде төмөнкүдөй ачылат:

Ооба, HTML түшүнүктүү, бирок бул кандай JavaScript коду?

орнотуу функциясы - инициализация, ал бир жолу аткарылат, анда биз кенепти түзөбүз, б.а.чекит тарта турган аймак.window.innerWidth, window.innerHeight

экрандын туурасы жана бийиктиги болуп саналат, б.а.биз толук экрандуу кенепти аныктайбыз жана ооба, HTML да бул үчүн абдан маанилүү стилге ээ

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

Бизге башка эч нерсени инициализациялоонун кереги жок, жөн гана чекит тартуу керек.Принципти карагылачы бул жерде .. тартуу функциясы аткарылат, мисалы секундасына 60 жолу, ал эми секундасына 60 жолу чекитибизди тартабыз.. бул акылсыздык окшойт, биз бир чекитти тартышыбыз керек жана бул ал, бирок келечекте ал жалпы бардык анимация үчүн негиз болот.

Жалпысынан алганда, чекит коюу үчүн код абдан жөнөкөй:

point(10,10)

болду !

Бирок, биздин код бир аз чоңураак

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

фон кара

ак жылдыз

чекиттин калыңдыгы 10

жана биз аны вертикалдуу жана туурасынан ортосуна тартабыз.

Мейли.. биз кенептин үстүнө чекит тарттык, баары болушу керек, бирок биз аны JavaScriptсиз таза HTMLде тарта алабыз.. Ал кандай болмок?

Бул аны жөнөкөй жана жеңил кылат, бирок принциптери такыр башкача, бул жерде экрандын ортосуна квадрат тартуунун акыркы коду

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