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

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


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

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

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

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

מטרת המשחק


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

עמוד משחק (index)



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


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 כך שכל האלמנטים הדינאמיים יזוזו בצורה חלקה על המסך. שימו לב למה שזז:

ַ

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


בונוס:

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

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

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


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

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

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

דברו איתי
whatsapp
ווצאפwhatsapp דסקורדwhatsapp