Ας φτιάξουμε το παιχνίδι Dig Dug χρησιμοποιώντας το MelonJS

Πρόσφατα είχα την ευκαιρία να παρακολουθήσω το Stranger Things Season 2. Αφού το παρακολούθησα, ήμουν πολύ ενθουσιασμένος που είδα ένα από τα αγαπημένα μου παιχνίδια κατά τη διάρκεια της παιδικής μου ηλικίας, "Dig Dug", που εμφανίστηκε στη σειρά. Ταυτόχρονα, έψαχνα για ένα παιχνίδι που θα μπορούσα να χτίσω για να εξασκήσω τις δεξιότητές μου στην ανάπτυξη παιχνιδιών. Έτσι, σήμερα αποφάσισα ότι το Dig Dug είναι το παιχνίδι.

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

Το MelonJS είναι το επιλεγμένο πλαίσιο, όχι λόγω συγκεκριμένου λόγου. Μόλις το διάλεξα τυχαία από τα πολλά πλαίσια εκεί έξω.

Ακολουθούν τα βήματα που θα ακολουθήσω για αυτήν την ανάπτυξη παιχνιδιών:

  1. Ρύθμιση του πλαισίου
  2. Δημιουργία του εδάφους
  3. Δημιουργία του εκσκαφέα
  4. Δημιουργία του τέρατος
  5. Δημιουργία λογικής σύγκρουσης
  6. Προσθήκη οθόνης μονάδας κεφαλής
  7. Προσθέτοντας ηχητικά εφέ και μουσική υπόκρουση
  8. Προσθήκη της οθόνης Εισαγωγής
  9. Τελική προσαρμογή
  10. Τι έπεται

Βήμα 1 - Ρύθμιση του πλαισίου

Η MelonJS συνιστά τη χρήση της πλάκας boiler που παρέχονται από αυτούς, για να ξεκινήσει μια ανάπτυξη παιχνιδιού. Πρώτα, πρέπει να κατεβάσω το boilerplate από το GitHub.

Θα κλωνοποιήσω το boilerplate στον τοπικό κατάλογο επιλογής μου:

#terminalgit clone //github.com/melonjs/boilerplate.git mylocalfolder

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

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

Τώρα θα ήθελα να συζητήσω λίγο για ορισμένα σημαντικά αρχεία σκελετών που παρέχονται στο boilerplate. Το MelonJS χρησιμοποιεί τη βιβλιοθήκη κληρονομιάς Jay Extend. Επομένως, πρέπει επίσης να εξοικειωθώ με τα αρχεία.

js/game.js:

Εδώ είναι ο παγκόσμιος χώρος ονομάτων του παιχνιδιού μου που τυχαίνει να ορίζεται ως game(που μπορεί να είναι οτιδήποτε μου αρέσει).

Από τις γραμμές 1 έως 8, μπορώ να ορίσω τις πληροφορίες που χρειάζομαι ως αντικείμενο.

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

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

Τέλος, οι γραμμές 28 έως 37 είναι όταν το παιχνίδι θα τρέξει τα πάντα.

js/screen/play.js:

Αυτό το αρχείο θα φορτωθεί με το game.jsοποίο χειρίζεται την οθόνη αναπαραγωγής.

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

Όμως, οι γραμμές 18 έως 21 είναι όπου όλες οι οντότητες θα αφαιρεθούν. Θα προχωρήσω πολύ στην επεξεργασία αυτών των δύο αρχείων.

Έτσι, πριν δημιουργήσω οποιοδήποτε άλλο αντικείμενο, πρέπει να εγκαταστήσω όλες τις βιβλιοθήκες npm που απαιτούνται εκτελώντας την παρακάτω εντολή:

#terminalnpm install

και πρέπει να εγκαταστήσω το grunt-cliοποίο απαιτείται:

npm install -g grunt-cli

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

grunt serve

Προς το παρόν μπορώ να δω μια μαύρη κενή οθόνη μόνο όταν το παιχνίδι τρέχει.

Βήμα 2 - Δημιουργία του εδάφους

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

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

