WEBVTT

00:00:01.271 --> 00:00:03.741
עד כה, ראינו איך ליצור מערך ואיך לגשת אליו.

00:00:03.741 --> 00:00:12.859
אבל, בדיוק כמו משתנים אחרים, אחד הדברים
המגניבים לגבי מערכים הוא היכולת לשנות אותם
באופן דינמי בזמן שהתוכנית רצה.

00:00:12.859 --> 00:00:15.805
אוקיי, תנו לי רגע להראות לכם למה אני מתכוונת.

00:00:15.805 --> 00:00:21.172
יש לנו כאן תוכנית שמציגה את Hopper
שמחזיק כמה בלונים - ממש חמוד.

00:00:21.172 --> 00:00:29.397
איך שזה עובד זה שיש לנו מערך של מיקומים
xPositions שיש בו שני מספרים, שאומרים
היכן אנחנו רוצים להציג את הבלונים.

00:00:29.397 --> 00:00:35.471
ואז כאן למטה יש לנו לולאה,
והלולאה הזו עוברת על כל האיברים של המערך

00:00:35.471 --> 00:00:46.810
ועבור כל אחד מהם, היא מציררת קו ממיקום
ה-x הזה ליד של Hopper,
ואז מציירת אליפסה במיקום ה-x הזה בגודל
30x40 פיקסלים, וזה הבלון שלנו.

00:00:46.810 --> 00:00:58.343
אוקיי, מגניב. עכשיו שאנו רואים איך זה עובד,
אנחנו יודעים שאם נרצה שעוד בלון יופיע,
אנחנו יכולים פשוט להוסיף עוד מספר למערך.
למשל 300.

00:00:58.343 --> 00:01:02.063
יפה. עכשיו יש לנו שלושה בלונים, ו-Hopper שמח.

00:01:02.063 --> 00:01:10.932
אבל נניח שאנחנו רוצים לתת למשתמש שלא
יודע לתכנת את היכולת להוסיף בלונים חדשים.

00:01:10.932 --> 00:01:17.801
אז רצינו לתת את התוכנית למשתמש ולומר לו -
"היי, אתה יכול ללחוץ איפה שאתה רוצה את הבלון,
והבלון יופיע."

00:01:17.801 --> 00:01:20.688
זה יהיה מגניב, לא? אני חושבת שכן.

00:01:20.688 --> 00:01:26.640
אז, איך נעשה את זה? אנחנו רוצים
שהתוכנית שלנו תשתנה עם הזמן, נכון?

00:01:26.640 --> 00:01:30.278
בכל פעם שהמשתמש לוחץ,
בלון יופיע במקום שהוא לחץ.

00:01:30.278 --> 00:01:37.637
נתחיל בלהזיז את כל הקוד הזה לתוך
פונקציית ציור (draw) כדי שיהיה קל
לשנות את זה עם הזמן.

00:01:37.637 --> 00:01:43.185
נזיז את זה למטה ונוסיף הזחה ימינה. אוקיי, נהדר.

00:01:43.185 --> 00:01:48.405
עכשיו נרצה לבדוק,
האם המשתמש לוחץ על העכבר ברגע זה?

00:01:48.405 --> 00:01:55.339
אנחנו יכולים לעשות זאת עם תנאי if.
אז נרשום if (mouseIsPressed),
ואז נעשה משהו.

00:01:55.339 --> 00:02:01.176
מה נעשה? אם העכבר לחוץ,
אנחנו רוצים איכשהו להוסיף מספר למערך הזה.

00:02:01.176 --> 00:02:04.232
בואו נחזיר אותו למצב שיכיל רק שני איברים. אוקיי.

00:02:04.232 --> 00:02:10.464
אנחנו רוצים להוסיף מספר למערך הזה איכשהו.
אני אראה לכם דרך אחת שנוכל לעשות זאת.

00:02:10.464 --> 00:02:18.508
נרשום
xPositions[2] = mouseX;

00:02:18.508 --> 00:02:21.681
אוקיי, תנו לי רק להראות לכם שזה עובד

00:02:21.681 --> 00:02:26.640
לחצתי, והנה יש לי בלון. אז מה זה עשה?

00:02:26.640 --> 00:02:38.236
זה אומר שאנחנו מסתכלים על המערך,
ומוצאים את האיבר במקום ה-2, ותזכרו שזה האיבר
השלישי כי המערכים שלנו מתחילים מאפס.

00:02:38.236 --> 00:02:41.742
אבל אתם רואים שאין איבר שלישי, נכון?
אין שום דבר במקום הזה.

00:02:41.742 --> 00:02:45.897
אז כתוב כאן שנמצא את המקום הזה,
ונשים בו את mouseX.

00:02:45.897 --> 00:02:51.358
לא היה שם כלום, ועכשיו במקום כלום
זה יכיל את mouseX.

00:02:51.358 --> 00:03:00.130
עכשיו המערך שלנו מכיל שלושה פריטים,
ולולאת ה-for הזו כאן למטה עוברת עליו,
ומציירת גם את הבלון השלישי הזה

00:03:00.130 --> 00:03:04.027
די מגניב, עכשיו אני אלחץ עוד ונראה איך זה עובד.

