הנך נמצא: מדריך מתקדם / שיעור 4 / דף 7
 


המדריך של תאו ל- JavaScript
 


דפים בשיעור זה:
1: JavaScript מתקדם
2: תמונת מפה
3: טעינה מוקדמת א
4: טעינה מוקדמת ב
5: הרפתקת האובייקט
6: יצירת אובייקט אישי
7: חיית מחמד וירטואלית
8: הערכת מחרוזות
9: אובייקטים קשים א
10: אובייקטים קשים ב
11: חזרה על שעור 4
|
|
|
|
|
|
|
|
|
|
|
|

שיעור 4

דף 7: חיית המחמד הוירטואלית מונחת העצמים שלך.

עכשיו אתה בעליו הגאה של לא אחת אלא שתי חיות מחמד וירטואליות. זוהי אחריותך לשמור עליהן בריאות. אם ערך הבריאות שלהן צונח אל מתחת לאפס, הן מתות. הבא ניתן להן חיים ע"י לחיצה על כפתור ההתחל (start):

Name:
Status:
Name:
Status:

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

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

  • בריאות.
  • שמחה.
  • רעב.
  • גיל.
  • שם (pet_name).
  • מספר טופס (form_number) – טופס ה-HTML אשר חיית המחמד גרה בו..

תכונות אלו מושפעות מהמתודות הבאות:

  • ()play - הגדלת שמחה.
  • ()feed – מוריד רעב.
  • ()medicate – משפר את הבריאות מעט.
  • ()makeOlder – הופך את חיית המחמד למבוגרת יותר.
  • ()display – מציג אינפורמציה לגבי חיית המחמד בתוך תיבת סטטוס.

כעת, עם הידע הנ"ל, הבא ניצור אובייקט חיית מחמד. הדבר הראשון שאנו צריכים לעשות הוא להגדיר מרכיב. הנה בנאי בסיסי (אשר אנו ניצור ללא מתודת call לעת עתה):

function Pet(the_pet_name, the_form_number)
{
  this.age = 0;
  this.hunger = Math.random() * 5; // random number between 0 and 4.99
  this.health = Math.random() * 5 + 1 ; // random number between 1 and 3.99
  this.happiness = Math.random() * 5;
  this.pet_name = the_pet_name;
  this.form_number = the_form_number;
  window.document.forms[the_form_number].pet_name.value = the_pet_name;
}

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

var pet1 = new Pet("barney",0);
var pet2 = new Pet("betty",1);

המרכיב נכתב כך שכל חיית מחמד וירטואלית תעשה שונה. הוא משתמש במתודת ()Math.random להפעלת מספרים אקראיים בין אפס לאחת. מתודת ה- ()Math.random אינה אקראית מושלמת, אך עבור המטרות שלנו היא מספקת, משום שכל זה מאפשר לנו לתת לכל חיית מחמד רעב ראשוני שונה, בריאות שונה ושמחה שונה. שם חיית המחמד נקבעת ע"פ איזשהו שם אשר עובר דרך הבנאי, וגיל חיית המחמד מתחיל באפס. שתי השורות האחרונות קובעות את המספר של טופס חיית המחמד ואת שם חיית המחמד החדשה בתוך תיבת הטקסט המתאימה. זכור כי אל הטופס הראשון בעמוד ניתן להתייחס כ- [window.document.forms[0 ואל הטופס השני בעמוד הוא – [window.document.forms[1 וכך הלאה.

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

function feed()
{
  var meal_quality = Math.random() * 2;
  this.hunger = this.hunger - meal_quality;
  if (this.hunger < 0)
  {
    this.hunger = 0;
  }
  this.display();
}

זוהי המתודה בה משתמשים על מנת להאכיל את חיית המחמד. אם כותב את הפקודה ()pet1.feed, מתודה זו נקראת. דבר ראשון, היא מגרילה מספר אקראי בין אפס לשתיים. ואז היא מפחיתה את המספר הזה מהרעב של החיית המחמד המתאימה. אנו מוודאים כי הרעב אנו נמוך מאפס, ואז אנחנו קוראים למתודת ההצגה. מתודת ההצגה נראית כך:

