# Δημιουργία ενός Παιχνιδιού Διαστήματος Μέρος 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`. Ανοίξτε έναν περιηγητή και εισάγετε αυτή τη διεύθυνση. Αυτή τη στιγμή θα πρέπει να εμφανίζεται ο ήρωας και όλοι οι εχθροί, και καθώς πατάτε τα βελάκια αριστερά και δεξιά, ο ήρωας θα κινείται και θα μπορεί να καταρρίπτει εχθρούς. ### Προσθήκη κώδικα 1. **Αντιγράψτε τα απαραίτητα αρχεία** από τον φάκελο `solution/assets/` στον φάκελο `your-work`. Θα προσθέσετε το αρχείο `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. **Προσθέστε "ζωές" και "πόντους"**. 1. **Αρχικοποιήστε μεταβλητές**. Κάτω από το `this.cooldown = 0` στην κλάση `Hero`, ορίστε τις ζωές και τους πόντους: ```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; } ``` Προσθέστε αυτές τις συναρτήσεις στους Εκπομπούς Συμβάντων Συγκρούσεων: ```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). Παρόλο που καταβάλλουμε προσπάθειες για ακρίβεια, παρακαλούμε να έχετε υπόψη ότι οι αυτόματες μεταφράσεις ενδέχεται να περιέχουν σφάλματα ή ανακρίβειες. Το πρωτότυπο έγγραφο στη μητρική του γλώσσα θα πρέπει να θεωρείται η αυθεντική πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική ανθρώπινη μετάφραση. Δεν φέρουμε ευθύνη για τυχόν παρεξηγήσεις ή εσφαλμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης.