איך לבנות פרוטוטייפ של משחק diamondDiggerSaga באמצעות Phaser ו-Typescript

אני אוהב את הבלוג של עמנואל פרונטו: http://www.emanueleferonato.com/
במיוחד אני אוהב את הפורמט של בניית פרוטוטייפ של משחק ופרסום הקוד שלו.
מאחר ובזמן האחרון אני עובד הרבה עם פייזר, באופן טבעי אני מתעניין בפוסטים שלו שעוסקים בפייזר ויש לו כבר די הרבה prototypes של משחקים שהוא כתב ב-Phaser. רק מה, הוא כותב ב-javascript וכל הקוד שלו כתוב בעמוד אחד ארוך.
אז החלטתי לקחת את אחד מאבות הטיפוס שהוא כתב ולכתוב את הקוד מחדש בקלאסים של Typescript. זה יותר מאורגן ככה ויותר קל לעיכול לדעתי (גם אם יותר ארוך קצת).
בסרטון למעלה אפשר לראות את התוצאה כפי שצילמתי אותה בפעולה - גם בטלפון וגם במחשב.
מפתיע לראות כמה קל לכתוב את הקוד הזה, שמהווה בסיס לכל כך הרבה משחקים מוכרים וטובים.
אז בואו נקפוץ ישר לקוד:

אני מציג את הקוד באמצעות codepen רק מטעמי נוחות. אל תצפו לראות את זה עובד כאן, זה רק כדי להציג את הקוד ולאפשר להעתיק ממנו בקלות. יש טאבים של HTML, CSS, TypeScript. אפשר ללחוץ כדי לראות כל אחד מהם.
ה-HTML מכיל את כל הקישורים לקבצי ה-javascript השונים (שנוצרים מהקימפול של ה-TypeScript), ה-CSS רק מאפס כמה דברים (מוריד שוליים ומגדיר שה-div שבו נמצא המשחק מתפרס על 100% משטח המסך) וב-Typescript נמצאים כל הקלאסים שבהם אני משתמש (מוצגים כאן ברצף, אבל במציאות הם מופרדים לקבצים בודדים, כמו שרואים ב-HTML.
אגב, כדאי שכפתור ה-Result ב-codepen יהיה כבוי כדי לראות את הקוד בכל המסך.

אם תרצו לראות את הפרוטוטייפ בפעולה תלחצו כאן.
להלן הסבר קצר על הקוד:
ה-nameSpace שבחרתי הוא DiamondDigger כשם המשחק המקורי. זה ה-module שמכיל את כל הקלאסים.

1. הקלאס הראשי נקרא באותו שם והוא יורש מ-Game של Phaser. מטרתו היא ליצור את המשחק ולהפעיל את ה-State שנקרא Boot.
2. הקלאס Boot יורש מ-State של Phaser והוא דואג ל-2 דברים:
1. לדאוג לכך שהמשחק יוצג במלואו בכל מסך (ע"י ה-ScaleManager)
2. להוסיף למשחק 2 States שנקראים Preloader ו-Game ולהפעיל את Preloader.
3. הקלאס Preloader גם כן יורש מ-State והוא דואג ל-2 דברים:
1. לטעון spritesheet שזאת למעשה תמונה אחת שמכילה את כל סוגי הכדורים (3)
2. להפעיל את ה-State שנקרא Game
4. הקלאס Game הוא לב המשחק.

הקוד של Game  מכיל הערות ושמות משמעותיים, כך שהוא די מסביר את עצמו, אבל הנה בכל זאת הסבר קצר:
לאחר שיצרנו את מטריצת הכדורים, ברגע שמשתמש לוחץ על כדור (שיכול כמובן להיות כל צורה אחרת) מופעל אלגוריתם בשם flood fill  כדי להעלים את כל הכדורים מאותו הסוג.
ברגע שכדור נעלם הוא משאיר "חור" בלוח המשחק. הפונקציה holesBelow  מחשבת לנו כמה "חורים" (או מקומות ריקים) יש מתחת לכדור נתון. ברגע שיודעים את זה, אפשר להעביר את אותו כדור באנימציית tween למקום החדש. בנוסף, יש tween נוסף שמעביר לנו כדורים חדשים מלמעלה אל תוך המקום הריק שנוצר.




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