שיעור עשרים ושניים- הקלפים

פרק 22 - הקלפים

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

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

כשבונים את הקלפים זה מורכב מ2 חלקים:

חלק 1: בניית המבנה של הקלף, המסגרת, איזה גודל, ועוד..

חלק 2: הגדרת התמונה שתהיה על הקלף (כמובן לכל 2 קלפים צריך להיות תמונה זהה)

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

תעצרו עכשיו לכמה דקות של חשיבה, ונסו לחשוב עם הכלים שלמדנו, מה האפשרויות שיש לנו על מנת לבנות את הקלף? באיזה תגית? איזה גודל? אם תרצו ליצור 2 קלפים איך תעשו זאת? אם תרצו ליצור 30 קלפים איך תעשו זאת? איך נגדיר תמונה לקלף?

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

אוקיי אם יש לכם כיוון – לכו נסו זאת בעצמכם לפני שאתם ממשיכים.

בניית הקלף

איך אפשר בכלל לבנות קלף, הרי אין תגית מסוימת של קלף, כמו שיש תגית לכותרת או לפסקה לצורך העניין?

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

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

משימה:

בhtml כתבו div עבור הקלף, ותתחילו לעצב אותו בעזרת CSS עם תגית הstyle. תחשבו איזה מאפיינים היינו רוצים להגדיר בשביל הקלף שלנו. גודל, מיקום על הדף, צבע, גודל מסגרת וכו׳.

רק לשם הבנה נביא דוגמא פשוטה לאיך מבנה הקלף יכול להיראות:

כמות קלפים

עכשיו אחרי שבנינו קלף אחד בhtml זה נחמד, אבל כשאנו באים לבנות משחק שיש בו לדוגמא 30 קלפים, זה כבר יהיה מתיש לבנות 30 div בhtml. או בעיה עוד יותר גדולה, שזה ממש מגביל לנו את המשחק. אם נרצה לאפשר לשחקן לבחור עם כמה קלפים הוא רוצה לשחק, איך נדע כמה div-ים לבנות?

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

רמז: מספיק מספר שורות קוד בודדות.

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

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

משימה

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

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

הוספת class, דרך הג׳אווהסקריפט.

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

דיברנו כבר על class אבל לא דיברנו איך מוסיפים class לאלמנט שיצרנו דרך הג׳אווהסקריפט.

בשביל להוסיף class דרך ג׳אווהסקריפט יש פונקציה שזאת תפקידה: ()classList.add.

נראה דוגמא ותצאו לדרככם:

בדוגמא card זה האלמנט שיצרנו, ובעזרת () classList.add אנו יכולים להוסיף לאלמנט class חדש שיהיה משוייך לא. (זכרו שניתן לתת לאלמנט יותר מclass אחד, לכן זו ׳רשימה׳).

עכשיו לאחר שנתנו לו את הcard כclass, אז הוא יקבל את העיצוב שהגדרנו לcard. (אם יש כזה).

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

מיקום הקלפים

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

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

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

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

כאן, הגדרנו את הstyle של הdiv, ובתוך הלולאה יצרנו 16 כרטיסים(דמיינו לעצמכם קוד 😀):

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

2 כיוונים לפיתרון הבעיה

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

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

(גם בשביל לעשות את הדבר הזה יש כמה וכמה אפשרויות.)

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

כיוון 3? תמיד יש עוד כיוונים. אולי לכם יש דרך?

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

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

בפרק הבא נעבור להוסיף תמונות לקלפים.

פרק 22 - הקלפים

כל הזכויות שמורות לבנימין טק

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

שלחו פרטים

שלחו פרטים

שלחו פרטים

שאלה מעולה :)