12 KiB

Raw Permalink Blame History Unescape Escape

Δημιουργία ενός Παιχνιδιού Διαστήματος Μέρος 5: Βαθμολογία και Ζωές

Κουίζ πριν το μάθημα

Σε αυτό το μάθημα, θα μάθετε πώς να προσθέσετε βαθμολογία σε ένα παιχνίδι και να υπολογίσετε ζωές.

Σχεδίαση κειμένου στην οθόνη

Για να μπορέσετε να εμφανίσετε τη βαθμολογία του παιχνιδιού στην οθόνη, θα χρειαστεί να ξέρετε πώς να τοποθετήσετε κείμενο στην οθόνη. Η απάντηση είναι η χρήση της μεθόδου fillText() στο αντικείμενο canvas. Μπορείτε επίσης να ελέγξετε άλλες παραμέτρους, όπως τη γραμματοσειρά που θα χρησιμοποιηθεί, το χρώμα του κειμένου και ακόμη και την ευθυγράμμισή του (αριστερά, δεξιά, κέντρο). Παρακάτω υπάρχει κώδικας που σχεδιάζει κείμενο στην οθόνη.

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

✅ Διαβάστε περισσότερα για το πώς να προσθέσετε κείμενο σε ένα canvas και μη διστάσετε να κάνετε το δικό σας πιο εντυπωσιακό!

Η ζωή ως έννοια στο παιχνίδι

Η έννοια της ζωής σε ένα παιχνίδι είναι απλώς ένας αριθμός. Στο πλαίσιο ενός παιχνιδιού διαστήματος, είναι συνηθισμένο να αποδίδονται συγκεκριμένες ζωές που μειώνονται μία-μία όταν το διαστημόπλοιό σας δέχεται ζημιά. Είναι ωραίο αν μπορείτε να δείξετε μια γραφική αναπαράσταση αυτού, όπως μικρά διαστημόπλοια ή καρδιές, αντί για έναν αριθμό.

Τι θα δημιουργήσετε

Ας προσθέσουμε τα εξής στο παιχνίδι σας:

Βαθμολογία παιχνιδιού: Για κάθε εχθρικό διαστημόπλοιο που καταστρέφεται, ο ήρωας θα πρέπει να κερδίζει πόντους. Προτείνουμε 100 πόντους ανά διαστημόπλοιο. Η βαθμολογία του παιχνιδιού θα πρέπει να εμφανίζεται κάτω αριστερά.
Ζωές: Το διαστημόπλοιό σας έχει τρεις ζωές. Χάνετε μία ζωή κάθε φορά που ένα εχθρικό διαστημόπλοιο συγκρούεται μαζί σας. Η βαθμολογία ζωής θα πρέπει να εμφανίζεται κάτω δεξιά και να αποτελείται από το εξής γραφικό: .

Προτεινόμενα βήματα

Βρείτε τα αρχεία που έχουν δημιουργηθεί για εσάς στον υποφάκελο your-work. Θα πρέπει να περιέχει τα εξής:

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

Ξεκινήστε το πρότζεκτ σας στον φάκελο your_work πληκτρολογώντας:

cd your-work
npm start

Το παραπάνω θα ξεκινήσει έναν HTTP Server στη διεύθυνση http://localhost:5000. Ανοίξτε έναν περιηγητή και εισάγετε αυτή τη διεύθυνση. Αυτή τη στιγμή θα πρέπει να εμφανίζεται ο ήρωας και όλοι οι εχθροί, και καθώς πατάτε τα βελάκια αριστερά και δεξιά, ο ήρωας θα κινείται και θα μπορεί να καταρρίπτει εχθρούς.

Προσθήκη κώδικα

Αντιγράψτε τα απαραίτητα αρχεία από τον φάκελο solution/assets/ στον φάκελο your-work. Θα προσθέσετε το αρχείο life.png. Προσθέστε το lifeImg στη συνάρτηση window.onload:
```
lifeImg = await loadTexture("assets/life.png");
```

Προσθέστε το lifeImg στη λίστα των assets:

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();
```

Υλοποιήστε τους κανόνες του παιχνιδιού. Υλοποιήστε τους εξής κανόνες:
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. Ποια είναι τα κοινά τους χαρακτηριστικά;

Μέχρι το τέλος αυτής της εργασίας, θα πρέπει να βλέπετε τα μικρά διαστημόπλοια "ζωής" κάτω δεξιά, τους πόντους κάτω αριστερά, και να βλέπετε τον αριθμό των ζωών σας να μειώνεται όταν συγκρούεστε με εχθρούς και τους πόντους σας να αυξάνονται όταν καταρρίπτετε εχθρούς. Μπράβο! Το παιχνίδι σας είναι σχεδόν έτοιμο.

🚀 Πρόκληση

Ο κώδικάς σας είναι σχεδόν έτοιμος. Μπορείτε να φανταστείτε τα επόμενα βήματα;

Κουίζ μετά το μάθημα

Ανασκόπηση & Αυτομελέτη

Ερευνήστε τρόπους με τους οποίους μπορείτε να αυξομειώνετε τη βαθμολογία και τις ζωές σε ένα παιχνίδι. Υπάρχουν ενδιαφέρουσες μηχανές παιχνιδιών όπως το PlayFab. Πώς θα μπορούσε η χρήση μιας τέτοιας μηχανής να βελτιώσει το παιχνίδι σας;

Εργασία

Δημιουργήστε ένα Παιχνίδι με Βαθμολογία

Αποποίηση Ευθύνης:
Αυτό το έγγραφο έχει μεταφραστεί χρησιμοποιώντας την υπηρεσία αυτόματης μετάφρασης Co-op Translator. Παρόλο που καταβάλλουμε προσπάθειες για ακρίβεια, παρακαλούμε να έχετε υπόψη ότι οι αυτόματες μεταφράσεις ενδέχεται να περιέχουν σφάλματα ή ανακρίβειες. Το πρωτότυπο έγγραφο στη μητρική του γλώσσα θα πρέπει να θεωρείται η αυθεντική πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική ανθρώπινη μετάφραση. Δεν φέρουμε ευθύνη για τυχόν παρεξηγήσεις ή εσφαλμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης.

12 KiB Raw Permalink Blame History Unescape Escape