dr.code();
הסבה לתכנות קורסים בלוג צור קשר

פרוייקט גמר ב' - קורס ג'אווה סקריפט


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

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

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

4. אחרי שראיתם את העיצוב ושיחקתם במשחק עצמו הגיע הזמן להתחיל לקרוא את ההוראות להכנה!

מטרת המשחק

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

עמוד הבית (index)


  • אופציות controller - האופציה היחידה במסך הזה היא להתחיל את המשחק.
  • לוגיקה model - מסך זה הוא הראשון שהמשתמש רואה לכן במסך זה חשוב לטעון את כל הדמויות ולשמור אותם לתוך ה localStorage כך שבמסכים הבאים נוכל כבר להשתמש ברשימת הדמויות.
  • תצוגה view - במסך זה יופיעו תמונות רקע, הכפתור ולוגו המשחק דוטא 2.

עמוד בחירה (selection)


  • אופציות controller - בעמוד הבחירה המשתמש יכול באמצעות העכבר להצביע על דמויות, בכל הקלקה על דמות נראה את הדמות עם הפרטים המלאים עליה במסך תצוגה מצד ימין.
  • אופציות controller - בעמוד זה ישנם כפתורי סינון שמאפשרים לנו לסנן את הדמויות לפי סוג ההתקפה range / melee.
  • לוגיקה model - תחילה נריץ טיימר בן 20 שניות, שזה הוא הזמן שבו עלינו לבחור את הדמויות שאיתם נרצה לשחק עבורנו ועבור המחשב, אם הזמן מגיע ל 0 ולא נבחרו חמישה דמויות עבורנו ועבור המחשב נעביר את המשתמש חזרה למסך הראשי.
  • לוגיקה model - ברגע שהטיימר מגיע ל0 ויש לנו 2 קבוצות מלאות, המודל יעביר אותנו עמוד לעמוד המשחק.
  • לוגיקה model - בכל לחיצה על דמות נראה את הדמות במסך התצוגה המקדימה, נוכל לבחור אותה באמצעות כפתור pick hero.
  • לוגיקה model - בחירת הדמות תעשה רק במידה והדמות לא נבחרה קודם לכן, יש להוסיף כפתור בשם random אשר יאפשר לבחור דמות רנדומלית מתוך הדמויות שעדיין לא נבחרו כמובן שנצטרך פה שימוש בפונקציית ריקורסיה.
  • תצוגה view - קובץ הדמויות לא מגיע מפולטר לפי סוג הדמות, לכן יש לפלטר את הדמויות לפי סוג הדמות ולהראות שלושה סקשיינים שונים שבכל סקשיין יש דמויות מאותו הסוג. str / agi / int.
  • תצוגה view - יש להציג 10 סלוטים בחלק העליון של המסך, החמישה הראשונים הם עבור הדמויות של המשתמש והחמישה הבאים עבור הדמויות של המחשב.
  • תצוגה view - בכל פעם שאנחנו בוחרים דמות הסלוט הבא מתמלא משמע תחילה נבחר חמישה דמויות לנו ורק לאחר מכן למחשב.

עמוד המשחק (game)


  • אופציות control - עמוד זה יאפשר למשתמש להתחיל לשחק במשחק מבוסס תורות, המסך יאפשר לשחקן בתורו לבחור דמות אחת מחמשת הדמויות של המחשב ולתקוף אותן, משחק תורות אומר שבכל פעם שאנחנו תוקפים או מגנים התור עובר לשחקן השני במקרה שלנו המחשב, ובפעם הבאה שנקבל את התור שלנו נשחק עם הדמות הבאה שלנו, במידה והיא עדיין חיה.
  • לוקיגה model - תחילה עלינו לבדוק שב localStorage ישנם הדמויות שנבחרו עבור כל קבוצה.
  • לוקיגה model - השחקן הוא הראשון שמתחיל בכל משחק, לאחר שהשחקן בוחר את אילו מהדמויות הוא רוצה לתקוף באמצעות כפתור תקיפה הוא יכול לתקוף.
  • לוקיגה model - מה זה אומר תקיפה? תקיפה אומר השימוש בכוח של אותה דמות שתוקפת בשביל להוריד נקודות חיים לדמות הנתקפת.
  • תצוגה view - בכל פעם שמתחלף התור נצטרך לרנדר ולהציג כותרת שמעדכנת אותנו את שם הדמות שעכשיו תורה לתקוף.
  • תצוגה view - כמו כן נעדכן כותרת משנית שבמידה וזה תור השחקן תראה כותרת "What is the next move?"? ואם זה תורו של המחשב אז "Opponent is thinking..." .
  • תצוגה view - שזהו תורו של המשתמש מן הסתם שלוקח זמן לבחור איזה דמות אנחנו רוצים להתקיף לבחור אותה וללחוץ על הכפתור, שזה תורו של המחשב המחשב מסוגל לעשות זאת במאית השניה, כדי לגרום לתחושה של משחקיות וכאילו המחשב באמת חושב איזה דמות עליו לתקוף נוסיף שימוש ב setTimeout לפני כל תור של המחשב.
  • view - על מנת להשאיר את המסך מעודכן עלינו לרנדר מחדש בכל שינוי שנוצר בסטייט שלנו, שימו לב שמתחת לכל תמונה של דמות ישנו גם בר המציג את כמות נקודות החיים של הדמות באחוזים, אם נעדכן אותו ונשתמש באנימציה נוכל לקבל אפקט יפה שיעדכן בצורה נחמדה את המתרחש במשחק.

מהלך המשחק וחוקים

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

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

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

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

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

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

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


נוסחאות

נוסחה לחישוב כוח התקפה - מספר רנדומלי בין ערך המינימום כוח התקפה למקסימום כוח התקפה.
randomDmg = random (base_attack_min,base_attack_max)

נוסחה לחישוב כוח הגנה - מספר שהוא הכפולה שבין
healAmount = base_armor * base_health_regen


בדיקות / ולידאציות

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

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

מה קורה בזמן שסיימנו את התור שלנו ועכשיו זה התור של המחשב לשחק? האם אנחנו יכולים להמשיך וללחוץ על כפתורים או אפילו לנסות לבחור אחת מהדמויות של המחשב בזמן שזה לא התור שלנו?

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

בונוס:

סידור הספרייה


dota-game
├── public
│   ├── favicon.ico
│   ├── home
│   ├── selection
│   ├── game
│   └── results
└── src
    ├── assets
    ├── css
    ├── lib
    ├── mock.js
    ├── model.js
    ├── view.js
    └── controller.js

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