Αρχικά, το έδαφος είναι ένα μικρό τετραγωνικό σχέδιο 15 x 15 pixel το οποίο μπορεί στη συνέχεια να αποδίδεται επανειλημμένα στην οθόνη για να κάνει μια μεγαλύτερη περιοχή. Θα μπορούσα να χρησιμοποιήσω ένα λογισμικό που ονομάζεται Tile Map Editor για αυτό το σκοπό, αλλά για αυτό το παιχνίδι θα το κάνω χειροκίνητα.

Έτσι το κάνω. Δημιουργήστε πρώτα ένα αρχείο στο jsφάκελο που ονομάζεται ground.js. Τότε θα δημιουργήσω μια νέα οντότητα αντικειμένου όπως παρακάτω:

Στη γραμμή 2, θα δημιουργήσω ένα νέο αντικείμενο που ονομάζεται game.Groundπου εκτείνεται από το αντικείμενο οντότητας που παρέχεται από τη MelonJS.

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

Το πλάτος και το ύψος καθορίζονται στις γραμμές 37 και 38.

Για να αποδώσω κάτι, μπορώ να χρησιμοποιήσω μια εικόνα sprite για το σκοπό αυτό. Αλλά σε αυτήν την περίπτωση, θα χρησιμοποιήσω τη drawλειτουργία από τον καμβά HTML5. Αυτό έγινε στις γραμμές 9 έως 28. Εδώ θα προγραμματίσω να σχεδιάσω ένα ορθογώνιο με πουά σε αυτό. Το χρώμα του τετραγώνου και των κουκκίδων θα καθοριστεί από τις μεταβλητές που δηλώνονται στις γραμμές 5 και 6, αντίστοιχα.

Στις γραμμές 30 έως 35 βρίσκεται η updateλειτουργία του αντικειμένου . Εδώ πρέπει να ρυθμίσω την οντότητα ώστε να ενημερώνεται στη γραμμή 32 κάθε φορά που updateκαλείται η συνάρτηση. Και τέλος, επιστρέψτε μια πραγματική τιμή για να βεβαιωθείτε ότι η οντότητα ξαναγράφεται κάθε φορά που το παιχνίδι ενημερώνεται.

Στο επόμενο βήμα, θα πρέπει να κάνω μια αναφορά σε αυτό το αρχείο στο index.htmlαρχείο στη γραμμή 40 και:

καταχωρήστε την οντότητα στην ομάδα στη game.jsγραμμή 33. Δεν θα χρειαζόμουν τον προηγούμενο κωδικό στον game.jsοποίο καταχωρήθηκε το game.PlayerEntityγιατί θα δημιουργήσω την οντότητα του παίκτη χειροκίνητα αργότερα.

Δεδομένου ότι το έδαφος πρέπει να τραβηχτεί αρκετές φορές, είναι καλό για μένα να δημιουργήσω ένα δοχείο για όλο το έδαφος που θα χειρίζεται όλες τις εργασίες. Για να δημιουργήσω ένα κοντέινερ, θα πρέπει να δημιουργήσω ένα νέο αντικείμενο και να επεκτείνω το αντικείμενο κοντέινερ που παρέχεται από τη MelonJS.

Θα ονομάσω αυτό το κοντέινερ game.LevelManager.

Όπως και πριν, θα πρέπει να αρχικοποιήσω τα επιχειρήματα. Ορίστε το όνομα αυτού του αντικειμένου και ορίστε τα δεδομένα που θα χρησιμοποιηθούν για την τοποθέτηση όλων των τετραγώνων στην οθόνη στις γραμμές 2 έως 21.

Στη συνέχεια, θα δημιουργήσω μια προσαρμοσμένη συνάρτηση που εκτελεί την εργασία απόδοσης με βάση τα δεδομένα στις γραμμές 24 έως 37. Στη γραμμή 30 είναι ο τρόπος με τον οποίο προσθέτω το τετράγωνο σε αυτό το κοντέινερ και μετά την απόδοση όλων των τετραγώνων πρέπει να ενημερώσω την περιοχή ορίου του κοντέινερ στο γραμμή 36.

Τέλος, θα πρέπει να αποδώσω το κοντέινερ στην οθόνη αναπαραγωγής, οπότε όλα κάτω από αυτό το κοντέινερ θα αποδίδονται επίσης.

