Web-Dev-For-Beginners/translations/he/6-space-game/5-keeping-score

בניית משחק חלל חלק 5: ניקוד וחיים

שאלון לפני ההרצאה

שאלון לפני ההרצאה

מוכנים להפוך את משחק החלל שלכם למשחק אמיתי? בואו נוסיף ניקוד וניהול חיים - המכניקה המרכזית שהפכה משחקי ארקייד מוקדמים כמו Space Invaders מהדגמות פשוטות לבידור ממכר. כאן המשחק שלכם הופך להיות באמת ניתן למשחק.

ציור טקסט על המסך - הקול של המשחק שלכם

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

יש לכם שליטה מלאה על מראה הטקסט:

ctx.font = "30px Arial";
ctx.fillStyle = "red";
ctx.textAlign = "right";
ctx.fillText("show this on the screen", 0, 0);

✅ צללו עמוק יותר אל הוספת טקסט לקנבס - אתם עשויים להיות מופתעים מכמה יצירתיים אפשר להיות עם פונטים ועיצוב!

חיים - יותר מסתם מספר

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

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

בניית מערכת התגמולים של המשחק שלכם

עכשיו ניישם את מערכות המשוב המרכזיות שמחזיקות את השחקנים מעורבים:

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

בואו נתחיל לבנות!

ראשית, הכינו את סביבת העבודה שלכם. נווטו לקבצים בתיקיית your-work. אתם אמורים לראות את הקבצים הבאים:

-| assets
  -| enemyShip.png
  -| player.png
  -| laserRed.png
-| index.html
-| app.js
-| package.json

כדי לבדוק את המשחק שלכם, הפעילו את שרת הפיתוח מתיקיית your_work:

cd your-work
npm start

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

זמן לקודד!

1. השיגו את הנכסים החזותיים שתצטרכו. העתיקו את הנכס life.png מתיקיית solution/assets/ לתיקיית your-work. לאחר מכן הוסיפו את lifeImg לפונקציה window.onload שלכם:

   lifeImg = await loadTexture("assets/life.png");
   

2. אל תשכחו להוסיף את lifeImg לרשימת הנכסים שלכם:

   let heroImg,
   ...
   lifeImg,
   ...
   eventEmitter = new EventEmitter();
   

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

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

   enemies.forEach(enemy => {
       const heroRect = hero.rectFromGameObject();
       if (intersectRect(heroRect, enemy.rectFromGameObject())) {
         eventEmitter.emit(Messages.COLLISION_ENEMY_HERO, { enemy });
       }
     })
   

5. הוסיפו מעקב חיים וניקוד לגיבור שלכם.

   1. אתחול המונים. מתחת ל-this.cooldown = 0 במחלקת Hero, הגדירו חיים וניקוד:

      this.life = 3;
      this.points = 0;
      

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

      function drawLife() {
        // TODO, 35, 27
        const START_POS = canvas.width - 180;
        for(let i=0; i < hero.life; i++ ) {
          ctx.drawImage(
            lifeImg, 
            START_POS + (45 * (i+1) ), 
            canvas.height - 37);
        }
      }
      
      function drawPoints() {
        ctx.font = "30px Arial";
        ctx.fillStyle = "red";
        ctx.textAlign = "left";
        drawText("Points: " + hero.points, 10, canvas.height-20);
      }
      
      function drawText(message, x, y) {
        ctx.fillText(message, x, y);
      }
      
      

   3. חברו הכול ללולאת המשחק שלכם. הוסיפו את הפונקציות האלה לפונקציה window.onload שלכם מיד אחרי updateGameObjects():

      drawPoints();
      drawLife();
      

6. מימוש השלכות ותגמולים במשחק. עכשיו נוסיף את מערכות המשוב שהופכות את פעולות השחקן למשמעותיות:

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

      הוסיפו את השיטה הזו למחלקת Hero שלכם:

      decrementLife() {
        this.life--;
        if (this.life === 0) {
          this.dead = true;
        }
      }
      

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

      הרחיבו את מחלקת Hero עם שיטת ההוספה הזו:

        incrementPoints() {
          this.points += 100;
        }
      

      עכשיו חברו את הפונקציות האלה לאירועי ההתנגשות:

      eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
         first.dead = true;
         second.dead = true;
         hero.incrementPoints();
      })
      
      eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
         enemy.dead = true;
         hero.decrementLife();
      });
      

✅ סקרנים לגבי משחקים אחרים שנבנו עם JavaScript ו-Canvas? חקרו קצת - אתם עשויים להיות מופתעים ממה שאפשרי!

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

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

---

אתגר סוכן GitHub Copilot 🚀

השתמשו במצב סוכן כדי להשלים את האתגר הבא:

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

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

🚀 אתגר

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

שאלון אחרי ההרצאה

שאלון אחרי ההרצאה

סקירה ולימוד עצמי

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

משימה

בנו משחק ניקוד

---

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