00:03:04.027 --> 00:03:10.690
אתם רואים שבכל פעם שאני לוחצת, זה מצייר
את הבלון השלישי במקום שלחצתי עם העכבר

00:03:10.690 --> 00:03:18.938
זה כי אנחנו כל הזמן דורסים את המקום ה-2,
הדבר שנמצא באינדקס 2.

00:03:18.938 --> 00:03:22.898
אנחנו כל הזמן דורסים אותו עם ה-mouseX הנוכחי.

00:03:22.898 --> 00:03:34.574
אז תמיד יהיו לנו רק שלושה בלונים כי יש לנו
את זה במקום ה-0, את זה במקום ה-1,
ואנחנו תמיד משנים את המקום ה-2. אוקיי?

00:03:34.574 --> 00:03:40.235
זה מגניב, אבל מה שאנחנו באמת רוצים זה לתת
למשתמש ליצור המון בלונים, נכון?

00:03:40.235 --> 00:03:43.524
כך שבכל פעם שהוא לוחץ, יש בלון חדש.

00:03:43.524 --> 00:03:50.852
זה אומר שאנחנו צריכים כל הזמן להגדיל
את האינדקס של האיבר במערך
שאנחנו שומרים בו את המיקום.

00:03:50.852 --> 00:03:56.106
אנחנו לא רוצים שהוא יהיה 2 כל הזמן,
אנחנו רוצים שהוא יהיה 2, ואז 3, ואחר כך 4,
ואז 5, ואז 6, וכן הלאה.

00:03:56.106 --> 00:04:01.019
אנחנו יכולים לעשות את זה באמצעות משתנה סופר -
counter. נרשום newInd = 2;

00:04:01.019 --> 00:04:05.523
זה מה שהוא יתחיל איתו,
ואז כאן נרשום newInd במקום 2.

00:04:05.523 --> 00:04:10.270
ואז מה שאנחנו באמת רוצים לעשות זה
לרשום 
newInd++

00:04:10.270 --> 00:04:16.231
כלומר בכל פעם נוסיף לו 1.
הוא יתחיל בתור 2, ואז יהפוך ל-3, ואז ל-4.

00:04:16.231 --> 00:04:18.473
בכל פעם שלוחצים על העכבר, האינדקס יגדל.
בואו ננסה את זה.

00:04:18.473 --> 00:04:22.009
יופי! המון בלונים. מסיבת בלונים!

00:04:22.009 --> 00:04:32.108
זה מגניב, נכון? אבל זו לא הדרך הכי טובה
לעשות את זה, כי מסתבר שלהוסיף פריטים
למערך זה משהו שנרצה לעשות הרבה

00:04:32.108 --> 00:04:35.023
כך שיש לנו דרך פשוטה יותר לעשות זאת.

00:04:35.023 --> 00:04:42.768
תנו לי רק למחוק את הדברים שעשינו.
אוקיי, אנחנו לא צריכים את זה יותר.
נהפוך את להערה.

00:04:42.768 --> 00:04:50.996
אוקיי, אז עושים את זה כך -
xPositions.push ואז mouseX.

00:04:50.996 --> 00:04:56.573
אז מה שעשינו כאן זה לקרוא למתודה push
על המערך xPositions.

00:04:56.573 --> 00:05:05.232
כלומר אנחנו קוראים לסוג של פקודה על המערך.
אנחנו אומרים למערך, "היי, תכניס את הערך החדש
הזה, שנמצא ב-mouseX, תכניס אותו בסוף המערך".

00:05:05.232 --> 00:05:12.467
בכל פעם שקוראים לקוד הזה, בכל פעם שהמשתמש
לוחץ על העכבר, אנחנו בודקים מההמיקום של העכבר
mouseX ונוסיף את המספר לסוף המערך.

00:05:12.467 --> 00:05:16.768
כך שהמערך אמור לגדול ולגדול ולגדול.
בואו נתחיל מחדש וננסה את זה.

00:05:16.768 --> 00:05:22.684
יפה, זה עבד!
וזה הרבה פחות קוד ממה שהיה לנו קודם. אוקיי?

00:05:22.684 --> 00:05:27.630
רוב הזמן, אתם תרצו להשתמש ב-push אם
אתם הולכים להוסיף דברים למערך בצורה הזאת.

00:05:27.630 --> 00:05:32.182
וזה די מגניב כי אתם יכולים פשוט להגדיל
את המערכים עוד ועוד במהלך התוכנית.

00:05:32.182 --> 00:05:36.017
למשל כשיש לכם אנימציה או כשיש משתמשים
שעושים דברים, אתם יכולים לעשות הרבה יותר.

00:05:36.017 --> 00:05:41.295
אז עד עכשיו ראיתם בערך 90% מהדרכים
שבהם כנראה תשתמשו במערכים.

00:05:41.295 --> 00:05:47.021
אבל יש הרבה דברים אחרים שתוכלו לעשות עם
מערכים. אז אם יש לכם שאלות, פשוט שאלו בדיונים.

00:05:47.021 --> 00:05:51.000
אבל תוודאו שאתם שולטים היטב בכלים הבסיסיים האלו קודם.