PracticU

תרגיל 23 - משחק מרוץ מכוניות

בלי כתוביותעם כתוביות
PracticU › קורס ג'אווה סקריפט מעשי - JavaScript › תרגיל 23 - משחק מרוץ מכוניות
מילון מושגים:
אובייקט - יחידה בתכנות מונחה עצמים שמאגדת נתונים (תכונות) ופעולות (מתודות). נוצר בדרך כלל ממחלקה המשמשת כתבנית.
בנאי - מתודה מיוחדת שמופעלת אוטומטית בעת יצירת אובייקט ממחלקה, ומאתחלת את ערכיו ההתחלתיים.
מאפיין - תכונה שמצמידים לרכיב ומתארת אותו או את התנהגותו, למשל מאפיין של תגית HTML או שדה באובייקט.
מחלקה - תבנית בתכנות מונחה עצמים שמגדירה אילו נתונים ופעולות יהיו לאובייקטים שנוצרים ממנה.
תבנית - מבנה בסיסי מוכן שממנו יוצרים פריטים דומים, כמו תבנית עמוד או תבנית מסמך.
זיכרון - רכיב מהיר ונדיף שבו המחשב שומר נתונים ותוכניות בזמן ריצתם. תוכנו נמחק עם כיבוי המחשב.
מערך - מבנה נתונים שמאחסן אוסף ערכים מאותו סוג ברצף, שאפשר לגשת אליהם לפי מספר מיקום (אינדקס).
לולאה - מבנה בקרה שחוזר על קטע קוד שוב ושוב כל עוד תנאי מתקיים או עבור כל פריט באוסף.

תרגיל 23 - משחק מרוץ מכוניות
בהרצאה הזו בונים משחק מרוץ מכוניות בג'אווה סקריפט, ובדרך לומדים מה זה אובייקט, איך עובדים עם בנאי (constructor) ואיך מבדילים בין מאפיין גלוי למאפיין סודי בתוך המחלקה.
השלבים העיקריים
1. מחלקה ומופעים: הפונקציה car משמשת כתבנית. כל new יוצר מופע חדש בזיכרון עם שם וצבע משלו. המרצה מדגים מכוניות בשם מאזדה והונדה, שכל אחת יושבת בתא זיכרון נפרד.
2. בנאי: הפונקציה שרצה פעם אחת בזמן היצירה. השם שמועבר לבנאי נשמר ב-this.name, כדי שלא ילך לאיבוד כשהפונקציה מסתיימת.
3. מאפיין סודי עם var: צריכת הדלק ל-100 קילומטר נבחרת באקראי בין 1 ל-10 ונשמרת במשתנה מקומי. מבחוץ אי אפשר לגשת אליו, ורק הפונקציות של המחלקה רואות אותו.
4. מיכל דלק לקריאה בלבד: כמות הדלק נקבעת בין 100 ל-200 ונשמרת כמשתנה פרטי. כדי לקרוא אותה נכתבת פונקציה getFuelTank שמחזירה את הערך, בלי אפשרות לשנות אותו מבחוץ.
5. פונקציית נסיעה drive: הפונקציה מקבלת כמה קילומטרים לנסוע, מחשבת את הדלק הנצרך לקילומטר (צריכה ל-100 חלקי 100) ומורידה את התוצאה מהמיכל.
6. מערך המכוניות ולולאה: עשר מכוניות נוצרות ונכנסות למערך All Cars, וההדפסה נעשית בלולאה על המערך.
7. הפעלה אוטומטית עם setInterval: כל חצי שנייה נבחרת מכונית אקראית ונוסעת. clearInterval עוצר את הטיימר, והמשתנה שמחזיק את הטיימר הוא מה שמאפשר לעצור את הנכון.
8. מונה משותף ברמת המחלקה: סך הקילומטרים של כל המכוניות נצבר במשתנה שמוגדר על הפונקציה car עצמה ולא על המופע. בהתחלה, אם הערך לא קיים, מאתחלים אותו ל-0.
איך זה עובד
הנקודה המרכזית היא שני מתכנתים: אחד בונה את האובייקט והשני משתמש בו בלי לדעת מה קורה בפנים. המרצה מסביר שה-this חשוף כלפי חוץ, וה-var נשאר פנימי. מכאן נובע ההבדל בין מופע (כל מכונית) לבין משהו ברמת המחלקה (המונה המשותף).
טעויות נפוצות
בלי בדיקה של undefined פעולת החיבור על המונה המשותף מחזירה undefined, ולכן צריך לאתחל אותו ל-0 לפני הצבירה הראשונה.
ההרצאה מסכמת שההבנה של אובייקטים, של מופע מול משתנה סטטי ושל מאפיינים פנימיים וגלויים, חשובה לכל מתכנת.
השיעור הבא בקורס: תרגיל 24 - תוכנת צ'אט - חלק 1

