-
Дорогоцінний камінь, дуже гарний камінь!
-
Але ви знаєте, що краще
ніж один дорогоцінний камінь?
-
Це цілий ряд дорогоцінних каменів!
-
І, звичайно ж, тепер ми знаємо,
-
найкращий спосіб, щоб зробити ряд
дорогоцінних каменів, з допомогою циклів.
-
Так що давайте використовувати цикл
намалювати 12 дорогоцінних каменів в ряд.
-
Рухаючись зліва направо
по всьому екрану.
-
Щось на зразок цього.
-
отже це є " for (var i = 0;
-
i < 12; i ++)
-
А потім ми візьмемо цей рядок
і перемістимо його всередину сюди
-
Так що тепер у нас є
12 дорогоцінних каменів,
-
але вони насправді всі поскладані
зверху один на одному.
-
Пам'ятаєте, що ми хочемо, щоб вони
були по всьому екрану.
-
Це означає, що ми хочемо
щоб змінювався "х".
-
А прямо зараз, "x" має 36 але ми
хочемо, щоб вона була кожного разу різною.
-
Це означає, що ми хочемо, щоб вона
залежала від "і".
-
Так що ми можемо це зробити
просто ввівши: "i" помножити 36 разів.
-
Таким чином, перший це 0,
а потім 36, і 72, і так далі, і так далі.
-
класно! Тепер у нас є ряд
дорогоцінних каменів.
-
І цей видгляд нагадує мені
-
ті сцени, що в
Індіані Джонс або Аладіні,
-
де герой знаходить
підземний скарб з дорогоцінних каменів,
-
але вони зазвичай знаходять
набагато більше, ніж ці.
-
Не тільки ряд дорогоцінних каменів
але купу каміння.
-
то, як ми зробити щоб дорогоцінні камені
-
йшли також вздовж всього екрану вниз?
-
Ну, ми могли б почати з того, що повторили
б цикл for, а потім скопіювали і вставити,
-
але потім змінювали б "Y" кожного разу.
-
І, таким чином ми змінимо її
на 60, а потім на 90.
-
Так, що тепер у нас є три ряди каменів
і це круто
-
але це також стає дуже нудним
-
тому що все, що я роблю це копіюю і
вставляюю змінюючи цю одну маленьку річ.
-
І, зазвичай, в минулому, коли ми починали
писати повторюваний код як зараз
-
ми думали, "О, можливо нам слід просто,
використати цикл замість цього"
-
але ми вже використовуємо цикл;
-
Отже, що робити
щоб уникнути написання цього,
-
Ви знаєте, повторювання цього
копіювання-вставляння?
-
Ну, це те, що ми називаємо
"Вкладені цикли for": цикл в циклі.
-
І, те, що ми будемо робити
це створимо зовнішній цикл,
-
і це те, що буде дбати про рух
вздовж екрану до низу,
-
і тоді наш внутрішній цикл буде
слідкувати про те, що робиться зараз,
-
рух зліва направо.
-
Дозвольте мені показати вам,
що я маю на увазі.
-
Отже, "for"- і ми використаємо іншу змінну
"j" так як ми вже використовуємо "i"
-
І так, "for(var j = 0" ми введемо, що
"j < 13; j++)".
-
Тому, це буде наш зовнішній контур,
відповідальний за рух зверху вниз.
-
І тоді ми тільки збираємося взяти
один з наших попередніх циклів for,
-
і помістимо його всередину там
і зафіксуємо відступи,
-
ми видалимо ці старі.
-
Отже, тепер те, що у нас є
-
це всі вони поскладані один на одному
зверху в тому ж рядку.
-
І так, справа в тому, що ми хочемо
змінити "у", чи не так?
-
Це те, що ми змінювали до того
коли копіювали і вставляли.
-
і прямо зараз, "у" завжди 90.
-
Ми хочемо змінити "y" для кожного рядка.
-
Отже, шлях по "х" залежить від "i",
ми хочемо, щоб "у" залежала від "j".
-
Таким чином, ми далі і змінемо це.
-
щось на зразок, можливо,
"j" помножити на 30.
-
Ура! Так багато дорогоцінних каменів!
Чудово!
-
Давайте розглянемо, що це робить ще раз.
-
Зовнішній цикл створює цю змінну "j"
і збільшує його до 13
-
У кожному виконанні зовнішнього циклу,
він запускає цей внутрішній цикл.
-
І внутрішній цикл створює
змінну "i" що збільшується до 12.
-
І для кожного
виконання внутрішнього циклу,
-
він малює картинку по "х" та "у"
що базуються на "i" та "j".
-
І ця "i" змінюється набагато частіше
ніж "J" через це.
-
Щоб спробувати і зрозуміти
це, навіть ще краще,
-
спробуємо візуалізувати
значення "i" та "j"
-
Тому, я прокоментую зображення,
-
а потім встановлю колір заливки,
-
і я збираюся використати текстову команду
щоб показати значення 'j'.
-
Отже "text(j..." а потім я поставлю у
відповідному місці тут.
-
Гаразд, тепер ми можемо бачити, що "j"
йде від 0 до 12.
-
Це по суті, де наші ряди каменів
розташовані так само.
-
І зараз ми візуалізмуємо "i" і побачимо
як вона змінюється.
-
Отже, для "i" зробимо інший колір.
-
Тоді ми поставимо кудись "i"
-
І ми змінимо її "х"
так, що вона з'явиться по всьому екрану.
-
Ми зробимо те ж саме для "у".
-
Тепер ми можемо бачити, що "i"
йде від 0 до 11.
-
Отже. "i" як я вже говорила,
змінюється багато частіше.
-
І цей рядок коду запускається на виконання
набагато більше разів, ніж цей рядок коду,
-
Так як, цей рядок коду виконується кожний
для виконання цього внутрішнього циклу for
-
в той час я цей к рядок коду
тільки виконанується
-
для кожного виконання зовнішнього циклу.
-
Таким чином, це візуалізація з "i" та "j",
-
сподіваюсь це допоможе вам зрозуміти
-
набагато краще, що відбувається з цими
вкладеними циклами.
-
Тепер повернемось до наших
дорогоцінних каменів, так як вони кращі!
-
Так, що ви багато чого можете зробити з
вкладеними циклами for
-
Якщо ви просто подумаєте про
все на світі
-
який схожий на двовимірну сітку,
шахівницу, стьобану ковдру,
-
зірки на прапорі США,
класні візерунки та шпалери
-
почніть з вашої уяви, і
просто пограйтеся з цим кодом,
-
змінюючи зображення.
-
І почну з того, що заміню зображення
на серце!
-
Для того, щоб показати вам, наскільки
Я люблю вкладені цикли for!
