Web-Dev-For-Beginners/translations/el/6-space-game/5-keeping-score

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

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

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

Έτοιμοι να κάνετε το παιχνίδι σας να μοιάζει με πραγματικό παιχνίδι; Ας προσθέσουμε βαθμολογία και διαχείριση ζωών - τους βασικούς μηχανισμούς που μετέτρεψαν τα πρώιμα arcade παιχνίδια όπως το Space Invaders από απλές επιδείξεις σε εθιστική ψυχαγωγία. Εδώ είναι που το παιχνίδι σας γίνεται πραγματικά διασκεδαστικό.

Σχεδίαση Κειμένου στην Οθόνη - Η Φωνή του Παιχνιδιού σας

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

Έχετε πλήρη έλεγχο στην εμφάνιση του κειμένου:

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

✅ Εξερευνήστε περισσότερο την προσθήκη κειμένου σε καμβά - μπορεί να εκπλαγείτε με το πόσο δημιουργικοί μπορείτε να γίνετε με γραμματοσειρές και στυλ!

Ζωές - Περισσότερο από Απλός Αριθμός

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

Η οπτική αναπαράσταση έχει μεγάλη σημασία - η εμφάνιση εικονιδίων πλοίων αντί για απλό "Ζωές: 3" δημιουργεί άμεση οπτική αναγνώριση, όπως ακριβώς έκαναν τα πρώιμα arcade μηχανήματα χρησιμοποιώντας εικονογραφία για να επικοινωνούν πέρα από γλωσσικά εμπόδια.

Δημιουργία Συστήματος Ανταμοιβών του Παιχνιδιού σας

Τώρα θα υλοποιήσουμε τους βασικούς μηχανισμούς ανατροφοδότησης που κρατούν τους παίκτες αφοσιωμένους:

• Σύστημα βαθμολογίας: Κάθε καταστραμμένο εχθρικό πλοίο δίνει 100 πόντους (στρογγυλοί αριθμοί είναι πιο εύκολοι για τους παίκτες να υπολογίσουν νοητικά). Η βαθμολογία εμφανίζεται στην κάτω αριστερή γωνία.
• Μετρητής ζωών: Ο ήρωάς σας ξεκινά με τρεις ζωές - ένα πρότυπο που καθιερώθηκε από τα πρώιμα arcade παιχνίδια για να ισορροπήσει την πρόκληση με τη δυνατότητα παιχνιδιού. Κάθε σύγκρουση με έναν εχθρό κοστίζει μία ζωή. Θα εμφανίσουμε τις εναπομείνασες ζωές στην κάτω δεξιά γωνία χρησιμοποιώντας εικονίδια πλοίων .

Ας Ξεκινήσουμε!

Πρώτα, ρυθμίστε τον χώρο εργασίας σας. Μεταβείτε στα αρχεία στον υποφάκελο your-work. Θα πρέπει να δείτε αυτά τα αρχεία:

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

Για να δοκιμάσετε το παιχνίδι σας, ξεκινήστε τον διακομιστή ανάπτυξης από τον φάκελο your_work:

cd your-work
npm start

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

Ώρα για Κωδικοποίηση!

1. Αποκτήστε τα οπτικά στοιχεία που χρειάζεστε. Αντιγράψτε το αρχείο life.png από τον φάκελο solution/assets/ στον φάκελο your-work. Στη συνέχεια, προσθέστε το lifeImg στη συνάρτηση window.onload:

   lifeImg = await loadTexture("assets/life.png");
   

2. Μην ξεχάσετε να προσθέσετε το lifeImg στη λίστα των στοιχείων σας:

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

3. Ρυθμίστε τις μεταβλητές του παιχνιδιού σας. Προσθέστε λίγο κώδικα για να παρακολουθείτε τη συνολική σας βαθμολογία (ξεκινώντας από το 0) και τις εναπομείνασες ζωές (ξεκινώντας από 3). Θα τις εμφανίσουμε στην οθόνη ώστε οι παίκτες να γνωρίζουν πάντα πού βρίσκονται.

4. Υλοποιήστε ανίχνευση σύγκρουσης. Επεκτείνετε τη συνάρτηση updateGameObjects() για να ανιχνεύει πότε οι εχθροί συγκρούονται με τον ήρωά σας:

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

5. Προσθέστε παρακολούθηση ζωών και πόντων στον Ήρωα.

   1. Αρχικοποιήστε τους μετρητές. Κάτω από το this.cooldown = 0 στην κλάση Hero, ρυθμίστε ζωές και πόντους:

      this.life = 3;
      this.points = 0;
      

   2. Εμφανίστε αυτές τις τιμές στον παίκτη. Δημιουργήστε συναρτήσεις για να σχεδιάσετε αυτές τις τιμές στην οθόνη:

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

   3. Συνδέστε τα όλα στον βρόχο του παιχνιδιού σας. Προσθέστε αυτές τις συναρτήσεις στη συνάρτηση window.onload ακριβώς μετά το updateGameObjects():

      drawPoints();
      drawLife();
      

6. Υλοποιήστε συνέπειες και ανταμοιβές στο παιχνίδι. Τώρα θα προσθέσουμε τα συστήματα ανατροφοδότησης που κάνουν τις ενέργειες του παίκτη σημαντικές:

   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; Κάντε μια εξερεύνηση - μπορεί να εκπλαγείτε με το τι είναι δυνατό!

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

Το παιχνίδι σας τώρα έχει τους βασικούς μηχανισμούς που έκαναν τα πρώιμα arcade παιχνίδια τόσο συναρπαστικά - σαφείς στόχους, άμεση ανατροφοδότηση και σημαντικές συνέπειες για τις ενέργειες του παίκτη.

---

Πρόκληση GitHub Copilot Agent 🚀

Χρησιμοποιήστε τη λειτουργία Agent για να ολοκληρώσετε την παρακάτω πρόκληση:

Περιγραφή: Βελτιώστε το σύστημα βαθμολογίας του παιχνιδιού διαστήματος προσθέτοντας μια λειτουργία υψηλής βαθμολογίας με μόνιμη αποθήκευση και μηχανισμούς μπόνους βαθμολογίας.

Πρόκληση: Δημιουργήστε ένα σύστημα υψηλής βαθμολογίας που αποθηκεύει την καλύτερη βαθμολογία του παίκτη στο localStorage. Προσθέστε μπόνους πόντους για συνεχόμενες καταστροφές εχθρών (σύστημα συνδυασμών) και υλοποιήστε διαφορετικές τιμές πόντων για διαφορετικούς τύπους εχθρών. Συμπεριλάβετε έναν οπτικό δείκτη όταν ο παίκτης πετυχαίνει νέα υψηλή βαθμολογία και εμφανίστε την τρέχουσα υψηλή βαθμολογία στην οθόνη του παιχνιδιού.

🚀 Πρόκληση

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

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

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

Ανασκόπηση & Αυτοδιδασκαλία

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

Εργασία

Δημιουργία Παιχνιδιού Βαθμολογίας

---

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