33 KiB

Raw Blame History Unescape Escape

Δημιουργία Παιχνιδιού Διαστήματος Μέρος 3: Προσθήκη Κίνησης

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

Όταν οι μηχανικοί της NASA προγραμμάτιζαν τον υπολογιστή καθοδήγησης για τις αποστολές Apollo, αντιμετώπισαν μια παρόμοια πρόκληση: πώς κάνεις ένα διαστημόπλοιο να ανταποκρίνεται στις εντολές του πιλότου ενώ διατηρεί αυτόματα διορθώσεις πορείας; Οι αρχές που θα μάθουμε σήμερα αντικατοπτρίζουν αυτές τις έννοιες – διαχείριση κίνησης που ελέγχεται από τον παίκτη μαζί με αυτόματες συμπεριφορές συστήματος.

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

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

Ερωτηματολόγιο πριν το μάθημα

Κατανόηση της Κίνησης στα Παιχνίδια

Τα παιχνίδια ζωντανεύουν όταν τα πράγματα αρχίζουν να κινούνται, και υπάρχουν δύο βασικοί τρόποι με τους οποίους συμβαίνει αυτό:

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

Η κίνηση αντικειμένων στην οθόνη του υπολογιστή είναι πιο απλή από ό,τι νομίζετε. Θυμάστε εκείνες τις συντεταγμένες x και y από το μάθημα μαθηματικών; Αυτό ακριβώς χρησιμοποιούμε εδώ. Όταν ο Γαλιλαίος παρακολουθούσε τα φεγγάρια του Δία το 1610, ουσιαστικά έκανε το ίδιο – σχεδίαζε θέσεις με την πάροδο του χρόνου για να κατανοήσει τα μοτίβα κίνησης.

Η κίνηση αντικειμένων στην οθόνη είναι σαν να δημιουργείτε μια κινούμενη εικόνα σε βιβλίο – πρέπει να ακολουθήσετε αυτά τα τρία απλά βήματα:

Ενημέρωση της θέσης – Αλλάξτε πού πρέπει να βρίσκεται το αντικείμενό σας (ίσως μετακινήστε το 5 pixel προς τα δεξιά)
Διαγραφή του παλιού καρέ – Καθαρίστε την οθόνη ώστε να μην βλέπετε φαντασματικές γραμμές παντού
Σχεδίαση του νέου καρέ – Τοποθετήστε το αντικείμενό σας στη νέα του θέση

Κάντε το αρκετά γρήγορα, και μπαμ! Έχετε ομαλή κίνηση που φαίνεται φυσική στους παίκτες.

Δείτε πώς μπορεί να φαίνεται αυτό στον κώδικα:

// Set the hero's location
hero.x += 5;
// Clear the rectangle that hosts the hero
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Redraw the game background and hero
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "black";
ctx.drawImage(heroImg, hero.x, hero.y);

Τι κάνει αυτός ο κώδικας:

Ενημερώνει τη συντεταγμένη x του ήρωα κατά 5 pixel για να τον μετακινήσει οριζόντια
Καθαρίζει ολόκληρη την περιοχή του καμβά για να αφαιρέσει το προηγούμενο καρέ
Γεμίζει τον καμβά με μαύρο χρώμα φόντου
Ξανασχεδιάζει την εικόνα του ήρωα στη νέα του θέση

✅ Μπορείτε να σκεφτείτε έναν λόγο για τον οποίο η επανασχεδίαση του ήρωα πολλές φορές ανά δευτερόλεπτο μπορεί να προκαλέσει κόστη απόδοσης; Διαβάστε για εναλλακτικές σε αυτό το μοτίβο.

Χειρισμός συμβάντων πληκτρολογίου

Εδώ συνδέουμε την είσοδο του παίκτη με τη δράση του παιχνιδιού. Όταν κάποιος πατά το spacebar για να πυροβολήσει ένα λέιζερ ή πατά ένα πλήκτρο βέλους για να αποφύγει έναν αστεροειδή, το παιχνίδι σας πρέπει να ανιχνεύσει και να ανταποκριθεί σε αυτή την είσοδο.

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

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

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