פרקי ההרצאה: תרגיל 23 - משחק מרוץ מכוניות

  1. 00:00

    מבוא: מירוץ מכוניות ותכנות מונחה עצמים

  2. 01:33

    מכונית כאובייקט: מימוש מול שימוש

  3. 05:05

    פונקציה car כתבנית לאובייקטים

  4. 07:27

    מערך All Cars לכל המכוניות

  5. 08:36

    קונסטרקטור ושמירת הערכים עם this

  6. 10:13

    מעבר על המכוניות בלולאה

  7. 12:04

    משתנה סודי פנימי עם var

  8. 13:31

    צריכת דלק אקראית לכל מכונית

תמלול ההרצאה: תרגיל 23 - משחק מרוץ מכוניות

הטקסט המלא של הדקות הראשונות בהרצאה «תרגיל 23 - משחק מרוץ מכוניות» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

  1. 00:01

    שואלים לכולם, בהרצאה הזאת אנחנו נעשה מירוץ מכוניות, אנחנו נלמד מה זה אובייקט ואיך עובדים איתו, זאת הולכת להיות הרצאה מאוד מאוד מעניינת. אנחנו בעצם נדרשים לעשות מירוץ של עשר מכוניות, כאשר לכל מכונית יש לנו את הצבע, את הדגם שלה.

  2. 00:22

    זה הדברים שבן אדם כן יכול להחליף, הלקוח שמשתמש במכונית. ומה שהוא לא יכול להחליף ואסור לו אפילו לדעת, זה צריכת דלק ל-100 קילומטר, זה מידע סודי שלכל מכונית יש.

  3. 00:36

    עכשיו, מה זה אומר מידע סודי? זה אומר שיש לנו קונספט של מכונית, שזה אובייקט, קונספט של שתי מתכנתים. יש מתכנת אחד שבונה מכוניות, ומתכנת השני שבעצם משתמש במכונית הזאת.

  4. 00:52

    כמו שאצלי במכונית שלי, אני גם לא יודע את כל מה שקורה שם בפנים. מישהו אחר עשה את המכונית. אז האובייקט מכונית, האובייקט הזה, הוא כולל את כל המשתנים שלו, את כל האפיונים שלו וכל מיני פונקציות שיודעות לעשות פעולות כמו לנסוע.

  5. 01:12

    ובזמן שמפעילים נסיעה, הדלק יורד וקילומטראז' עולה וכל מיני דברים כאלו קורים. עכשיו, כל זה קורה בתוך האובייקט ואני כמשתמש חיצוני יכול ליצור את האובייקט הזה, לתת לו נניח שם וצבע ולהגיד לו לנסוע.

  6. 01:33

    כמה קילומטרים לנסוע? אני אומר לו, תיסע 10 קילומטר. אבל אני לא יכול להגיד לו כמה דלק להוריד, כי את זה הוא אמור לחשב לבד לפי הדגם של האוטו.

  7. 01:43

    אז הקונספט הזה של שני מתכנתים שאחד בונה אובייקט והשני משתמש בו, הוא מאוד חשוב בעולם של תכנות, כי ככה בעצם כל העולם עובד.

  8. 01:55

    כשמישהו בונה לדוגמה פקדים כמו דיו או כמו באטן או כל מיני כאלו, כל מה שאתם רואים בעצם זה הכל אובייקטים בדפדפן ובוויזואל סטודיו גם וקונספט הזה שמישהו בונה רכיבים ומישהו אחר משתמש בהם זה נקרא Object Oriented, תכנות מונחה עצמים וזה מה שאנחנו רוצים ללמוד וליישם אצלנו.

  9. 02:25

    יכלנו לעשות את זה בלי אובייקטים ואז היה לנו בלאגן. אנחנו רוצים לבנות מכונית, לרשום את כל ההיגיון שלה, את כל הלוגיקה של המכונית הזאת בתוך האובייקט ואז ליצור ממנו 10 מכוניות שונות לכל מכונית לתת לדוגמה צבע אחר, שם אחר, ולכל מכונית יהיו מאפיינים אחרים, אבל יהיה אובייקט אחד שנקרא מכונית והוא זה שיחזיק את כל הלוגיקה.

  10. 02:55

    עכשיו, אולי בסדר גודל שלנו זה ייראה לכם אולי מיותר, אבל מאוד מאוד חשוב שתדעו מה זה ואיך זה עובד, כי במציאות זה מה שקורה.

  11. 03:06

    זה מה שקורה במציאות, הכל עובד על אובייקטים, כי אחרת, הכל אחרת היה בלאגן. אנחנו רוצים ליצור אובייקט, לתת לו דברים סודיים למימוש העצמי הפנימי שלו, ודברים שהוא חושף כלפי חוץ.

  12. 03:28

    אובייקטים יכולים לרשת מאובייקט אחר ולהוסיף לו יכולות, אבל על זה אנחנו לא מדברים עכשיו, את זה עושים בקורס של תכנות פונחי עצמים.

  13. 03:39

    אנחנו פה רוצים להבין את ה-Basics. עכשיו, יש שתי צורות, יש את הצורה החדשה ב-2015 שעשו תקן חדש, אנחנו נעבוד בשיטה הקלאסית.

  14. 03:51

    אז איך אנחנו נתחיל מזה שאנחנו נעשה כמה כפתורים? בואו נתחיל מזה שנעשה כמה כפתורים, נעשה כפתור שיוצר מכוניות, רשימה של עשר מכוניות, כפתור שמדפיס מכוניות, כפתור שנושא לנסוע במכונית.

  15. 04:09

    פשוט נשים כל מיני באטנים שיפעילו על קליק, יפעילו לנו את הפונקציה. עכשיו אחד יוצר מכונית, הכפתור השני נוסע והכפתור השלישי מדפיס את המצב של הדלק בכל המכוניות.

  16. 04:26

    מכונית שנגמר לה הדלק עוצרת, כן? ובעצם מפסידה את המרוץ. מי שמפסיד זה המכונית הראשונה שנגמר לה הדלק. האמת שאני כבר כתבתי את התוכנית הזאת.

  17. 04:40

    אספר לכם סוד, אני כבר צלמתי את הסרט הזה ואז הבנתי שהייתה בעיה בסאונד ואז אני מצלם אותו עוד פעם ויש לי חלקים מוכנים של קוד כי בעצם כתבתי את זה לפני כן ופשוט ההקלטה יצאה לא טוב.

  18. 04:56

    אוקיי, אז בואו נתחיל מזה שנעשה פונקציה שנקראת car מכונית זורק, פונקציה כמו כל פונקציה אחרת. מאחורי הקלעים JavaScript יוצר מפונקציה אובייקט ואנחנו יורשים אותו.

  19. 05:23

    אז אנחנו יוצרים פונקציה שנקראת car, שזה יהיה מכונית כלשהי וכשאנחנו נירש אותו, נעשה ממנו בעצם אינסטנסים בזיכרון, מופעים בזיכרון. לכל מופע בזיכרון ניתן מאפיינים אחרים.

  20. 05:40

    אבל עכשיו אנחנו יוצרים בעצם את האובייקט הזה שנקרא מכונית, וכשאנחנו יוצרים אותו, אנחנו בזמן היצירה רוצים להעביר לו שני ערכים, שני משתנים, אחד שם וצבע.

  21. 05:57

    זאת אומרת, כשנעשה משתנה נניח מאזדה, וזה יהיה בעצם מופע בזיכרון, משתנה מאזדה יצביע על מופע חדש בזיכרון, מופע חדש בזיכרון שיהיה לו מאפיין כזה וכזה אני מקווה שאתם כבר מבינים בשלב הזה שכל פונקציה בעצם מאחורי הקלעים היא אובייקט ואנחנו יוצרים לאובייקט הזה מופע חדש בזיכרון ונותנים לו איזשהם ערכים ייחודיים

  22. 06:28

    אנחנו חוץ ממאסדה יכולים ליצור עוד מכונית ועוד מכונית ויהיה לנו הרבה מכוניות בזיכרון כאשר כל האובייקטים האלו נוצרו בעצם מאובייקט אחד הראשי שנקרא car. זה נקרא, לדוגמה, הונדה.

  23. 06:50

    בשפות אחרות קוראים לזה קלאס. קלאס זה משהו שממנו נוצרים אובייקטים. אובייקטים זה מכונית מאזדו, מכונית הונדה, וקלאס זה בעצם הcar הזה שממנו, כמו תוכנית עבודה שממנה יוצרים אובייקטים בזיכרון.

  24. 07:09

    ובג'אווה סקריפט בעצם גם הקלאסים הם אובייקטים וזה הכל אובייקט יורש מאובייקט. הלאה, אחרי זה את כל המכוניות אנחנו מכניסים למערך אריי של מכוניות, שיהיה לנו קל לרוץ על כל המכוניות, לא לעבור אחד אחד לפי השם שלה, אלא נעשה מערך שקוראים לו All Cars ואז נוכל לרוץ על המערך הזה ולהדפיס אותו לדוגמה נוכל.

  25. 07:49

    לדוגמה נוכל במקום לכתוב Mazda נוכל לכתוב All Cars, סוגריים מרובעים 0 אולקה סוגריים מרובעים 1 זה אומר האובייקט הראשון האובייקט השני וכולי ככה נוכל לרוץ על רשימה של אובייקטים יפה מאוד לדוגמה נוכל לעשות איי ושידפיס לנו את כל המכוניות ככה עוד מעט נעשה את זה עכשיו אנחנו ממשיכים הלאה ורוצים לשמור את הערכים שקלטנו את הערכים שקלטנו בזמן היצירה name

  26. 08:29

    input וcolor input אנחנו נעבד אותם ברגע שהאובייקט הזה ייווצר. זאת אומרת, ברגע שהפונקציה תופעל פעם אחת, שזה נקרא קונסטרקטור, קונסטרקטור זה הפונקציה שמופעלת פעם אחת בזמן יצירת האובייקט, אנחנו לא רוצים שהפונקציה הזאת, כשהיא תיגמר, הערך של המשתנה name input ילך לאיבוד, אז אנחנו שומרים אותו באובייקט הנוכחי שזה

  27. 08:58

    נקרא this. this זה אובייקט נוכחי. זה יכולה להיות מזדה, זה יכולה להיות אונדה, והאובייקט הנוכחי אנחנו מתייחסים כמו להגיד בעברית מילה אני כמו שאני אומר אני רוצה אני אז אני זה נקרא this אז ה-this.name בעצם יקבל את השם שהכנסנו לו בזמן היצירה שזה נקרא קונסטרקטור קונסטרקטור זה פונקציה שמופעלת בזמן היצירה של האובייקט פעם אחת בלבד יפה

  28. 09:37

    מאוד עכשיו אנחנו נוכל אחרי וכששמרנו את זה אנחנו נוכל לכתוב הונדה נקודה נעים, זאת אומרת ברגע שאנחנו יוצרים בתוך האובייקט נניח משתנה this נקודה נעים, נוכל לפנות אליו בעתיד, בואו נראה דרך יותר פרקטית לפנות לזה, במקום הונדה נרשום all cars סוגריים מרובעים 0,

  29. 10:05

    all cars סוגריים מרובעים 1-2, ואז את התכונה שלנו. אני פשוט רוצה שתבינו איך זה עובד באמצעיות, באמצעות אנחנו רצים עם לולאה על כל מערך המכוניות שלנו, על כל המערך עושים לולאה, ואז אנחנו יכולים לדוגמה להדפיס את כל השמות.

  30. 10:28

    אנחנו לוקחים מכונית ספציפית All Cars I ומדפיסים ממנה את התכונה Name. זאת אומרת, This זה המכונית הנוכחית. פעם אחת זה הונדה, פעם אחת זה מאזדה, תלוי באובייקט שיצרנו.

  31. 10:51

    למעשה אנחנו יוצרים בזיכרון אובייקטים, וכל אחד יש לו תמי שלו של זיכרון, הם כאילו לא קשורים אחד לשני, אין ביניהם קשר, זאת אומרת אין קשר בין מאזדה להונדה, כל אחד יושב בתא אחר בזיכרון ויש עליו מצביע.

  32. 11:11

    יופי, אנחנו יכולים לראות שאחרי שהוספנו תכונה color, והנה אנחנו רואים שהאובייקט, מבחוץ אפשר לפנות אליו, מה זה מבחוץ?

  33. 11:20

    לא מתוך car עצמה, לא מתוך פונקציה עצמה, אלא כצרכן חיצוני של האובייקט. שימו לב, כל מה שקורה בתוך ה-function car זה המימוש הפנימי של המכונית. עכשיו אנחנו פונים מבחוץ, אנחנו צורכים את הקלאס הזה.

  34. 11:38

    עכשיו זה קצת מבלבל בשלב הזה כי אנחנו גם יוצרים אותו וגם צורכים אותו. אבל תחשבו בראש שאחד יוצר לדוגמה את הכפתורים וכל מיני מכוניות ואחד אחר לוקח את האובייקט שלו ובונה על זה משחק מכוניות.

  35. 11:57

    תחשבו שזה קונספט תפיסה של שני מתכנתים שונים. אנחנו פשוט עושים עבודה של שניהם אז יכול להיות שזה לא מספיק ברור. עכשיו אנחנו רוצים לעשות משתנה סודי, משתנה שלא יהיה גלוי לצרכן חיצוני.

  36. 12:14

    הוא יהיה קיים רק בתוך המכונית, משהו סודי בתוך המכונית. לדוגמה, צריכת דלק ל-100 קילומטר. צריכת דלק ל-100 קילומטר זה משהו שאני צריך לשמור אצלי בזיכרון של המכונית, כדי לחשב כמה דלק להוריד כשנוסעים.

  37. 12:32

    אבל זה משהו שאני לא רוצה שמישהו ידע מבחוץ. אז שימו לב, ברגע שאני עושה במקום this אני כותב var, אתם תראו שוואר זה משתנה לוקאלי, הוא לוקאלי לאותו אובייקט.

  38. 12:46

    אז כל אורבניים משוייכים לאובייקט החיצוני כביכול, הוא גלוי, אבל מה שבוואר הוא לא גלוי כלפי חוץ, הוא רק מקומית בתוך האובייקט עצמו ואי אפשר מבחוץ להגיע לערך הזה.

  39. 13:03

    אחרי זה אני אעשה שה-100 קילומטר הזה אנחנו ניחשב, אתם יכולים לראות שאני יכול להשתמש בו בפנים, בתוך הפונקציה אני יכול להשתמש בו.

  40. 13:16

    אבל לא בחוץ זה משהו פנימי עכשיו אני קובע מה יהיה פנימי מה יהיה חיצוני אם אני תוואר ושם אז הוואר אומר שזה מקומי אם אני כותב this אז זה יהיה חיצוני. בואו נעשה רק שהצריכה ל-100 קילומטר היא תהיה ערך אקראי בין 1 ל-10 אנחנו ניקח ערך אקראי נכפיל אותו ב-10 קיבלנו מספר בין 0 ל-9 קיבלנו מספר אקראי הכפלנו אותו ב-10 כי מספר אקראי

  41. 13:31

    שאנחנו מקבלים הוא בין 0 ל-1 במקור. מכפילים ב-10, מעגלים כלפי מטה ומוסיפים 1 כי כשאנחנו מעגלים כלפי מטה אנחנו יכולים לקבל 0 וככה אני מוודא שאחרי העיגול כלפי מטה

לקורס המלא: קורס ג'אווה סקריפט מעשי

ההרצאה הקודמת: תרגילים 21-22

ההרצאה הבאה: תרגיל 24 - תוכנת צ'אט - חלק 1

הרצאות קשורות מקורסים אחרים

  • הדגמה של אפליקציה ראשונה - משחק הגמדים

קורסים נוספים במסלול

  • קורס יסודות HTML - בניית אתר אינטרנט פשוט
  • קורס CSS 3 - בדגש על Flex & Grid
  • קורס Javascript כולל JQuery
  • קורס TypeScript
  • קורס ריאקט - React
  • קורס NodeJS