# Δημιουργία Παιχνιδιού Διαστήματος Μέρος 5: Βαθμολογία και Ζωές ## Ερωτηματολόγιο Πριν το Μάθημα [Ερωτηματολόγιο πριν το μάθημα](https://ff-quizzes.netlify.app/web/quiz/37) Σε αυτό το μάθημα, θα μάθετε πώς να προσθέσετε βαθμολογία σε ένα παιχνίδι και να υπολογίσετε ζωές. ## Σχεδίαση κειμένου στην οθόνη Για να εμφανίσετε τη βαθμολογία του παιχνιδιού στην οθόνη, θα χρειαστεί να γνωρίζετε πώς να τοποθετήσετε κείμενο στην οθόνη. Η απάντηση είναι η χρήση της μεθόδου `fillText()` στο αντικείμενο canvas. Μπορείτε επίσης να ελέγξετε άλλες πτυχές, όπως τη γραμματοσειρά που θα χρησιμοποιήσετε, το χρώμα του κειμένου και ακόμη και την ευθυγράμμιση (αριστερά, δεξιά, κέντρο). Παρακάτω υπάρχει κώδικας που σχεδιάζει κείμενο στην οθόνη. ```javascript ctx.font = "30px Arial"; ctx.fillStyle = "red"; ctx.textAlign = "right"; ctx.fillText("show this on the screen", 0, 0); ``` ✅ Διαβάστε περισσότερα για [πώς να προσθέσετε κείμενο σε ένα canvas](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_text) και μη διστάσετε να κάνετε το δικό σας πιο εντυπωσιακό! ## Ζωή, ως έννοια παιχνιδιού Η έννοια της ζωής σε ένα παιχνίδι είναι απλώς ένας αριθμός. Στο πλαίσιο ενός παιχνιδιού διαστήματος, είναι συνηθισμένο να αποδίδονται συγκεκριμένες ζωές που μειώνονται μία προς μία όταν το σκάφος σας δέχεται ζημιά. Είναι ωραίο αν μπορείτε να δείξετε μια γραφική αναπαράσταση αυτού, όπως μικροσκάφη ή καρδιές αντί για έναν αριθμό. ## Τι θα δημιουργήσετε Ας προσθέσουμε τα εξής στο παιχνίδι σας: - **Βαθμολογία παιχνιδιού**: Για κάθε εχθρικό σκάφος που καταστρέφεται, ο ήρωας θα πρέπει να κερδίζει πόντους. Προτείνουμε 100 πόντους ανά σκάφος. Η βαθμολογία του παιχνιδιού θα πρέπει να εμφανίζεται κάτω αριστερά. - **Ζωή**: Το σκάφος σας έχει τρεις ζωές. Χάνετε μία ζωή κάθε φορά που ένα εχθρικό σκάφος συγκρούεται με εσάς. Η βαθμολογία ζωής θα πρέπει να εμφανίζεται κάτω δεξιά και να αποτελείται από το εξής γραφικό . ## Προτεινόμενα βήματα Βρείτε τα αρχεία που έχουν δημιουργηθεί για εσάς στον υποφάκελο `your-work`. Θα πρέπει να περιέχει τα εξής: ```bash -| assets -| enemyShip.png -| player.png -| laserRed.png -| index.html -| app.js -| package.json ``` Ξεκινήστε το πρότζεκτ σας στον φάκελο `your_work` πληκτρολογώντας: ```bash cd your-work npm start ``` Το παραπάνω θα ξεκινήσει έναν HTTP Server στη διεύθυνση `http://localhost:5000`. Ανοίξτε έναν browser και εισάγετε αυτή τη διεύθυνση. Αυτή τη στιγμή θα πρέπει να εμφανίζεται ο ήρωας και όλοι οι εχθροί, και καθώς πατάτε τα αριστερά και δεξιά βέλη, ο ήρωας κινείται και μπορεί να καταρρίψει εχθρούς. ### Προσθήκη κώδικα 1. **Αντιγράψτε τα απαραίτητα assets** από τον φάκελο `solution/assets/` στον φάκελο `your-work`. Θα προσθέσετε το asset `life.png`. Προσθέστε το lifeImg στη συνάρτηση window.onload: ```javascript lifeImg = await loadTexture("assets/life.png"); ``` 1. Προσθέστε το `lifeImg` στη λίστα των assets: ```javascript let heroImg, ... lifeImg, ... eventEmitter = new EventEmitter(); ``` 2. **Προσθέστε μεταβλητές**. Προσθέστε κώδικα που αντιπροσωπεύει τη συνολική βαθμολογία (0) και τις ζωές που απομένουν (3), και εμφανίστε αυτές τις βαθμολογίες στην οθόνη. 3. **Επεκτείνετε τη συνάρτηση `updateGameObjects()`**. Επεκτείνετε τη συνάρτηση `updateGameObjects()` για να χειριστείτε τις συγκρούσεις με εχθρούς: ```javascript enemies.forEach(enemy => { const heroRect = hero.rectFromGameObject(); if (intersectRect(heroRect, enemy.rectFromGameObject())) { eventEmitter.emit(Messages.COLLISION_ENEMY_HERO, { enemy }); } }) ``` 4. **Προσθέστε `life` και `points`**. 1. **Αρχικοποιήστε μεταβλητές**. Κάτω από το `this.cooldown = 0` στην κλάση `Hero`, ορίστε τις μεταβλητές life και points: ```javascript this.life = 3; this.points = 0; ``` 1. **Σχεδιάστε τις μεταβλητές στην οθόνη**. Σχεδιάστε αυτές τις τιμές στην οθόνη: ```javascript 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); } ``` 1. **Προσθέστε μεθόδους στον βρόχο του παιχνιδιού**. Βεβαιωθείτε ότι προσθέσατε αυτές τις συναρτήσεις στη συνάρτηση window.onload κάτω από το `updateGameObjects()`: ```javascript drawPoints(); drawLife(); ``` 1. **Υλοποιήστε κανόνες παιχνιδιού**. Υλοποιήστε τους εξής κανόνες παιχνιδιού: 1. **Για κάθε σύγκρουση ήρωα και εχθρού**, αφαιρέστε μία ζωή. Επεκτείνετε την κλάση `Hero` για να κάνετε αυτή την αφαίρεση: ```javascript decrementLife() { this.life--; if (this.life === 0) { this.dead = true; } } ``` 2. **Για κάθε λέιζερ που χτυπά έναν εχθρό**, αυξήστε τη βαθμολογία του παιχνιδιού κατά 100 πόντους. Επεκτείνετε την κλάση Hero για να κάνετε αυτή την αύξηση: ```javascript incrementPoints() { this.points += 100; } ``` Προσθέστε αυτές τις συναρτήσεις στους Collision Event Emitters: ```javascript 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. Ποια είναι τα κοινά χαρακτηριστικά τους; Μέχρι το τέλος αυτής της εργασίας, θα πρέπει να βλέπετε τα μικρά σκάφη ζωής κάτω δεξιά, τους πόντους κάτω αριστερά, και θα πρέπει να βλέπετε τον αριθμό ζωών να μειώνεται καθώς συγκρούεστε με εχθρούς και τους πόντους να αυξάνονται όταν καταρρίπτετε εχθρούς. Μπράβο! Το παιχνίδι σας είναι σχεδόν ολοκληρωμένο. --- ## 🚀 Πρόκληση Ο κώδικάς σας είναι σχεδόν ολοκληρωμένος. Μπορείτε να φανταστείτε τα επόμενα βήματα; ## Ερωτηματολόγιο Μετά το Μάθημα [Ερωτηματολόγιο μετά το μάθημα](https://ff-quizzes.netlify.app/web/quiz/38) ## Ανασκόπηση & Αυτομελέτη Ερευνήστε μερικούς τρόπους με τους οποίους μπορείτε να αυξάνετε και να μειώνετε τις βαθμολογίες και τις ζωές στο παιχνίδι. Υπάρχουν ενδιαφέρουσες μηχανές παιχνιδιών όπως το [PlayFab](https://playfab.com). Πώς θα μπορούσε η χρήση μιας τέτοιας μηχανής να βελτιώσει το παιχνίδι σας; ## Εργασία [Δημιουργία Παιχνιδιού Βαθμολογίας](assignment.md) --- **Αποποίηση ευθύνης**: Αυτό το έγγραφο έχει μεταφραστεί χρησιμοποιώντας την υπηρεσία αυτόματης μετάφρασης [Co-op Translator](https://github.com/Azure/co-op-translator). Παρόλο που καταβάλλουμε προσπάθειες για ακρίβεια, παρακαλούμε να έχετε υπόψη ότι οι αυτοματοποιημένες μεταφράσεις ενδέχεται να περιέχουν λάθη ή ανακρίβειες. Το πρωτότυπο έγγραφο στη μητρική του γλώσσα θα πρέπει να θεωρείται η αυθεντική πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική ανθρώπινη μετάφραση. Δεν φέρουμε ευθύνη για τυχόν παρεξηγήσεις ή εσφαλμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης.