8.5 KiB

Raw Permalink Blame History

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

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

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

הצגת טקסט על המסך

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

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

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

חיים, כקונספט במשחק

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

מה לבנות

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

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

צעדים מומלצים

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

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

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

cd your-work
npm start

הפעולה לעיל תפעיל שרת HTTP בכתובת http://localhost:5000. פתח דפדפן והזן את הכתובת הזו. כרגע, אמור להופיע הגיבור וכל האויבים, וכאשר תלחץ על החצים שמאלה וימינה, הגיבור יזוז ויוכל לירות על אויבים.

הוסף קוד

העתק את הנכסים הדרושים מתיקיית solution/assets/ לתיקיית your-work; תוסיף את הנכס life.png. הוסף את lifeImg לפונקציה window.onload:
```
lifeImg = await loadTexture("assets/life.png");
```

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

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

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

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

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

הוסף חיים ונקודות.

אתחל משתנים. תחת this.cooldown = 0 במחלקת Hero, הגדר חיים ונקודות:
```
this.life = 3;
this.points = 0;
```

צייר משתנים על המסך. הצג את הערכים הללו על המסך:

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);
}

הוסף שיטות ללולאת המשחק. ודא שאתה מוסיף את הפונקציות הללו לפונקציה window.onload תחת updateGameObjects():
```
drawPoints();
drawLife();
```

ממש חוקי משחק. ממש את חוקי המשחק הבאים:

עבור כל התנגשות בין גיבור לאויב, הפחת חיים.

הרחב את מחלקת Hero כדי לבצע הפחתה זו:
```
decrementLife() {
  this.life--;
  if (this.life === 0) {
    this.dead = true;
  }
}
```

עבור כל לייזר שפוגע באויב, הגדל את ניקוד המשחק ב-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. מה המאפיינים המשותפים שלהם?

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

🚀 אתגר

הקוד שלך כמעט מוכן. האם אתה יכול לדמיין את הצעדים הבאים שלך?

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

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

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

משימה

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

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

8.5 KiB Raw Permalink Blame History