Πριν το κάνω αυτό, θα πρέπει να δημιουργήσω μια παρουσία του levelManagerαντικειμένου στις γραμμές 9 έως 11 παρακάτω:

Πρέπει επίσης να θυμάμαι να κάνω πάντα αναφορά στο νέο αντικείμενο που δημιουργήθηκε στο index.htmlαρχείο.

Τώρα, αν εκτελέσω τον διακομιστή, θα έπρεπε να έχω μια τέτοια προβολή:

Βήμα 3 - Δημιουργία του εκσκαφέα

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

Στη συνέχεια, πρέπει να τοποθετήσω αυτήν την εικόνα στο data/imgφάκελο του καταλόγου boilerplate. Όταν τρέχω τον διακομιστή τώρα, το Grunt θα δημιουργήσει αυτόματα και θα προσθέσει το αρχείο πόρων σε build/jsφάκελο με τα παραπάνω δεδομένα εικόνας.

Για να δημιουργήσω το Diggerαντικείμενο, θα χρειαστεί και πάλι να επεκτείνω το Entityαντικείμενο.

Θα δημιουργήσω ένα νέο αρχείο που ονομάζεται digger.js στο js φάκελο και θα κάνω την αναφοράindex.html.

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

Στη συνέχεια, στη γραμμή 12, αναστρέφω το sprite όταν αποδίδεται για πρώτη φορά.

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

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

Από τις γραμμές 17 έως 22, ορίζω και διαχειρίζομαι το sprite animation. Οι αριθμοί στη συστοιχία της addAnimationσυνάρτησης πρέπει να καθορίσουν ποιο συγκεκριμένο πλαίσιο στην εικόνα πρόκειται να χρησιμοποιηθεί για την κίνηση. Ο αριθμός δίπλα του είναι να καθορίσει την ταχύτητα. Τέλος, ρυθμίζω το αρχικό κινούμενο σχέδιο που θα χρησιμοποιείται κατά την έναρξη της οθόνης αναπαραγωγής.

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

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

Αρχικά το sprite του diggger έχει μέγεθος 48 x 24. Αυτό οφείλεται στην εικόνα του εκσκαφέα που πυροβολεί το όπλο του. Ωστόσο, κατά τη διάρκεια της κανονικής κίνησης, θα χρειαστεί μόνο το σκάψιμο να έχει μέγεθος 24 x 24.

Αυτό αντιμετωπίζεται αλλάζοντας το σχήμα σύγκρουσης αρχικά σε 24 x 24 και μετατρέποντάς το σε 48 x 24 όταν ο ανασκαφέας πυροδοτεί το όπλο του, στις γραμμές 17 έως 19 παρακάτω:

Από τις γραμμές 28 έως 33, ορίζω πολλές boolean σημαίες που θα χρησιμοποιήσω στη λειτουργία κίνησης.

Ξεκινώντας από τη γραμμή 36 είναι η updateλειτουργία ανασκαφέας που περιέχει επίσης τη λογική κίνησης του εκσκαφέα με βάση την είσοδο πληκτρολογίου από τις γραμμές 40 έως 134.

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

Από τις γραμμές 143 έως 283 είναι η movementσυνάρτηση για πάνω, κάτω, αριστερά και δεξιά.

Για να καταστήσω τον ανασκαφέα στην οθόνη και να κάνω δυνατή την κίνηση, πρέπει να προσθέσω το αντικείμενο εκσκαφέα στο game.worldκοντέινερ στη γραμμή 12 και να καταχωρήσω το πλήκτρο πληκτρολογίου από τις γραμμές 19 έως 23 για την κίνηση play.jsπαρακάτω. Θα πρέπει επίσης να ξεμπλοκάρω όταν το παιχνίδι βγαίνει από την οθόνη του παιχνιδιού για άλλες χρήσεις, εάν απαιτείται στις γραμμές 30 έως 34.

Εάν τρέξω τον διακομιστή τώρα, μπορώ να δω το πρόγραμμα ανασκαφής σε δράση και να τον μετακινήσω πάνω, κάτω, αριστερά και δεξιά.

Ωστόσο, μπορώ να δω μια τελική εικόνα όταν κινείται ο ανασκαφέας, καθώς και τη γραμμή της εικόνας εκκίνησης MelonJS.

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