Δείτε ένα παράδειγμα:

window.addEventListener('keyup', (evt) => {
  // evt.key = string representation of the key
  if (evt.key === 'ArrowUp') {
    // do something
  }
});

Ανάλυση του τι συμβαίνει εδώ:

Ακούει για συμβάντα πληκτρολογίου σε ολόκληρο το παράθυρο
Καταγράφει το αντικείμενο του συμβάντος που περιέχει πληροφορίες για το ποιο πλήκτρο πατήθηκε
Ελέγχει αν το πατημένο πλήκτρο αντιστοιχεί σε συγκεκριμένο πλήκτρο (σε αυτή την περίπτωση, το βέλος προς τα πάνω)
Εκτελεί κώδικα όταν πληρούται η συνθήκη

Για τα συμβάντα πληκτρολογίου υπάρχουν δύο ιδιότητες στο συμβάν που μπορείτε να χρησιμοποιήσετε για να δείτε ποιο πλήκτρο πατήθηκε:

key - αυτή είναι μια συμβολοσειρά που αντιπροσωπεύει το πατημένο πλήκτρο, για παράδειγμα 'ArrowUp'
keyCode - αυτή είναι μια αριθμητική αναπαράσταση, για παράδειγμα 37, που αντιστοιχεί στο ArrowLeft

✅ Η διαχείριση συμβάντων πληκτρολογίου είναι χρήσιμη εκτός από την ανάπτυξη παιχνιδιών. Τι άλλες χρήσεις μπορείτε να σκεφτείτε για αυτή την τεχνική;

Ειδικά πλήκτρα: μια προειδοποίηση!

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

Μπορούμε να αποτρέψουμε αυτές τις προεπιλεγμένες συμπεριφορές και να αφήσουμε το παιχνίδι μας να χειριστεί την είσοδο αντί για αυτές. Αυτό είναι παρόμοιο με το πώς οι πρώτοι προγραμματιστές υπολογιστών έπρεπε να παρακάμψουν διακοπές συστήματος για να δημιουργήσουν προσαρμοσμένες συμπεριφορές – απλώς το κάνουμε σε επίπεδο προγράμματος περιήγησης. Δείτε πώς:

const onKeyDown = function (e) {
  console.log(e.keyCode);
  switch (e.keyCode) {
    case 37:
    case 39:
    case 38:
    case 40: // Arrow keys
    case 32:
      e.preventDefault();
      break; // Space
    default:
      break; // do not block other keys
  }
};

window.addEventListener('keydown', onKeyDown);

Κατανόηση αυτού του κώδικα πρόληψης:

Ελέγχει για συγκεκριτικούς κωδικούς πλήκτρων που μπορεί να προκαλέσουν ανεπιθύμητη συμπεριφορά του προγράμματος περιήγησης
Αποτρέπει την προεπιλεγμένη ενέργεια του προγράμματος περιήγησης για τα πλήκτρα βέλους και το spacebar
Επιτρέπει σε άλλα πλήκτρα να λειτουργούν κανονικά
Χρησιμοποιεί το e.preventDefault() για να σταματήσει την ενσωματωμένη συμπεριφορά του προγράμματος περιήγησης

Κίνηση που προκαλείται από το παιχνίδι

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

Χρησιμοποιούμε τους ενσωματωμένους χρονομετρητές της JavaScript για να ενημερώνουμε τις θέσεις σε τακτά χρονικά διαστήματα. Αυτή η έννοια είναι παρόμοια με το πώς λειτουργούν τα εκκρεμή ρολόγια – ένας τακτικός μηχανισμός που ενεργοποιεί συνεπείς, χρονισμένες ενέργειες. Δείτε πόσο απλό μπορεί να είναι:

const id = setInterval(() => {
  // Move the enemy on the y axis
  enemy.y += 10;
}, 100);

Τι κάνει αυτός ο κώδικας κίνησης:

