Return to Video

עוד אינטראקציות עם העכבר

  • 0:02 - 0:07
    במדריך האחרון שלנו, הראינו לכם כיצד אפשר להנפיש כדור שייקפוץ על הקירות בעזרת הפונקציה draw והצהרות if.
  • 0:07 - 0:09
    בואו נעבור על זה.
  • 0:09 - 0:12
    ראשית, הגדרנו כמה משתנים עבור המיקום והמהירות של הכדור.
  • 0:12 - 0:17
    לאחר מכן, בפונקצית ה-draw, שהיא פונקציה מיוחדת שנקראת שוב ושוב ושוב כשהתוכנה שלכם רצה,
  • 0:17 - 0:21
    צבענו מחדש את הרקע וציירנו אליפסה על השולחן עבודה
  • 0:21 - 0:28
    ומיקמנו את האליפסה הזו בהתבסס על המיקום של המשתנים והמהירות ואיך שהם משפיעים אחד על השני.
  • 0:28 - 0:31
    עכשיו, מבלי להשתמש בהצהרות if, הכדור שלנו פשוט ימשיך לזוז לנצח
  • 0:31 - 0:33
    או עד שנלחץ על אתחול מחדש.
  • 0:33 - 0:36
    אז הוספנו שני משפטי if כאן למטה
  • 0:36 - 0:41
    על מנת לבדוק אם הכדור שלנו קרוב לצד ימין של המסך או לצד שמאל של המסך
  • 0:41 - 0:45
    ואם כן, אנחנו נשנה את המהירות שלו בצורה חיובית או שלילית כך שהכדור בעצם ייקפוץ חזרה מהקיר.
  • 0:45 - 0:50
    אז כרגע פשוט יש לנו את הכדור הזה, שקופץ הלוך ושוב לנצח.
  • 0:50 - 0:54
    אז זה היה די מגניב, ויש עוד הרבה אנימציות מגניבות שאנחנו יכולים לעשות עם זה.
  • 0:54 - 0:58
    אבל כרגע, אני רוצה להוסיף התערבויות של המשתמש בתוכנה.
  • 0:58 - 1:00
    כרגע, התוכנה היא כמו תוכנית טלויזיה.
  • 1:00 - 1:05
    אם תתנו אותה לחבר, והחבר שלכם לא יודע לתכנת, הם לא באמת יוכלו להתערב בתוכנה.
  • 1:05 - 1:08
    כל מה שהם יוכלו לעשות זה לצפות, שזה מגניב,
  • 1:08 - 1:10
    אבל יכול להיות הרבה יותר מגניב אם הם היו יכולים לעשות משהו.
  • 1:10 - 1:13
    אז בואו ניתן למשתמש כמה דרכים לשלוט בה.
  • 1:13 - 1:20
    זוכרים שמוקדם יותר למדנו על שני משתנים גלובאלים מיוחדים בשם mouseX ו-mouseY?
  • 1:20 - 1:26
    המשתנים האלו מחזירים ערכים שאומרים לנו מה המיקום הנוכחי של העכבר של המשתמש
  • 1:26 - 1:29
    והם דרך מעולה לגרום לתוכנית שלנו להיות יותר אינטראקטיבית.
  • 1:29 - 1:31
    אז בואו נחשוב, איך נוכל להשתמש בהם?
  • 1:31 - 1:34
    ובכן, נוכל לשים אותם בתוך פונקציית ה-draw איפשהו
  • 1:34 - 1:40
    בגלל שזה החלק היחיד בתוכנה שנקרא שוב ושוב ושוב.
  • 1:40 - 1:45
    כל דבר מחוץ ל-draw נקרא רק פעם אחת, כשהתוכנה רצה בפעם הראשונה.
  • 1:45 - 1:48
    אז זה לא הגיוני להשתמש ב-mouseX וב-mouseY שם
  • 1:48 - 1:51
    כי למשתמש לא יהיה צ׳אנס להשתמש בזה
  • 1:51 - 1:57
    בתוך ה-draw, אנחנו מציירים את הגדול במרחק של 200 פיקסלים מהגבול העליון של המסך
  • 1:57 - 2:01
    מה אם נחליף את ההגדרה הזו עם mouseY?
  • 2:01 - 2:03
    מכיוון שזהו המיקום על ציר ה-y נכון?
  • 2:03 - 2:09
    ככה הוא פשוט יוסיף את מיקום ה-y בהתאם לאיפה שנקודת ה-y של המשתמש נמצאת, נכון?
  • 2:09 - 2:14
    אז בואו ננסה את זה. על ידי הזזת הסמן שלי למעלה ולמטה, אני משנה את הקו שבו הכדור שלי יזוז
  • 2:14 - 2:18
    זה די מגניב, אבל אני רוצה להשתמש גם ב-mouseX
  • 2:18 - 2:20
    אז איך עושים את זה?
  • 2:20 - 2:22
    ובכן, למה שלא נייצר עוד כדור?
  • 2:22 - 2:26
    ונגדיר שהכדור הזה יזוז בציר ההופכי - למעלה ולמטה.
  • 2:26 - 2:30
    ושם פשוט ניתן למשתמש לשלוט במיקום ה-x של הכדור
  • 2:30 - 2:33
    אז אנחנו בעצם עושים את ההופכי למה שעשינו עד כה
  • 2:33 - 2:41
    נשתמש ב-ellipse וניתן לה את הפרמטרים mouseX, position ו-50,50
  • 2:41 - 2:47
    אוקיי, תסתכלו על זה! עכשיו יש לי שני כדורים שאני שולטת בהם, שהולכים לכיוונים מנוגדים
  • 2:47 - 2:50
    אבל אני עדיין לא שמחה
  • 2:50 - 2:53
    אני רוצה לתת למשתמש אפילו יותר שליטה
  • 2:53 - 2:57
    אני רוצה לתת למשתמש את הכוח להפעיל את הכדור השני
  • 2:57 - 3:01
    ממש ליצור אותו, על ידי לחיצה עם העכבר שלו
  • 3:01 - 3:07
    אז אני בעצם צריכה לדעת מתי המשתמש לוחץ על העכבר שלו
  • 3:07 - 3:13
    למזלנו, בדיוק בשביל זה יש לנו משתנה בוליאני מיוחד
  • 3:13 - 3:19
    הוא נקרא mouseIsPressed ואנחנו יכולים להשתמש בו בתוך הצהרת ה-if
  • 3:19 - 3:22
    אז בואו נראה, זה הכדור השני שלנו
  • 3:22 - 3:32
    אז אנחנו יכולים לכתוב פה שאם mouseIsPressed, ואז אנחנו נזיז את הקריאה לאליפסה לכאן.
  • 3:32 - 3:41
    אז מה שזה עושה עכשיו, זה אומר לתוכנה שלנו שתצייר את האליפסה רק אם זה נכון
  • 3:41 - 3:46
    ו-mouseIsPressed יהיה נכון רק אם המשתמש יילחץ על העכבר שלו
  • 3:46 - 3:48
    בואו ננסה את זה
  • 3:48 - 3:50
    טה דה!
  • 3:50 - 3:53
    עכשיו אני יכולה לגרום לכדור להופיע מתי שאני לוחצת על העכבר
  • 3:53 - 3:58
    הוא פשוט יופיע מהיקום המקביל שלו, תופיע! תופיע! תופיע!
  • 3:58 - 4:00
    זה אדיר!
  • 4:00 - 4:05
    הדבר המעניין לגבי המשתנה הזה mouseIsPressed
  • 4:05 - 4:09
    הוא שהערך של המשתנה הוא בהתאם לפעולה של המשתמש, לא בהתאם למה שהתוכנה שלנו עושה.
  • 4:09 - 4:13
    ומכיוון שהפונקציה draw רצה שוב ושוב ושוב
  • 4:13 - 4:16
    הפלט של התוכנה יישתנה לאורך זמן
  • 4:16 - 4:19
    והכל בעזרת קלט קטן מהמשתמש
  • 4:19 - 4:22
    בשילוב עם הכוח של הצהרות if ו-mouseIsPressed
  • 4:22 - 4:26
    יש לכם את כל מה שאתם צריכים בשביל ליצור דברים אדירים כמו כפתורים ותוכנות ציור.
  • 4:26 - 4:29
    ווהוו!
Title:
עוד אינטראקציות עם העכבר
Description:

ניתן לצפות בסרטים נוספים בכתובת:
https://www.khanacademy.org/cs/programming/
more » « less
Video Language:
English
Duration:
04:29

Hebrew subtitles

Revisions

Our website uses cookies for analysis purposes.