Βήμα 4 - Δημιουργία του τέρατος

Έγινε με τον ανασκαφέ για τώρα, θα δημιουργήσω τα τέρατα στη συνέχεια. Θα είναι βασικά η ίδια διαδικασία για τα τέρατα. Θα χρειαστεί να δημιουργήσω ένα αντικείμενο Entityγια τα τέρατα, να προσθέσω τα τέρατα στο levelManagerκοντέινερ και τελικά να το δώσω στην οθόνη.

Παρακάτω είναι το αντικείμενο Entityγια το τέρας:

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

Αυτό το sprite πρέπει να βρίσκεται στον ίδιο φάκελο με το sprite digger:

Στη συνέχεια, ονομάζω το αντικείμενο στη γραμμή 11, καθορίζω τον τύπο σύγκρουσης στη γραμμή 12, επαναφέρω το τετράγωνο σύγκρουσης και το κάνω μικρότερο στις γραμμές 14 έως 15 και θέτω την ταχύτητα και τη βαρύτητα του τέρατος στις γραμμές 17 έως 18. Ορίζω επίσης την κινούμενη ομάδα που θα χρησιμοποιηθεί πριν ρυθμίσετε το αρχικό κινούμενο σχέδιο που θα χρησιμοποιηθεί στις γραμμές 20 έως 22

Στη συνέχεια, ορίζω μια συνάρτηση για την κίνηση του τέρατος. Είναι ένας πολύ βασικός αλγόριθμος κίνησης που χειρίζεται την τιμή ταχύτητας του αντικειμένου X για οριζόντια κίνηση και Yγια κάθετη κίνηση στις γραμμές 26 έως 43. Τέλος, δημιουργώ τη updateλειτουργία του αντικειμένου που θα περιέχει μόνο την ενημέρωση σώματος για τώρα στις γραμμές 45 έως 52.

Πριν προχωρήσω περαιτέρω, πρέπει πάλι να υπενθυμίζω στον εαυτό μου να κάνω μια αναφορά index.html και να εγγραφώ game.jsγια οποιοδήποτε νέο αντικείμενο οντότητας δημιουργηθεί.

Μετά τη δημιουργία του αντικειμένου, θα πρέπει να ενημερώσω το LevelManagerκοντέινερ για να συμπεριλάβω τα δεδομένα του τέρατος και επίσης τη creationλειτουργία.

Παρακάτω είναι ο ενημερωμένος κώδικας:

Από τις γραμμές 21 έως 28 είναι τα δεδομένα για την τοποθεσία του τέρατος. Η λειτουργία για τη δημιουργία τέρατων ή την προσθήκη σε αυτό το κοντέινερ προστίθεται στις γραμμές 48 έως 56. Τέλος, για να εμφανιστεί στην οθόνη, πρέπει να προστεθούν ορισμένες γραμμές play.js.

Παρακάτω είναι η προσθήκη στη γραμμή 11 που καλεί τη λειτουργία για τη δημιουργία όλων των τεράτων:

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

Μέρος 5 - Δημιουργία λογικής σύγκρουσης

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

Ακολουθούν οι ενημερωμένοι κωδικοί αντικειμένων diggger:

Στη γραμμή 138, ο έλεγχος κώδικα για οποιαδήποτε σύγκρουση συμβαίνει για αυτό το αντικείμενο.

Στις γραμμές 144 έως 166, μια συνάρτηση παρέχει μια απόκριση όταν τα αντικείμενα συγκρούονται. Όταν ο εκσκαφέας συγκρούεται με το έδαφος στις γραμμές 147 έως 150, η συγκεκριμένη οντότητα γείωσης θα αφαιρεθεί από το levelManagerδοχείο.

Ωστόσο, δεν θέλω το έδαφος να εξαφανιστεί όταν ο εκσκαφέας πυροβολεί το όπλο του, οπότε έβαλα μια εξαίρεση στη γραμμή 148.

