Web-Dev-For-Beginners/translations/he/6-space-game/6-end-condition/README.md

בנה משחק חלל חלק 6: סיום והתחלה מחדש

חידון לפני ההרצאה

חידון לפני ההרצאה

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

• N ספינות אויב הושמדו: זה די נפוץ, במיוחד אם מחלקים את המשחק לרמות שונות, שצריך להשמיד N ספינות אויב כדי להשלים רמה.
• הספינה שלך הושמדה: ישנם משחקים שבהם מפסידים אם הספינה שלך נהרסת. גישה נפוצה נוספת היא שימוש במושג "חיים". בכל פעם שהספינה שלך נהרסת, יורד לך חיים אחד. ברגע שכל החיים נגמרים, אתה מפסיד במשחק.
• אספת N נקודות: תנאי סיום נפוץ נוסף הוא איסוף נקודות. איך משיגים נקודות תלוי בך, אבל זה די נפוץ להקצות נקודות לפעילויות שונות, כמו השמדת ספינת אויב או איסוף פריטים שנופלים כאשר הם נהרסים.
• השלמת רמה: זה עשוי לכלול כמה תנאים, כמו השמדת X ספינות אויב, איסוף Y נקודות או אולי איסוף פריט מסוים.

התחלה מחדש

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

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

מה לבנות

תוסיף את הכללים הבאים למשחק שלך:

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

שלבים מומלצים

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

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

תתחיל את הפרויקט שלך בתיקיית your_work על ידי הקלדת:

cd your-work
npm start

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

טיפ: כדי להימנע מהתראות ב-Visual Studio Code, ערוך את הפונקציה window.onload כך שתשתמש ב-gameLoopId כפי שהוא (ללא let), והכרז על gameLoopId בראש הקובץ, בנפרד: let gameLoopId;

הוסף קוד

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

   function isHeroDead() {
     return hero.life <= 0;
   }
   
   function isEnemiesDead() {
     const enemies = gameObjects.filter((go) => go.type === "Enemy" && !go.dead);
     return enemies.length === 0;
   }
   

2. הוסף לוגיקה למטפלי הודעות. ערוך את ה-eventEmitter כדי לטפל בתנאים הללו:

   eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
       first.dead = true;
       second.dead = true;
       hero.incrementPoints();
   
       if (isEnemiesDead()) {
         eventEmitter.emit(Messages.GAME_END_WIN);
       }
   });
   
   eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
       enemy.dead = true;
       hero.decrementLife();
       if (isHeroDead())  {
         eventEmitter.emit(Messages.GAME_END_LOSS);
         return; // loss before victory
       }
       if (isEnemiesDead()) {
         eventEmitter.emit(Messages.GAME_END_WIN);
       }
   });
   
   eventEmitter.on(Messages.GAME_END_WIN, () => {
       endGame(true);
   });
   
   eventEmitter.on(Messages.GAME_END_LOSS, () => {
     endGame(false);
   });
   

3. הוסף סוגי הודעות חדשים. הוסף את ההודעות הללו לאובייקט ה-constants:

   GAME_END_LOSS: "GAME_END_LOSS",
   GAME_END_WIN: "GAME_END_WIN",
   

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

   1. האזן ללחיצה על מקש Enter. ערוך את ה-eventListener של החלון שלך כך שיקשיב ללחיצה זו:

    else if(evt.key === "Enter") {
       eventEmitter.emit(Messages.KEY_EVENT_ENTER);
     }
   

   1. הוסף הודעת התחלה מחדש. הוסף את ההודעה הזו ל-constants של ההודעות:

      KEY_EVENT_ENTER: "KEY_EVENT_ENTER",
      

5. ממש את כללי המשחק. ממש את כללי המשחק הבאים:

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

      1. ראשית, צור פונקציה displayMessage():

      function displayMessage(message, color = "red") {
        ctx.font = "30px Arial";
        ctx.fillStyle = color;
        ctx.textAlign = "center";
        ctx.fillText(message, canvas.width / 2, canvas.height / 2);
      }
      

      1. צור פונקציה endGame():

      function endGame(win) {
        clearInterval(gameLoopId);
      
        // set a delay so we are sure any paints have finished
        setTimeout(() => {
          ctx.clearRect(0, 0, canvas.width, canvas.height);
          ctx.fillStyle = "black";
          ctx.fillRect(0, 0, canvas.width, canvas.height);
          if (win) {
            displayMessage(
              "Victory!!! Pew Pew... - Press [Enter] to start a new game Captain Pew Pew",
              "green"
            );
          } else {
            displayMessage(
              "You died !!! Press [Enter] to start a new game Captain Pew Pew"
            );
          }
        }, 200)  
      }
      

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

      1. צור את הפונקציה resetGame():

      function resetGame() {
        if (gameLoopId) {
          clearInterval(gameLoopId);
          eventEmitter.clear();
          initGame();
          gameLoopId = setInterval(() => {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle = "black";
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            drawPoints();
            drawLife();
            updateGameObjects();
            drawGameObjects(ctx);
          }, 100);
        }
      }
      

   3. הוסף קריאה ל-eventEmitter כדי לאתחל את המשחק ב-initGame():

      eventEmitter.on(Messages.KEY_EVENT_ENTER, () => {
        resetGame();
      });
      

   4. הוסף פונקציה clear() ל-EventEmitter:

      clear() {
        this.listeners = {};
      }
      

👽 💥 🚀 ברכות, קפטן! המשחק שלך הושלם! כל הכבוד! 🚀 💥 👽

---

🚀 אתגר

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

חידון אחרי ההרצאה

חידון אחרי ההרצאה

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

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

משימה

בנה משחק דוגמה

---

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