function display()
{
  var the_string = "";

  if (this.health < min_health)
  {
    the_string = this.pet_name + " IS DEAD!";
  } else {
    the_string += "Happiness " + parseInt(this.happiness);
    the_string += ". Health: " + parseInt(this.health);
    the_string += ". Hunger: " + parseInt(this.hunger);
    the_string += ". Age: " + parseInt(this.age);
    the_string += ".";
  }

  window.document.forms[this.form_number].pet_status.value = the_string;
}

מתודה זו בונה מחרוזת ומציגה אותה בתיבת הטקסט הנכונה. התכונה form_number מעבירה אינפורמציה על הסטטוס לתיבת הטקסט המתאימה. כאשר יצרנו את חיות מחמד, הגדרנו להן form_number (מספר הטופס). חיית המחמד pet1 קיבלה את מספר הטופס 'אפס', ואילו pet2 קיבלה את מספר הטופס 'אחד'. ע"י השימוש ב- form_number, אנו יודעים כי הסטטוס של pet1 צריך ללכת אל window.forms[0].pet_status.value והסטטוס של pet2 צריך ללכת אל window.document.forms[1].pet_status.value. השורה האחרונה של המתודה הזו קובעת לאיזה טופס להוריד את הסטטוס בשימוש ב- this.form_number.

הדבר המעניין השני במתודה זו הוא פונקצית ה-parseInt. תודות לדרך בה אנו מפעילים את המספרים האקראיים, הערכים עבור דברים כמו בריאות ושמחה נראים כמו: 2.738993720. אלו מספרים אמיתיים, אך הם נעשים די ארוכים. לכן parseInt חותך את כל הספרות לאחר הנקודה העשרונית; לדוגמא, (parseInt(2.738 מחזיר לבסוף את הערך 2.

הדבר המעניין השלישי במתודה זו הוא ()makeOlder. מתודה זו גורמת לחיית המחמד להיות מבוגרת יותר, רעבה יותר ופחות שמחה. התכנית קוראת למתודה זו כל שניה ע"י שימוש ב-setTimeout, אשר אראה לך עוד מעט. לא אעבור על כל מתודת ה- ()makeOlder, מספיק יהיה לתת לך רעיון כלשהו על מה שהיא מבצעת.

function makeOlder()
{

  var max_hunger = 5;
  var good_happiness = 5;

  if (this.health > min_health)
  {
      
    this.age +=1;
    this.happiness -= Math.random() * 2;
    this.hunger += Math.random() * 2;
    if (this.hunger > max_hunger)
    {
      this.health -= Math.random() * 2;
      this.happiness -= Math.random() * 2;
    }

  }

  this.display();
}

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

כעת שיש לנו את המתודות הללו, נוסיף אותן לבנאי על מנת להשלים את אובייקט חיית המחמד הוירטואלית:

function Pet(the_pet_name, the_form_number)
{
  this.age = 0;
  this.hunger = Math.random() * 5; // random number between 0 and 4.99
  this.health = Math.random() * 3 +1 ; // random number between 1 and 3.99
  this.happiness = Math.random() * 5;
  this.pet_name = the_pet_name;
  this.form_number = the_form_number;

  this.feed = feed;
  this.play = play;
  this.medicate = medicate;
  this.display = display;
  this.makeOlder = makeOlder;

  window.document.forms[the_form_number].pet_name.value = the_pet_name;
  this.display();
}

החלק האחרון, על מנת להשלים את התמונה, הוא הקוד אשר מפעיל את מתודת ()makeOlder בכל חיית מחמד כל שלוש שניות. פונקציה זו מופעלת כאשר אתה לוחץ על הכפתור התחל (start).

function moveTime()
{
  pet1.makeOlder();
  pet2.makeOlder();
  the_time_out = setTimeout("moveTime();", 3000);
}

כפי שאתה רואה, מתודת ()moveTime, מפעילה את ()makeOlder על כל חיית מחמד ומפעילה את עצמה שוב שלוש שניות אחר כך. לאחר שלוש השניות, הפונקציה מופעלת שוב. גיל חיות המחמד וה- setTimeout מופעלות. פעולה זו ממשיכה עד שהמשתמש קורא ל - (clearTimeout(the_time_out.

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

חזור לתחילת הדף

לדף הבא «--

 
       
       
   
 
 

עמוד ראשי
מדריך בסיסי
מדריך מתקדם
החלפת תמונות
גניבת קוד
מפת האתר