Ваш путеводитель по: удобству при написании кода на холсте

ВАШЕ РУКОВОДСТВО ПО

Удобства при написании кода на холсте

В том числе несколько вы не найдете больше нигде!

Приветствуем читателей из ◎ Ваш путеводитель по творческому программированию на холсте

Удобства — Зеваете? Что ж… когда вы путешествуете с кодом, именно эти вещи заставляют вас опустить окно и включить свою любимую мелодию!

Мы будем использовать ZIM JavasScript Canvas Framework. Чтобы узнать о других параметрах холста, см. ◎ Ваше руководство по выбору библиотеки или фреймворка холста JavaScript.

Взгляните на эту кнопку!

Вы можете программировать вместе с нами, если хотите. Мы воспользуемся Детским редактором, затем скопируем или напечатаем этот код и нажмем TEST.

new Button().sca(2).center();

Чтобы изменить внешний вид кнопки, мы можем установить параметры кнопки в круглых скобках () при создании кнопки. Для получения информации о параметрах см. ◎ Ваше руководство по концепциям кодирования с помощью красочного холста. Тип и тест:

new Button(100,100,"GO",pink,green)
    .sca(2)
    .center();

Пока все хорошо, но что, если нам нужен угол 0. Параметры идут по порядку. Параметр угла является 11-м параметром. Он идет после цвета текста и настроек границы. Вот параметры, указанные в ZIM Docs.

Возвращаясь к кнопке по умолчанию с углом 0, наша когда-то простая кнопка больше не выглядит очень простой. Мы должны поместить заполнитель null (или undefined) для каждого неуказанного параметра. Введите это, если осмелитесь!

new Button(null,null,null,null,null,null,null,null,null,null,0)
    .sca(2)
    .center();

Это неуправляемо. Решением было бы создать кнопку, а затем установить для свойства угла значение 0, чтобы изменить кнопку. Но это двухэтапный процесс.

В ZIM DUO (версия 2) мы решили эту проблему!

Мы сделали так, чтобы вы могли использовать традиционные параметры по порядку ИЛИ вы могли передать один параметр, который является Configuration Object в форме Object Literal со свойствами, соответствующими именам параметров. У нас есть два способа работы с параметрами, поэтому мы называем это техникой ZIM DUO.

Литерал объекта — это конструкция JavaScript следующего формата: {свойство: значение, свойство: значение}. Это похоже на CSS, но на самом деле, поскольку он появился первым, CSS выглядит как объектный литерал.

Ниже вы увидите, что мы снова вернулись к нашей простой кнопке, но теперь без угла! Как очень удобно! (Обратите внимание, что порядок свойств в объекте конфигурации не имеет значения.) Выбор между двумя форматами зависит от вас. Иногда полезно использовать более короткий формат, а иногда для ясности лучше использовать объект конфигурации.

Тип и ТЕСТ:

new Button({corner:0}).sca(2).center();

Насколько нам известно, ZIM — единственный в мире фреймворк, предлагающий удобство двойного параметра. Вы можете использовать это для своих собственных классов. См. zob() в ZIM Docs (сокращение от ZIM object). Отдельный код находится на GitHub, поэтому вы можете включить его в свою библиотеку или фреймворк независимо от ZIM.

Но я хочу разные цветовые круги! Вааааа!

В ZIM есть класс Tile(), позволяющий легко разбивать объект на столбцы и строки. ОЧИСТИТЕ код, введите и ПРОВЕРЬТЕ следующее:

new Tile(new Circle(50, purple), 8, 5, 10, 10)
    .center();

Что если вам нужны случайные фиолетовые, зеленые и желтые цвета? Мы могли бы выбрать случайный цвет заранее. Вот как мы это делаем, используя одно из удобных средств JavaScript, называемое Array.

Массив — это список вещей. В некоторых языках вещи должны быть одного типа, но в JavaScript это не имеет значения. Однако, как правило, рекомендуется делать их одного типа, а затем сохранять вещи разных типов в литерале объекта, чтобы вы могли пометить содержимое. Массив использует порядковые номера, начинающиеся с 0, для доступа к своим элементам. Существуют методы массива для сортировки, добавления и удаления элементов, поиска индекса элемента и т. д. Смотрите ZIM Kids Magic для простого описания или ZIM Skool Lesson 05 для более полного описания.

const colors = [purple, green, yellow]; // Array
let color = colors[0]; // color would be purple
color = colors[colors.length-1]; // yellow
// we can use Math.random() to get a number between 0 and .9999
// we can multiply that by the length of the array
// and then use Math.floor() to round down to a whole number
// and then get the color in the array at that number
// OR we can use the handy ZIM rand() 
// See the ZIM Docs for the conveniences of ZIM rand()
color = colors[rand(colors.length-1)];
// or we can use the handy ZIM shuffle() 
// to shuffle the array 
// then get the first element ;-)
color = shuffle(colors)[0];
// these are some code conveniences in ZIM 
// that are independent of the canvas but handy 

