פרוייקט גמר א'- משחק יריות

fishy-game
│
├── assets
│   ├── background.webp
│   ├── bubble.webp
│   ├── bullet.webp
│   ├── effect.webp
│   ├── enemy_a.webp
│   ├── enemy_b.webp
│   ├── enemy_c.webp
│   ├── hero_idle.webp
│   ├── hero_shoot.webp
│   ├── super_bullet.webp
│   ├── super_power.webp
│   └── mini_gun.webp
│
├── .prettierrc.json
├──  index.css
├──  index
└──  index.js
          

אלמנטים סטטים

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

טקסט המשחק - טקסט עם שם המשחק תמיד יופיע באותו המקום.

בר עליון - תמיד יופיע חצי שקוף שבתוכו יש אלמנטים דינאמיים.

טקסט כפתורים - טקסט שמופיע באמצע ובתחתית המסך, טקסט שמתאר איזה כפתור עושה איזו פעולה, בצבע ירוק בהיר.

אלמנטים דינאמיים

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

הדמות שלנו יכולה לנוע רק בציר אחד הציר האנכי, ציר ה Y.

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

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

הכדורים - הכדורים הם אלמנטים דינאמיים

עמוד המשחק בזמן פעולה

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

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

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

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

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

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

שימו לב שעל מנת שהמשחק יעבוד בצורה תקינה נצטרך לעבוד הרבה על ולידציות, למשל:

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

רק אם המשחק רץ, אנחנו בכלל יכולים להתחיל לירות, כנל שהמשחק נעצר.

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

אתגרים

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

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

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

• הדמות
• האוייבים
• הכדורים של הרובה

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

בונוס:

אני אהיה ממש גאה אם תצליחו גם:

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

רוצים ייעוץ חינם מהדוקטור?

צרו איתי קשר לכל שאלה ואשמח לעזור!

---

לכל המעוניינים ללמוד תכנות

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

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

הצטרפו לפייסבוק

עקבו באינסטה

הצטרפו לקהילה

הצטרפו לווצאפ

צפו במדריכים

שלחו לי הודעה