0:00:01.076,0:00:03.627
Дорогоцінний камінь, дуже гарний камінь!

0:00:03.917,0:00:06.035
Але ви знаєте, що краще[br]ніж один дорогоцінний камінь?

0:00:06.035,0:00:08.275
Це цілий ряд дорогоцінних каменів!

0:00:08.275,0:00:09.562
І, звичайно ж, тепер ми знаємо,

0:00:09.562,0:00:12.382
найкращий спосіб, щоб зробити ряд[br]дорогоцінних каменів, з допомогою циклів.

0:00:12.382,0:00:15.952
Так що давайте використовувати цикл[br]намалювати 12 дорогоцінних каменів в ряд.

0:00:15.952,0:00:19.523
Рухаючись зліва направо[br]по всьому екрану.

0:00:19.523,0:00:21.624
Щось на зразок цього.

0:00:21.624,0:00:26.006
отже це є " for (var i = 0;

0:00:26.006,0:00:30.686
i < 12; i ++)

0:00:30.686,0:00:34.939
А потім ми візьмемо цей рядок[br]і перемістимо його всередину сюди

0:00:35.909,0:00:37.979
Так що тепер у нас є[br]12 дорогоцінних каменів,

0:00:37.979,0:00:40.305
але вони насправді всі поскладані[br]зверху один на одному.

0:00:40.305,0:00:43.401
Пам'ятаєте, що ми хочемо, щоб вони[br]були по всьому екрану.

0:00:43.401,0:00:45.941
Це означає, що ми хочемо[br]щоб змінювався "х".

0:00:45.941,0:00:49.324
А прямо зараз, "x" має 36 але ми [br]хочемо, щоб вона була кожного разу різною.

0:00:49.324,0:00:51.749
Це означає, що ми хочемо, щоб вона[br]залежала від "і".

0:00:51.749,0:00:56.329
Так що ми можемо це зробити[br]просто ввівши: "i" помножити 36 разів.

0:00:56.329,0:01:01.627
Таким чином, перший це 0,[br]а потім 36, і 72, і так далі, і так далі.

0:01:02.317,0:01:04.405
класно! Тепер у нас є ряд[br]дорогоцінних каменів.

0:01:04.405,0:01:05.755
І цей видгляд нагадує мені

0:01:05.755,0:01:07.997
ті сцени, що в[br]Індіані Джонс або Аладіні,

0:01:07.997,0:01:11.306
де герой знаходить[br]підземний скарб з дорогоцінних каменів,

0:01:11.306,0:01:13.732
але вони зазвичай знаходять[br]набагато більше, ніж ці.

0:01:13.732,0:01:17.306
Не тільки ряд дорогоцінних каменів[br]але купу каміння.

0:01:17.306,0:01:20.399
то, як ми зробити щоб дорогоцінні камені

0:01:20.399,0:01:23.676
йшли також вздовж всього екрану вниз?

0:01:24.456,0:01:29.539
Ну, ми могли б почати з того, що повторили[br]б цикл for, а потім скопіювали і вставити,

0:01:30.449,0:01:32.795
але потім змінювали б "Y" кожного разу.

0:01:34.355,0:01:37.688
І, таким чином ми змінимо її[br]на 60, а потім на 90.

0:01:37.688,0:01:42.038
Так, що тепер у нас є три ряди каменів[br]і це круто

0:01:42.038,0:01:44.265
але це також стає дуже нудним

0:01:44.265,0:01:48.833
тому що все, що я роблю це копіюю і [br]вставляюю змінюючи цю одну маленьку річ.

0:01:48.833,0:01:52.679
І, зазвичай, в минулому, коли ми починали[br]писати повторюваний код як зараз

0:01:52.679,0:01:56.215
ми думали, "О, можливо нам слід просто,[br]використати цикл замість цього"

0:01:56.695,0:01:58.607
але ми вже використовуємо цикл;

0:01:58.607,0:02:01.014
Отже, що робити[br]щоб уникнути написання цього,

0:02:01.014,0:02:03.854
Ви знаєте, повторювання цього[br]копіювання-вставляння?

0:02:03.854,0:02:09.098
Ну, це те, що ми називаємо[br]"Вкладені цикли for": цикл в циклі.

0:02:09.098,0:02:11.852
І, те, що ми будемо робити[br]це створимо зовнішній цикл,

0:02:11.852,0:02:14.851
і це те, що буде дбати про рух[br]вздовж екрану до низу,

0:02:14.851,0:02:19.234
і тоді наш внутрішній цикл буде[br]слідкувати про те, що робиться зараз,

0:02:19.234,0:02:20.997
рух зліва направо.

0:02:21.977,0:02:23.406
Дозвольте мені показати вам,[br]що я маю на увазі.

0:02:23.756,0:02:29.721
Отже, "for"- і ми використаємо іншу змінну[br]"j" так як ми вже використовуємо "i"

0:02:29.721,0:02:35.974
І так, "for(var j = 0" ми введемо, що [br]"j < 13; j++)".

0:02:37.274,0:02:41.359
Тому, це буде наш зовнішній контур,[br]відповідальний за рух зверху вниз.

0:02:41.759,0:02:45.037
І тоді ми тільки збираємося взяти[br]один з наших попередніх циклів for,

