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

בהמשך לפוסט הקודם שלי, שוב אני לוקח את אחד מאבות הטיפוס שכתב עמנואל פרונטו וכותב אותו מחדש בקלאסים של TypeScript. והפעם המשחק הוא סוקובאן (Sokoban).

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

אז בואו נקפוץ ישר לקוד:

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

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

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

                 1. לטעון spritesheet שזאת למעשה תמונה אחת שמכילה את כל סוגי ה-tiles שהם למעשה:

• רקע
• מיקום ריק
• נקודת היעד
• ארגז
• דמות רגילה
• ארגז על רקע נקודת היעד
• דמות על רקע נקודת היעד

                 2. להפעיל את ה-State שנקרא Game

1. הקלאס Game הוא לב המשחק.

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




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