Στη συνέχεια είναι η λογική σύγκρουσης με τα τέρατα. Εάν ο εκσκαφέας συγκρούεται με ένα τέρας ενώ πυροβολεί το όπλο του, το τέρας θα τρεμοπαίζει και θα αφαιρεθεί. Εκτός από αυτό, ο ανασκαφέας θα τρεμοπαίζει, θα αφαιρεθεί και το παιχνίδι θα επανέλθει από τις γραμμές 151 έως 163. Η επιστροφή αληθινής στη collisionλειτουργία θα κάνει άλλα αντικείμενα που συγκρούονται με τον ανασκαφέα. Με άλλα λόγια, ο εκσκαφέας δεν θα περάσει από άλλο αντικείμενο κατά τη σύγκρουση. Για αυτήν την περίπτωση, θέλω να επιστρέψει ψευδής.

Για να το ολοκληρώσω, τότε θα δημιουργήσω τη λογική για τα όρια. Προς το παρόν, ο ανασκαφέας επιτρέπεται να κινείται εκτός της οθόνης. Για να το κάνω αυτό, θα καθορίσω τη μέγιστη απόσταση που επιτρέπεται να ταξιδεύει ο ανασκαφέας στον άξονα xκαι yστη λειτουργία αντικειμένου init στις γραμμές 16 έως 17 παρακάτω.

Στη συνέχεια, στη updateσυνάρτηση, θα ορίσω τα όρια χρησιμοποιώντας την ενσωματωμένη clampμέθοδο στις γραμμές 105–106.

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

Το τέρας δεν θα μπορέσει να σκάψει το έδαφος, οπότε θα αναπηδήσει προς την κατεύθυνση όπου βρίσκεται το σκάψιμο όταν χτυπήσει το έδαφος ή το όριο. Για να λειτουργήσει η σύγκρουση των ορίων, πρέπει να καθορίσω τη μέγιστη κίνηση απόστασης για το τέρας και να το ρυθμίσω. Δεν χρειάζεται να ορίσω τη λογική σύγκρουσης με τον ανασκαφέα, επειδή αντιμετωπίζεται ήδη από το Diggerαντικείμενο. Έκανα επίσης το τέρας να κινείται προς τα δεξιά όταν ξεκινά το παιχνίδι.

Παρακάτω είναι το πιο πρόσφατο Monsterαντικείμενο:

Από τις γραμμές 138 έως 159 είναι μια συνάρτηση που έχω ορίσει που θα εκτελεστεί όταν το τέρας συγκρούεται με το έδαφος στη onCollisionσυνάρτηση. Η λογική είναι να κάνει το τέρας να κινείται προς το σκάψιμο όταν χτυπά το έδαφος

Από τις γραμμές 76 έως 136 ορίσαμε μια συνάρτηση που αντιπροσωπεύει τη λογική σύγκρουσης τεράτων με το όριο, η οποία καλείται στη updateσυνάρτηση στη γραμμή 57.

Όποτε το τέρας δεν χτυπά το όριο, θα ελέγχει πάντα τη θέση του εκσκαφέα και θα κινείται προς αυτό. Στη συνέχεια, εάν το τέρας χτυπήσει το όριο, θα γυρίσει προς το σκάψιμο και θα συνεχίσει να το κυνηγά. Δεν ήρθα με τον αλγόριθμο AI - είναι ένας συνδυασμός από σενάρια που βρήκα στο Διαδίκτυο με το δικό μου. Επίσης, σε αυτήν τη λειτουργία, απαιτείται να αποκτήσω πρόσβαση στις ιδιότητες αντικειμένου του εκσκαφέα όπως το Xκαι η Yθέση. Για να αποκτήσω αυτήν την πρόσβαση, πρέπει να κάνω κάποιες αλλαγές στον τρόπο με τον οποίο αποδίδεται ο ανασκαφέας στην οθόνη αναπαραγωγής.

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

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

Θα ελέγξω τον πίνακα που περιέχει όλα τα τέρατα από τις γραμμές 60 έως 62. Εάν ο πίνακας είναι άδειος, θα επαναφέρω το παιχνίδι.

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

Βήμα 6 - Προσθήκη οθόνης κεφαλής

Πρώτα πρέπει να δημιουργήσω ένα φάκελο γραμματοσειρών στον κατάλογο δεδομένων:

data/fnt

Στη συνέχεια, χρησιμοποιήστε τη γραμματοσειρά που παρέχεται από την MelonJS στα στοιχεία του παιχνιδιού που κατεβάσατε νωρίτερα:

