History

Lee Stott 2daab5271b Update Quiz Link		3 weeks ago
..
solution	🌐 Update translations via Co-op Translator	4 weeks ago
your-work	🌐 Update translations via Co-op Translator	4 weeks ago
README.md	Update Quiz Link	3 weeks ago
assignment.md	🌐 Update translations via Co-op Translator	4 weeks ago

README.md

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. Ανοίξτε έναν browser και εισάγετε αυτή τη διεύθυνση. Αυτή τη στιγμή θα πρέπει να εμφανίζεται ο ήρωας και όλοι οι εχθροί, και καθώς πατάτε τα αριστερά και δεξιά βέλη, ο ήρωας κινείται και μπορεί να καταρρίψει εχθρούς.

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

Αντιγράψτε τα απαραίτητα assets από τον φάκελο solution/assets/ στον φάκελο your-work. Θα προσθέσετε το asset 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 });
    }
  })

Προσθέστε life και points.

Αρχικοποιήστε μεταβλητές. Κάτω από το this.cooldown = 0 στην κλάση Hero, ορίστε τις μεταβλητές life και points:
```
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;
  }
```
  Προσθέστε αυτές τις συναρτήσεις στους Collision Event Emitters:
```
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. Παρόλο που καταβάλλουμε προσπάθειες για ακρίβεια, παρακαλούμε να έχετε υπόψη ότι οι αυτοματοποιημένες μεταφράσεις ενδέχεται να περιέχουν λάθη ή ανακρίβειες. Το πρωτότυπο έγγραφο στη μητρική του γλώσσα θα πρέπει να θεωρείται η αυθεντική πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική ανθρώπινη μετάφραση. Δεν φέρουμε ευθύνη για τυχόν παρεξηγήσεις ή εσφαλμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης.

README.md Unescape Escape