Δημιουργεί έναν χρονομετρητή που εκτελείται κάθε 100 χιλιοστά του δευτερολέπτου
Ενημερώνει τη συντεταγμένη y του εχθρού κατά 10 pixel κάθε φορά
Αποθηκεύει το ID του διαστήματος ώστε να μπορούμε να το σταματήσουμε αργότερα αν χρειαστεί
Μετακινεί τον εχθρό προς τα κάτω στην οθόνη αυτόματα

Ο βρόχος του παιχνιδιού

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

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

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

Δείτε πώς μπορεί να φαίνεται ένας βρόχος παιχνιδιού, εκφρασμένος σε κώδικα:

const gameLoopId = setInterval(() => {
  function gameLoop() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = "black";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    drawHero();
    drawEnemies();
    drawStaticObjects();
  }
  gameLoop();
}, 200);

Κατανόηση της δομής του βρόχου παιχνιδιού:

Καθαρίζει ολόκληρο τον καμβά για να αφαιρέσει το προηγούμενο καρέ
Γεμίζει το φόντο με ένα συμπαγές χρώμα
Σχεδιάζει όλα τα αντικείμενα του παιχνιδιού στις τρέχουσες θέσεις τους
Επαναλαμβάνει αυτή τη διαδικασία κάθε 200 χιλιοστά του δευτερολέπτου για να δημιουργήσει ομαλή κίνηση
Διαχειρίζεται τον ρυθμό καρέ ελέγχοντας το χρονικό διάστημα

Συνεχίζοντας το Παιχνίδι Διαστήματος

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

Πάρτε τον κώδικα από εκεί που σταματήσαμε στο προηγούμενο μάθημα (ή ξεκινήστε με τον κώδικα στο φάκελο Part II- starter αν χρειάζεστε μια νέα αρχή).

Τι δημιουργούμε σήμερα:

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

Ας ξεκινήσουμε την υλοποίηση αυτών των χαρακτηριστικών.

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

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

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

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

cd your-work
npm start

Τι κάνει αυτή η εντολή:

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

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

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

Προσθέστε ειδικά αντικείμενα για hero, enemy και game object, τα οποία θα έχουν ιδιότητες x και y. (Θυμηθείτε το τμήμα για Κληρονομικότητα ή σύνθεση).

ΥΠΟΔΕΙΞΗ Το game object θα πρέπει να είναι αυτό με τις ιδιότητες x και y και την ικανότητα να σχεδιάζει τον εαυτό του σε έναν καμβά.

Συμβουλή: Ξεκινήστε προσθέτοντας μια νέα κλάση GameObject με τον κατασκευαστή της όπως παρακάτω, και στη συνέχεια σχεδιάστε την στον καμβά:
```
class GameObject {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.dead = false;
    this.type = "";
    this.width = 0;
    this.height = 0;
    this.img = undefined;
  }

  draw(ctx) {
    ctx.drawImage(this.img, this.x, this.y, this.width, this.height);
  }
}
```
Κατανόηση αυτής της βασικής κλάσης:
- Ορίζει κοινές ιδιότητες που μοιράζονται όλα τα αντικείμενα του παιχνιδιού (θέση, μέγεθος, εικόνα)
- Περιλαμβάνει μια σημαία dead για να παρακολουθεί αν το αντικείμενο πρέπει να αφαιρεθεί
- Παρέχει μια μέθοδο draw() που σχεδιάζει το αντικείμενο στον καμβά
- Ορίζει προεπιλεγμένες τιμές για όλες τις ιδιότητες που μπορούν να παρακαμφθούν από τις υποκλάσεις
Τώρα, επεκτείνετε αυτό το GameObject για να δημιουργήσετε τον Hero και τον Enemy:
```
class Hero extends GameObject {
  constructor(x, y) {
    super(x, y);
    this.width = 98;
    this.height = 75;
    this.type = "Hero";
    this.speed = 5;
  }
}
```
```
class Enemy extends GameObject {
  constructor(x, y) {
    super(x, y);
    this.width = 98;
    this.height = 50;
    this.type = "Enemy";
    const id = setInterval(() => {
      if (this.y < canvas.height - this.height) {
        this.y += 5;
      } else {
        console.log('Stopped at', this.y);
        clearInterval(id);
      }
    }, 300);
  }
}
```
Βασικές έννοιες σε αυτές τις κλάσεις:
- Κληρονομεί από το GameObject χρησιμοποιώντας τη λέξη-κλειδί extends
- Καλεί τον κατασκευαστή γονέα με super(x, y)
- Ορίζει συγκεκριμένες διαστάσεις και ιδιότητες για κάθε

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