К сожалению, получение случайного цвета даст нам не плитку случайных цветов, а плитку того же цвета, что и выбранный:

const colors = [purple, green, yellow];
let color = shuffle(colors)[0];
new Tile(new Circle(50, color), 8, 5, 10, 10)
    .center();

Мы могли бы построить плитку самостоятельно, зациклив количество столбцов и строк, создав и поместив круг случайного цвета в каждом цикле. Но это работа, поэтому мы в первую очередь создали удобный класс Tile!

В ЗИМ ВЕЭ (версия 5) мы решили эту проблему

Мы добавили динамические параметры, которые мы называем Значения ZIM VEE. Вы можете передать динамические параметры классу или методу, и значения будут выбраны классом или методом. (Внутри мы используем класс ZIM Pick(), который доступен за пределами ZIM на GitHub.) Существуют следующие типы:

1. массив [один, два, три] выбирает случайным образом
2. диапазон {min:50, max:100} будет выбран из диапазона
3. серия (один, два, три) выберет следующий по порядку
4. функция () {возвращаемое значение} выберет возвращаемое значение
5. объект {noPick:[1,2,3]} для обхода ZIM VEE
6. комбинация любого из них для рекурсивного выбора
7. все остальное будет выбрано как есть

Итак, вы видите, как получить случайные цвета в нашей плитке? Введите это и ПРОВЕРЬТЕ:

const colors = [purple, green, yellow];
new Tile(new Circle(50, colors), 8, 5, 10, 10)
    .center();

Вот плитка с рядом. Мы также могли бы передать массив фигур и случайным образом разбить разные фигуры или передать серию компонентов и разбить компоненты по порядку. Здесь мы просто замостим круги серией цветов. Введите этот ТЕСТ:

const colors = series(purple, green, yellow);
new Tile(new Circle(50, colors), 8, 5, 10, 10)
    .center();

Динамический параметр предназначен не только для Tile. Вот еще несколько примеров, чтобы показать, насколько это удобно. Насколько нам известно, система динамических параметров уникальна для JavaScript Canvas Framework ZIM.

1. Испускание различных частиц с помощью Emitter
2. Вызов интервальной функции в определенное время
3. Настройка стилей случайным образом, последовательно или функционально

В цепной банде!

Одно удобство, которое помогает ZIM быть в разы меньше других каркасов холста, — это Chaining. Цепочка — это когда вы добавляете методы к методам и т. д. Приведем пример, потом будем описывать дальше.

// without chaining (105 characters):
const rect = new Rectangle();
rect.scale = 3;
rect.alpha = 0;
rect.center();
rect.animate({alpha:1});
// with chaining (58 characters):
new Rectangle().sca(3).alp(0).center().animate({alpha:1});
// chaining 55% the size in this case
// or on separate lines (can comment out lines too):
new Rectangle()
    .sca(3)
    .alp(0)
    .center()
    .animate({alpha:1});

КАК РАБОТАЕТ ЦЕПОЧКА:
Методы привязаны к объектам. Чтобы цепочка работала, каждый метод должен возвращать объект. В методе объект представлен ключевым словом this. Методы ZIM возвращают this и могут быть объединены в цепочку. Иногда метод должен возвращать значение — например, функция hitTestPoint() возвращает значение true или false, поэтому метод нельзя связать в цепочку. Метод on() для событий также не должен быть цепочкой.

ZIM предоставляет набор коротких цепочек методов, которые соответствуют традиционным свойствам преобразования и другим функциям. Вот некоторые — вы можете догадаться, что они делают? Если нет, вы можете проверить их в ZIM Docs в разделе METHODS › Short Chainable.

pos(), loc(), mov(), sca(), alp(), hov(), rot(), reg(), siz(),
ske(), tap(), hov(), cur(), top(), bot(), ord(), sha()

Другие методы также могут быть объединены в цепочку, например

center(), centerReg(), animate(), cache(), setMask(), etc.
tap() and change() are chainable ways to capture events.

Я чувствую себя дураком!

Циклы удобны тем, что все языки программирования должны запускать блок кода столько раз, сколько указано в цикле. Обычно есть счетчик, который мы называем iterator, поэтому мы часто сохраняем его в переменной с именем i. Если мы зацикливаемся внутри цикла, то переходим к j, а затем к k.

Вот пример цикла, который записывает номер цикла, начиная с 0, в console. Чтобы увидеть консоль, вы можете нажать F12 или функцию F12 или открыть консоль через меню браузера (в разделе инструментов разработчика или других инструментов), а затем на вкладке консоли. Введите это в онлайн-редакторе и нажмите TEST, затем F12. Посмотрите результат кода в консоли (не обращайте внимания на предупреждения редактора ace).

