И как те могат да ви помогнат да започнете да кодирате

Кодът управлява нашите приложения, игри и системи на обществото, но на по-лично ниво кодът е магически пъзел, чудесен за разказване на истории, изкуство и комуникация. Жалко е, че хората пропускат чудесата на кода, мислейки, че не могат да кодират или не искат. Така че, моля, кодирайте с мен - наистина. Само с няколко кликвания и докосвания можем да изследваме магията.

ИНОВАЦИИ 1 & 2 :: Онлайн редакторът и верижното свързване

Готов ли си? Отворете този Онлайн редактор, който направихме за деца. Разбира се… време е отново да мислите като дете. Вълнувайте се с нещо ново. Сега въведете или копирайте това в редактора и натиснете TEST (след това плъзнете около кръга).

new Circle().center().drag();

Това е доста невероятно. Ние кодирахме за по-малко от минута без изтегляне на софтуер и без сложни инсталации. Кодът дори изглежда доста четим! Ние свързваме нещата с точка, което означава по-малко линии.

Circle се нарича клас, който съдържа инструкции за създаване на кръг. Създаваме нов обект Circle от класа. Обектът е като съществително. След това казваме на обекта да бъде центриран и да може да се плъзга. Те се наричат ​​методи. Методите са като глаголи, които казват на обекта да направи нещо или да накара нещо да му бъде направено. Можем също да подадем параметри в кръглите скоби ( ), за да зададем свойства на обекта. Свойствата са като прилагателни, например размер и цвят.

Нека анимираме лилав кръг от малък към голям. Променете кода и ТЕСТВАЙТЕ:

new Circle(50, purple).center().animate({scale:2});

Частта {scale:2} се нарича Обектен литерал. Това е начин да направите празен обект, който притежава някои свойства. Можем да анимираме и още свойства там, като: {scale:2, x:100, alpha:0}

ИНОВАЦИИ 3 и 4:: Конфигурационни обекти и динамични параметри

Нека направим малко изкуство. Ще подреждаме полигони. Poly() има следните параметри. Не е необходимо да използваме всички тези, но тези, които използваме, трябва да са подредени и трябва да поставим null или undefined, ако искаме да пропуснем някои.

Искаме да зададем цвета на полигоните, но просто искаме радиус, страни и размер на точка по подразбиране. Така че ще трябва да направим следното:

new Poly(null, null, null, pink, dark, 5)

Това е доста досадно и може да направи кода труден за четене. Така че можем да използваме това, което се нарича конфигурационен обект — или конфигурационен обект, където поставяме имената на параметрите като свойства в обектен литерал {}.

Ние кодираме в JavaScript, използвайки ZIM. В ZIM двата начина за създаване на параметри се наричат ​​техниката ZIM DUO (лансирана във версия 2) и е иновация, която прави кодирането по-гъвкаво — можете да изберете какъвто начин желаете.

new Poly({color:pink, borderColor:dark, borderWidth:5})

Когато подреждаме Poly, не искаме всички те да изглеждат еднакво. Така че можем да предадем масив [] от цветове, от които да избираме! Също така ще поставим Poly вътре в Tile като негов първи параметър, последван от colsи rowsна Tile. ИЗЧИСТЕТЕ кода и въведете или копирайте това, след което ТЕСТВАЙТЕ:

new Tile(new Poly({
    color:[orange,green,blue],
    borderColor:dark,
    borderWidth:5
}), 8, 6).center();

Ако искаме да направим цветовете в ред, тогава можем да използваме серия ZIM вместо масива: series(orange, green, blue).

Те се наричат ​​динамични параметри, защото класът или методът избира от стойностите на параметрите. Може също да има диапазон {min:10, max:100} или резултати от функция. Те се наричат ​​ZIM VEE стойности в ZIM, тъй като бяха пуснати във версия 5.

Нека анимираме нашето изкуство в последователност! Обърнете внимание как използваме конфигурационните обекти на ZIM DUO и има друга ZIM VEE стойност за времето. Това са иновации в помощ на програмирането! Коригирайте кода както следва и натиснете ТЕСТ:

new Tile(new Poly({
    color:[orange,green,blue],
    borderColor:dark,
    borderWidth:5
}), 8, 6)
    .center()
    .animate({
        props:{rotation:360},
        time:{min:1,max:2},
        sequence:.1,
        loop:true,
        rewind:true
    });

ДРУГИ ПРИМЕРИ

Всички горепосочени икони са за игри, пъзели, приложения и т.н., кодирани в CodePen. Това е място, където можете да изследвате кода в онлайн редактора на CodePen. ZIM има страница CodePen Topic с много шаблони за начало и примери!

ДОПЪЛНИТЕЛНА ИНФОРМАЦИЯ

Ако харесвате това, което виждате тук и искате да изследвате повече, ние сме подготвили основно ръководство, което е разделено на по-специфични ръководства, просто започнете оттук и ще бъдете на път към чудесно хоби или евентуално към нова кариера! Уведомете и другите – от деца до колеги!

◎ Вашето ръководство за кодиране на креативност върху платното!

Ръководствата са пълни с повече иновации в кодирането. Наслади се!

Доктор Абстракт

Професор в Sheridan Interactive Media
Запишете се ведногодишната следдипломна програма

Следвайте ни в Twitter в ZIM Learn и тук е ZIM Learn в YouTube!