και προσθέστε μια συνάρτηση createHero() για να κάνετε μια παρόμοια διαδικασία για τον ήρωα.

```javascript
function createHero() {
  hero = new Hero(
    canvas.width / 2 - 45,
    canvas.height - canvas.height / 4
  );
  hero.img = heroImg;
  gameObjects.push(hero);
}
```

Τι κάνει η δημιουργία του ήρωα:

Τοποθετεί τον ήρωα στο κάτω κέντρο της οθόνης
Αναθέτει την εικόνα του ήρωα στο αντικείμενο του ήρωα
Προσθέτει τον ήρωα στον πίνακα αντικειμένων του παιχνιδιού για την απεικόνιση

και τέλος, προσθέστε μια συνάρτηση drawGameObjects() για να ξεκινήσει η απεικόνιση:

```javascript
function drawGameObjects(ctx) {
  gameObjects.forEach(go => go.draw(ctx));
}
```

Κατανόηση της συνάρτησης απεικόνισης:

Διατρέχει όλα τα αντικείμενα του παιχνιδιού στον πίνακα
Καλεί τη μέθοδο draw() σε κάθε αντικείμενο
Περνάει το context του καμβά ώστε τα αντικείμενα να μπορούν να απεικονιστούν

Οι εχθροί σας θα πρέπει να αρχίσουν να προχωρούν προς το διαστημόπλοιο του ήρωά σας! } } ```

and add a `createHero()` function to do a similar process for the hero.

```javascript
function createHero() {
  hero = new Hero(
    canvas.width / 2 - 45,
    canvas.height - canvas.height / 4
  );
  hero.img = heroImg;
  gameObjects.push(hero);
}
```

και τέλος, προσθέστε μια συνάρτηση drawGameObjects() για να ξεκινήσει η απεικόνιση:

```javascript
function drawGameObjects(ctx) {
  gameObjects.forEach(go => go.draw(ctx));
}
```

Οι εχθροί σας θα πρέπει να αρχίσουν να προχωρούν προς το διαστημόπλοιο του ήρωά σας!

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

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

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

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

Μάθετε περισσότερα για το agent mode εδώ.

🚀 Πρόκληση

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

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

Ομαδοποίηση συναρτήσεων που σχετίζονται μεταξύ τους με σαφείς επικεφαλίδες σχολίων
Διαχωρισμός αρμοδιοτήτων - διατηρήστε τη λογική του παιχνιδιού ξεχωριστή από την απεικόνιση
Χρήση συνεπών ονομάτων για μεταβλητές και συναρτήσεις
Δημιουργία modules ή namespaces για την οργάνωση διαφορετικών πτυχών του παιχνιδιού
Προσθήκη τεκμηρίωσης που εξηγεί τον σκοπό κάθε κύριας ενότητας

Ερωτήσεις για προβληματισμό:

Ποια μέρη του κώδικά σας είναι πιο δύσκολο να κατανοηθούν όταν επιστρέφετε σε αυτά;
Πώς θα μπορούσατε να οργανώσετε τον κώδικά σας ώστε να είναι πιο εύκολο για κάποιον άλλο να συνεισφέρει;
Τι θα συνέβαινε αν θέλατε να προσθέσετε νέες λειτουργίες όπως power-ups ή διαφορετικούς τύπους εχθρών;

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

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

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

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

Πράγματα που αξίζει να εξερευνήσετε:

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

Εργασία

Σχολιάστε τον κώδικά σας

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

33 KiB Raw Blame History Unescape Escape