// LOOP (you do not need to type the comments)
// start condition: i will be 0
// loop condition: as long as i is less than 10
// what to do after each loop: increase i by 1
for (let i=0; i < 10; i++) {
  console.log(i); // 0-9
}

Это называется for loop. Это самый распространенный тип петли. Есть несколько других типов, таких как while loop и foreach loop. Циклы отлично подходят для обхода массива, чтобы получить каждое значение массива.

Вместо console.log() мы можем использовать удобную функцию ZIM под названием zog(). zog() делает то же самое, что и console.log(), но короче. Вы также можете использовать разные цвета, такие как zogr(), zogb(), zogy(), zogp() и другие. В ZIM есть несколько методов-оболочек, состоящих из трех букв, которые представляют собой короткие пути к различным командам JavaScript. Хотя DOM не находится в центре внимания ZIM, существуют функции-оболочки, помогающие с DOM. Например, zid() заменяет document.getElementById(), а zet() совпадает с jQuery $().

Введите TEST и F12, чтобы увидеть каждое имя. Вы тоже можете попробовать цвета!

const names = ["Dr Abstract", "Pragma", "OwMe Cat"];
for (let i=0; i < names.length; i++) {
  zog(names[i]); 
}

Цикл for не очень удобен в использовании, так как есть три шага, разделенные точкой с запятой (;), а последний шаг не получает ни одного. При обучении кодированию и даже после многих лет кодирования с этим форматом довольно часто совершаются ошибки.

Цикл ЗИМ

Цикл ZIM очень удобен и легко запоминается, поскольку работает так же, как on(), interval() и timeout(). Вы указываете циклу ZIM, что нужно пройти, и он каждый раз вызывает функцию и предоставляет ей соответствующую информацию. Давайте попробуем несколько примеров:

loop(10, i=>{
  zog(i);
});
const names = ["Dr Abstract", "Pragma", "OwMe Cat"];
loop(names, name=>{
  zog(name); 
});

Вау! 59% размера циклов JavaScript

Мы часто хотим пройтись по контейнеру, чтобы получить его дочерние элементы. Вот сравнение между циклом for и циклом ZIM для этого:

// a default Tile with 9 circles in a 3x3 grid
const circles = new Tile().center();
// start alpha at .1 and increase by .1 each time
for (let i=0; i < circles.numChildren; i++) {
  circles.getChildAt(i).alp(.1+i*.1);
}
ZIM LOOP
circles.loop((circle, i)=>{
  circle.alp(.1+i*.1);
});

Разрыв и продолжение в циклах

Иногда мы хотим перейти к следующему циклу. Для этого мы используем ключевое слово continue в традиционном цикле или используем return для цикла ZIM.

Иногда мы хотим полностью завершить цикл. Для этого мы используем ключевое слово break в традиционном цикле или return a value для цикла ZIM.

Это становится немного продвинутым, мы просто приводим его, чтобы отметить, что возвращаемое значение для цикла может быть удобным в некоторых случаях. Например, проверка того, является ли что-то в цикле хорошим или плохим, или получение общего результата ниже максимального и т. д.

ВЫВОД

Мы надеемся, что вы не возражаете, если мы скажем вам, что у доктора Абстракта мурашки по коже, когда он рассматривает эти новшества! В этом руководстве мы рассмотрели четыре примера удобства:

1. Обычные параметры или объект конфигурации (ZIM DUO)
2. Динамические параметры (ЗИМ ВЭЭ)
3. Методы цепочки и коротких цепочек
4. Зацикливание и удобная функция/метод loop()

По пути мы видели и другие удобства, такие как rand(), shuffle(), Tile(), zog(). Мы изучили дополнительные основы программирования на JavaScript массивов, которые представляют собой список вещей, и циклы for, которые удобны для циклического обхода массивов.

Каждый класс, метод и функция в ZIM — это тоже удобство! Перетаскивание одной строки, множественные тесты на попадание, масштабирование кадра и многое другое. Полный список смотрите на странице ZIM About.

дальнейшее чтение

Еще одно захватывающее удобство на холсте - СТИЛЬ. См. ◎ Ваше руководство по СТИЛЮ на холсте.

Если вы искали именно удобство холста по сравнению с HTML DOM, см. ◎ Ваше руководство по использованию библиотеки или фреймворка холста JavaScript.

Чтобы узнать все о кодировании на холсте, посетите ◎ Ваше руководство по программированию на холсте.

Всего наилучшего! Доктор Аннотация.

Следите за нами в Твиттере на ZIM Learn, а вот ZIM Learn на YouTube!