0:02:45.037,0:02:49.444
і помістимо його всередину там[br]і зафіксуємо відступи,

0:02:50.274,0:02:52.164
ми видалимо ці старі.

0:02:52.944,0:02:55.449
Отже, тепер те, що у нас є

0:02:55.449,0:02:58.029
це всі вони поскладані один на одному[br]зверху в тому ж рядку.

0:02:58.479,0:03:01.969
І так, справа в тому, що ми хочемо[br]змінити "у", чи не так?

0:03:01.969,0:03:03.999
Це те, що ми змінювали до того[br]коли копіювали і вставляли.

0:03:03.999,0:03:05.838
і прямо зараз, "у" завжди 90.

0:03:05.838,0:03:08.710
Ми хочемо змінити "y" для кожного рядка.

0:03:09.200,0:03:15.308
Отже, шлях по "х" залежить від "i",[br]ми хочемо, щоб "у" залежала від "j".

0:03:15.838,0:03:19.173
Таким чином, ми далі і змінемо це.

0:03:19.173,0:03:23.803
щось на зразок, можливо, [br]"j" помножити на 30.

0:03:24.433,0:03:29.244
Ура! Так багато дорогоцінних каменів![br]Чудово!

0:03:29.704,0:03:32.336
Давайте розглянемо, що це робить ще раз.

0:03:32.336,0:03:37.060
Зовнішній цикл створює цю змінну "j"[br]і збільшує його до 13

0:03:38.340,0:03:42.820
У кожному виконанні зовнішнього циклу,[br]він запускає цей внутрішній цикл.

0:03:43.580,0:03:48.033
І внутрішній цикл створює[br]змінну "i" що збільшується до 12.

0:03:48.033,0:03:50.058
І для кожного[br]виконання внутрішнього циклу,

0:03:50.058,0:03:54.148
він малює картинку по "х" та "у"[br]що базуються на "i" та "j".

0:03:54.978,0:03:58.707
І ця "i" змінюється набагато частіше[br]ніж "J" через це.

0:03:59.287,0:04:01.228
Щоб спробувати і зрозуміти [br]це, навіть ще краще,

0:04:01.228,0:04:04.438
спробуємо візуалізувати[br]значення "i" та "j"

0:04:04.878,0:04:09.057
Тому, я прокоментую зображення,

0:04:09.057,0:04:11.637
а потім встановлю колір заливки,

0:04:11.637,0:04:14.976
і я збираюся використати текстову команду[br]щоб показати значення 'j'.

0:04:14.976,0:04:20.035
Отже "text(j..." а потім я поставлю у[br]відповідному місці тут.

0:04:21.035,0:04:25.569
Гаразд, тепер ми можемо бачити, що "j"[br]йде від 0 до 12.

0:04:25.569,0:04:29.739
Це по суті, де наші ряди каменів[br]розташовані так само.

0:04:31.569,0:04:34.934
І зараз ми візуалізмуємо "i" і побачимо[br]як вона змінюється.

0:04:35.174,0:04:38.886
Отже, для "i" зробимо інший колір.

0:04:42.586,0:04:45.635
Тоді ми поставимо кудись "i"

0:04:46.235,0:04:49.481
І ми змінимо її "х"[br]так, що вона з'явиться по всьому екрану.

0:04:49.481,0:04:53.338
Ми зробимо те ж саме для "у".

0:04:54.248,0:04:59.561
Тепер ми можемо бачити, що "i"[br]йде від 0 до 11.

0:04:59.561,0:05:04.326
Отже. "i" як я вже говорила,[br]змінюється багато частіше.

0:05:04.326,0:05:08.618
І цей рядок коду запускається на виконання[br]набагато більше разів, ніж цей рядок коду,

0:05:08.618,0:05:13.855
Так як, цей рядок коду виконується кожний[br]для виконання цього внутрішнього циклу for

0:05:13.855,0:05:16.387
в той час я цей к рядок коду[br]тільки виконанується

0:05:16.387,0:05:18.307
для кожного виконання зовнішнього циклу.

0:05:19.167,0:05:22.140
Таким чином, це візуалізація з "i" та "j",

0:05:22.140,0:05:23.733
сподіваюсь це допоможе вам зрозуміти

0:05:23.733,0:05:26.233
набагато краще, що відбувається з цими[br]вкладеними циклами.

0:05:26.353,0:05:29.595
Тепер повернемось до наших [br]дорогоцінних каменів, так як вони кращі!

0:05:30.135,0:05:34.066
Так, що ви багато чого можете зробити з[br]вкладеними циклами for

0:05:34.066,0:05:36.652
Якщо ви просто подумаєте про[br]все на світі

0:05:36.652,0:05:39.599
який схожий на двовимірну сітку,[br]шахівницу, стьобану ковдру,

0:05:39.599,0:05:43.824
зірки на прапорі США,[br]класні візерунки та шпалери

0:05:44.244,0:05:46.982
почніть з вашої уяви, і[br]просто пограйтеся з цим кодом,

0:05:46.982,0:05:49.396
змінюючи зображення.

0:05:49.396,0:05:53.166
І почну з того, що заміню зображення[br]на серце!

0:05:53.576,0:05:58.256
Для того, щоб показати вам, наскільки[br]Я люблю вкладені цикли for!