PressStart2P.pngPressStart2P.fnt

και βάλτε τα στο νέο φάκελο.

Στη συνέχεια, πρέπει να προσθέσω κάποιο σενάριο στο gruntfileπροκειμένου να δημιουργήσει τα δεδομένα πόρων για τη γραμματοσειρά παρακάτω στις γραμμές 22 έως 28:

Όταν εκτελώ τον διακομιστή, η γραμματοσειρά θα βρίσκεται στα δεδομένα πόρων:

Από προεπιλογή, το αντικείμενο Head Unit Display (HUD) έχει ήδη δημιουργηθεί στο boilerplate. Μπορώ να αποκτήσω πρόσβαση στο αρχείο μέσα js/entities/HUD.js. Απλώς πρέπει να καθορίσω τη γραμματοσειρά που προστέθηκε νωρίτερα και να δημιουργήσω μια drawσυνάρτηση για αυτήν.

Παρακάτω είναι ο ενημερωμένος κώδικας:

Ορίζω και αρχικοποιώ τη γραμματοσειρά στις γραμμές 42 έως 48 και μετά δημιουργώ τη drawσυνάρτηση που θα αποδώσει το σκορ του παιχνιδιού στη συγκεκριμένη θέση όπως ορίζεται στη γραμμή 71.

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

Πρώτα δημιούργησα το highScoreακίνητο στη γραμμή 9:

Στη συνέχεια, στη onCollisionσυνάρτηση του diggerI θα αυξάνω το σημείο κάθε φορά που ένα τέρας σκοτώνεται στη γραμμή 14 και θα προσθέσω τα τρέχοντα σημεία στην υψηλή βαθμολογία εάν ο εκσκαφέας σκοτωθεί στη γραμμή 26.

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

Βήμα 7 - Προσθήκη ηχητικών εφέ και μουσικής στο παρασκήνιο

Η ρύθμιση αυτή είναι πολύ απλή. Όλος ο απαιτούμενος κωδικός υπάρχει ήδη στην πλάκα boiler. Αυτό που πρέπει να κάνω είναι να βάλω την απαιτούμενη μουσική ή αρχείο ήχου στον σχετικό φάκελο και να κάνω κάτι με τη μουσική.

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

Ακολουθεί το ενημερωμένο αντικείμενο του diggger:

Στη γραμμή 37 δημιουργώ μια boolean σημαία για χρήση στη λογική της κίνησης και της μουσικής στο παρασκήνιο.

Στις γραμμές 45 έως 47 είναι η λογική έτσι ώστε η μουσική φόντου να μην ξεκινά επανειλημμένα εάν πατάτε συνεχώς ένα πλήκτρο κατεύθυνσης.

Αντίστοιχα στις γραμμές 114, 200, 224, 249 και 288, η σημαία έχει ρυθμιστεί έτσι ώστε η λογική να λειτουργεί σωστά.

Η μουσική υπόκρουση έγινε για να σταματήσει όταν το digger σταματά στη γραμμή 115.

Όσο για τους άλλους ήχους, προσθέτω επίσης έναν ήχο για το σκάψιμο σε λειτουργία πυροδότησης και έναν ποπ ήχο όταν πεθαίνει το τέρας. Στη γραμμή 69 ενεργοποιώ τον ήχο όταν πατάω το πλήκτρο πυρκαγιάς και το σταματάω όταν το πυροβόλο πλήκτρο απελευθερώνεται στη γραμμή 140. Ο ποπ ήχος θα ενεργοποιηθεί όταν το τέρας συγκρούεται με τον εκσκαφέα κατά τη λειτουργία πυροδότησης αμέσως μετά την αφαίρεσή του από το οθόνη στη γραμμή 174.

Βήμα 8 - Προσθήκη της οθόνης Εισαγωγής

Πρώτον, θα ανοίξω game.jsκαι θα τροποποιήσω ένα κομμάτι κώδικα. Αντί να αλλάξω την κατάσταση του παιχνιδιού σε PLAY, θα αλλάξω την κατάσταση σε MENU στη γραμμή 40.

