פרק 23 - תמונות לקלפים

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

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

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

עצרו🛑.  יש לנו div-ים. חשבו איך להוסיף להם תמונה? איך יהיה נוח לשמור את התמונות? מאיפה נביא את התמונות? זכרו שאנו צריכים לתת את אותה התמונה ל2 קלפים.  

‏‏צילום מסך (127)

רשימה של קלפים

אוקי, אז ברור שנרצה לתת תמונה לקלף כבר בשלב של יצירת הקלף.

בשביל לתת לכל קלף תמונה, אנו צריכים שיהיו לנו תמונות. בשביל שיהיה לנו תמונות אנו צריכים לשמור אותם איפשהו. 

מכיוון שיש לנו כמות של תמונות היינו רוצים לשמור אותם בצורה ככה שתהיה גישה נוחה אליהם. 

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

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

ב׳ – אם נרצה להחליף את סוג התמונות, נשנה את אברי המערך .

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

 

משימה:

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

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

טיפ: 

לפעמים קישורים יכולים להיות ארוכים ומסובכים, אתם יכולים לשמור את הקישורים בתוך משתנים ואת המשתנים להכניס לתוך המערך.

לדוגמא: 

‏‏צילום מסך (132)

הגדרת התמונה בdiv.

אלופים!! 👏👏👏 

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

 

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

‏‏צילום מסך (127)

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

אפשר להגדיר את התמונה כתמונת רקע לdiv(ראינו דוגמא בסגנון). 

לדוגמא יש את אלמנט התמונה- <img>. אפשר להוסיף לתוך כל div שמייצג קלף – אלמנט של תמונה.

 

כעת בקצרה נלמד על האלמנט.

 

img דרך הג׳אווהסקריפט

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

‏‏צילום מסך (133)

בחזרה לכרטיס

ניסינו לחשוב על דרך לחלק תמונה לקלף. 

 

הצענו 2 דרכים. אחת עם <img> ואחת כרקע לdiv. יש עוד דרכים?  



משימה 

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

כעת שנו את הפונקציה כך שבשלב יצירת הקלף – כל קלף מקבל את התמונה משלו. (תזכורת – כל תמונה צריכה להופיע על 2 קלפים) 

שלחו פרטים

וניצור איתכם קשר

שלחו פרטים

וניצור איתך קשר

שלחו פרטים

וניצור איתכם קשר

שאלה מעולה :)

חלל עבודה משותף (המכונה באנגלית: Coworking Space) הוא סביבת עבודה שבה מתאספים פרטים וחברות שונות, בדרך כלל בתחילת דרכן או כשהן בשלבי התפתחות, לשם פעילות עסקית.

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

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

מטרה משנית של חלל העבודה המשותף היא יצירת קהילה עסקית- חברתית.

מתוך ״ויקיפדיה״