Αυτό θα φορτώσει το title.jsαρχείο κατά τη φόρτωση του παιχνιδιού:

Στη συνέχεια θα επεξεργαστώ το αρχείο title.jsστο js/screensφάκελο:

Εδώ, onResetEventπαίζω τη μουσική φόντου όταν η οθόνη εμφανίζεται στη γραμμή 8.

Στη συνέχεια, καλύπτω τη θύρα προβολής με καφέ χρώματος στρώμα στη γραμμή 10.

Στη συνέχεια, δημιουργώ ένα Renderableαντικείμενο που περιέχει τον τίτλο και μερικές διατυπώσεις από τη γραμμή 13 έως 43.

Αυτό το Renderable αντικείμενο θα μετακινηθεί προς τα πάνω από έξω προς τα μέσα της οθόνης χρησιμοποιώντας τις Tweenγραμμές 22 έως 23.

Τέλος, θα πρέπει να δεσμεύσω το πλήκτρο ENTER για να ενεργοποιήσω ένα γεγονός που θα ξεκινήσει το παιχνίδι στις γραμμές 47 έως 57.

Βήμα 9 - Τελική προσαρμογή

Δεν θα κάνω πολλά για την τελική προσαρμογή. Θα προσθέσω έναν άλλο ήχο φόντου στο τέρας και θα τοποθετήσω τον ανασκαφέα παρόμοιο με το αρχικό παιχνίδι. Πρώτα θα προσθέσω ένα άλλο Tweenγια να μετακινηθεί το digger στο κέντρο της οθόνης όταν ξεκινά το παιχνίδι.

Θα συμπεριλάβω το νέο αρχείο ήχου στον σωστό φάκελο και μετά θα ενημερώσω το diggerαρχείο.

Θα δηλώσω μερικές ακόμη boolean σημαίες που θα χρησιμοποιηθούν στις γραμμές 38 έως 40, θα παίξω τη μουσική υπόκρουσης στην αρχή του παιχνιδιού στη γραμμή 30 και θα εκτελέσω την αρχική κίνηση εκκίνησης καλώντας την καθορισμένη συνάρτηση στη γραμμή 29.

Ακολουθεί η νέα συνάρτηση:

Από τη γραμμή 4, θα ορίσω το Tweenκινούμενο σχέδιο με μια λειτουργία επανάκλησης που σταματά τη μουσική υπόκρουση, ορίζει κάποιες σημαίες για τη λογική και μετακινεί την εγγραφή του κλειδιού δέσμευσης από το play.jsγια να αποφευχθεί οποιαδήποτε επιπλέον κίνηση από οποιοδήποτε πάτημα του πλήκτρου κατά τη διάρκεια του tweening.

Τέλος, παρακάτω είναι η λειτουργία δημιουργίας ήχου τέρατος κάθε 5 δευτερόλεπτα. Αυτή η συνάρτηση θα κληθεί στη updateσυνάρτηση του diggerαντικειμένου.

Βήμα 10 - Τι ακολουθεί

Ακολουθούν τα στοιχεία που θα μπορούσα να συνεχίσω να αναπτύσσω για αυτό το παιχνίδι:

  1. Δημιουργήστε τη φανταστική έκδοση του τέρατος που περνά από το έδαφος.
  2. Δημιουργήστε ένα δεύτερο και επόμενο επίπεδο για το παιχνίδι.
  3. Δημιουργήστε επιπλέον αντικείμενα όπου το digger θα μπορούσε να κερδίσει περισσότερους πόντους.
  4. Δημιουργήστε μια τοπική βάση δεδομένων με cookie όπου το παιχνίδι θα θυμάται την υψηλή βαθμολογία του παίκτη.
  5. Refactor, refactor και refactor.
  6. Βελτιώστε την απόδοση του παιχνιδιού.

Σας ευχαριστούμε που διαβάσατε μέχρι αυτό το τέλος. Εάν έχετε οποιαδήποτε άλλη πρόταση στην παραπάνω λίστα, μη διστάσετε να σχολιάσετε αυτήν την ανάρτηση παρακάτω.

Μπορείτε να τραβήξετε τον πλήρη κωδικό από το GitHub.

Μη διστάσετε να δοκιμάσετε το demo του παιχνιδιού.

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