Δημιούργησα ένα παιχνίδι ρόλων σε JavaScript. Μπορείτε επίσης. Δείτε πώς.

Θέλετε λοιπόν να δοκιμάσετε και να δημιουργήσετε ένα παιχνίδι, αλλά είστε λίγο εκφοβισμένοι; Μην ανησυχείτε, ήμουν κι εγώ!

Φοβόμουν να χρησιμοποιήσω αντικείμενα, για παράδειγμα. Ήταν αυτό το μεγάλο τρομακτικό πράγμα που έφυγα για αργότερα. Αλλά τώρα τα χρησιμοποιώ όλη την ώρα!

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

Αυτό είναι το παιχνίδι μου που τρέχει στο CodePen. (Λάβετε υπόψη ότι δεν έχει ακόμα βελτιστοποιηθεί για κινητά):

Πρώτα ,επιλέξτε το σημείο του παιχνιδιού σας. Είναι παζλ; Ένα RPG; Ένα hack & κάθετο; Εντάξει, τώρα σκεφτείτε τις τεχνικές δυσκολίες της δημιουργίας του. Ένα παιχνίδι παζλ θα απαιτούσε πολύ περίπλοκο javascript. Ένα hack & slash θα χρειαζόταν πολύ προσεκτική εξισορρόπηση και ούτω καθεξής.

Επίσης, αποφασίστε αν θέλετε να είναι ένα παιχνίδι προγράμματος περιήγησης, ένα παιχνίδι για κινητά ή και τα δύο (ένα "εγγενές web" παιχνίδι).

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

Δεύτερον , γράψτε όλα τα πράγματα που χρειάζεστε για να προγραμματίσετε για να κάνετε πραγματικά το παιχνίδι. Για μένα ήταν:

  • ένα σύστημα απογραφής
  • μια γεννήτρια αντικειμένων
  • ένα σύστημα stat παίκτη
  • ένα σύστημα εξοικονόμησης

Τρίτον , ξεκινήστε να φτιάχνετε το παιχνίδι σας επιλύοντας αυτά τα προβλήματα ένα προς ένα.

Χρειάζεστε βοήθεια για τη δημιουργία του παιχνιδιού;

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

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

  • Game-Icons.net - αυτά τα εικονίδια είναι διασκεδαστικά και εύκολα χρωματισμένα
  • Ανοίξτε το Game Art - αποκτήστε μερικά υπέροχα δημόσια στοιχεία τομέα
  • Μαζική αλλαγή μεγέθους Φωτογραφίες - ένα εξαιρετικό εργαλείο για τη δημιουργία των δικών σας μικροσκοπικών εικονιδίων
  • CSS Sprite Generator - σας βοηθά να δημιουργήσετε CSS spritesheets για τα εικονίδια σας

Ζητήματα που αντιμετώπισα και πώς τα έλυσα

Φύλλα

Σκοπεύετε να έχετε περισσότερες από 20 εικόνες στο παιχνίδι σας; Εάν ναι, δεν θέλετε να δημιουργήσετε 20 εικόνες με συνδέσμους εικόνας σε καθεμία. Μπορεί να μην πιστεύετε ότι 20 εικόνες είναι τόσο μεγάλες, αλλά αν αποφασίσετε να προσθέσετε 50 ακόμη; Εκεί έρχονται χρήσιμα τα spritesheets. Βάλτε μερικές φωτογραφίες σε αυτές, αντιγράψτε το αρχείο CSS στο έργο σας και απλώς προσθέστε την τάξη στο στοιχείο σας που αντιστοιχεί στην επιθυμητή εικόνα.

Αποθήκευση της κατάστασης του παιχνιδιού σας

Θέλετε να αποθηκευτεί το παιχνίδι σας; Λοιπόν, μπορείτε να επιλέξετε μεταξύ της χρήσης του LocalStorage του προγράμματος περιήγησης και της αποθήκευσης πραγμάτων σε έναν διακομιστή. Οι διακομιστές απαιτούν γνώσεις back end. Εάν δεν έχετε κανένα, προτείνω να χρησιμοποιήσετε το LocalStorage. Αποθηκεύει το παιχνίδι για όσο διάστημα ο χρήστης δεν το διαγράφει με κάποιο εργαλείο καθαρισμού. Δείτε πώς το έκανα:

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

Διαμορφώστε τον κωδικό σας

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

Τώρα μπορείτε να ρωτήσετε, πώς λειτουργεί το δεύτερο ξόρκι; Έχω μια συνάρτηση playerAttack () που χρησιμοποιεί το ορθογραφικό αντικείμενο για να κάνει πράγματα:

  • Πρώτα εκτελεί τη συνάρτηση ενημέρωσης ξόρκι, η οποία καλεί το αντικείμενο ξόρκι. Στη συνέχεια, το ξόρκι παίρνει τα τρέχοντα στατιστικά σας και τα μετατρέπει σε τιμές όπως «ζημιά» και «μάνα κόστος».
  • Ελέγχει για να δει αν η ζημιά είναι μεγαλύτερη από 0. Εάν ναι, κάνει ζημιά στο αφεντικό και εμφανίζει τη ζημιά, ποια ξόρκι το έκανε και το ποσό. Αυτό το κάνει και για τις περισσότερες άλλες τιμές. Ίσως πιστεύετε ότι ένας έλεγχος μεγαλύτερος από το μηδέν είναι άχρηστος, αλλά θα σκεφτείτε ξανά όταν το παιχνίδι λέει ότι κάνατε 0 ζημιά και αποκαταστήσατε 0 μάνα.
  • Στη συνέχεια εκτελεί μια προσαρμοσμένη λειτουργία, εάν το ξόρκι έχει μία. Αυτό θα μπορούσε να χρησιμοποιηθεί για να δώσει ξόρκια ειδικά εφέ που δεν είναι δυνατά μέσω της κύριας επίθεσης λειτουργίας μας.

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

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

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

Αλλά έχω επίσης έναν έλεγχο θανάτου Αφεντικού που εκτελείται κάθε δευτερόλεπτο μετά την έναρξη της μάχης. Γιατί; Έτσι, οι παίκτες δεν χρειάζεται να περιμένουν 20 δευτερόλεπτα για να πεθάνει ένα αφεντικό.

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

Μερικά πράγματα που έχω μάθει:

  • Τα αντικείμενα είναι καλά. Με αυτόν τον τρόπο, όταν πρέπει να αποθηκεύσετε δεδομένα, απλά πρέπει να αποθηκεύσετε το αντικείμενο - όχι τις 50 μεμονωμένες μεταβλητές.
  • Πάντα να ορίζετε χρονικά όρια και διαστήματα ως μεταβλητές, ώστε να μπορούν να εκκαθαριστούν αργότερα - εκτός εάν πρόκειται για μόνιμα εφέ που και είστε βέβαιοι ότι δεν θα χρειαστεί ποτέ να τα διαγράψετε.
  • Ένα μεγάλο αρχείο javascript μπορεί να μην είναι μια σοφή ιδέα. Το CodePen επιτρέπει μόνο ένα αρχείο JavaScript, αλλά ιδανικά, θα πρέπει να διαχωρίζετε τα πάντα σε ενότητες.
  • Εάν δεν ανησυχείτε για την απόδοση, μπορείτε απλώς να αντιγράψετε και να επικολλήσετε το αντικείμενο όταν πρέπει να ενημερωθεί - δεν χρειάζεται να ενημερώσετε τις μισές τιμές ξεχωριστά. Εάν το αντικείμενο είναι τεράστιο, μπορείτε ακόμη και να ορίσετε πρώτα το αντικείμενο ως μεταβλητή όπως: var αντικείμενο; και μετά δημιουργήστε το χρησιμοποιώντας κάποια άλλη λειτουργία όταν θέλετε να ενημερωθεί. Το έκανα με τα ξόρκια μου. Κάθε φορά που ο παίκτης κάνει ξόρκι, η συνάρτηση updateSpell () καθορίζει πρώτα το αντικείμενο ξόρκι ξανά, υπολογίζει όλη τη ζημιά και τα στατιστικά και, στη συνέχεια, ενεργοποιεί το ξόρκι.

Αστεία πράγματα για τα οποία έχω συμβιβαστεί:

  • Το κόστος μάνα δεξιοτήτων είναι ανά επίπεδο αφεντικού, διότι αν ήταν στο επίπεδο του παίκτη, θα τιμωρούσα τους παίκτες για την αναβάθμιση. Αυτό έκανε επίσης τα αφεντικά υψηλότερου επιπέδου πολύ πιο δύσκολα, κάτι που μου άρεσε.
  • Τα στοιχεία δημιουργούνται με όλα τα στατιστικά στοιχεία, αλλά δεν εμφανίζονται εάν είναι 0. Με αυτόν τον τρόπο, δεν χρειάζεται να ελέγξω για μη καθορισμένο και μπορώ να αποφύγω την εμφάνιση στατιστικών εάν δημιουργηθούν ως 0. Διπλή νίκη!
  • Έχω απλοποιήσει πολύ τους λάτρεις και τους debuffs. Βασικά, υπάρχει ένα var buffStat, nerfStat, totalStat και stat. Έτσι, οι buff ή debuffs δεν στοιβάζονται ποτέ.
  • Με τα αφεντικά, η ικανότητα nerf stat δεν στην πραγματικότητα είναι 0. Αυτό είναι πολύ πιο εξελιγμένο από αυτό. Nerfs το stat από το 9999999, στη συνέχεια ελέγχει για να δει αν είναι μικρότερο από 0. Εάν ναι, το ορίζει σε 0. Έτσι, αν καταφέρετε να φτάσετε σε ένα επίπεδο όπου έχετε στατιστικά που είναι στα δισεκατομμύρια, ίσως χρειαστεί να προσθέσω περισσότερα μηδενικά.

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

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

Σφάλματα και εκμεταλλεύσεις

Αυτό με εξέπληξε και με φοβόταν λίγο. Δεν μπορούσα να πιστέψω ότι το τέλειο έργο μου περιείχε σφάλματα!

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

Εδώ είναι μερικά σφάλματα και εκμεταλλεύσεις που εμφανίστηκαν, από την κορυφή του μυαλού μου:

  1. Θα μπορούσατε να αλλάξετε τα επίπεδα του αφεντικού ενώ πολεμάτε ένα αφεντικό και να βελτιώσετε τα κέρδη με αυτόν τον τρόπο
  2. Οι ράβδοι HP και Mana θα ξεχειλίζουν κάποτε
  3. Θα μπορούσατε να επιτεθείτε στο αφεντικό πριν ακόμη ξεκινήσει η μάχη. Μιλήστε για μια γροθιά!
  4. Το Mana θα μπορούσε να είναι αρνητικό, το οποίο σας εμπόδισε να εκτελέσετε ακόμη και βασικές επιθέσεις, που είναι ο κύριος τρόπος με τον οποίο μπορείτε να επαναφέρετε το mana σας.
  5. Θεραπεύει προσωρινά αύξησε τη μέγιστη υγεία σας.
  6. Ένα μόνο ξόρκι δεν μπορούσε να κάνει κλικ τις περισσότερες φορές λόγω ενός προβλήματος CSS
  7. Η επίθεση ενώ δεν είναι σε μάχη βάζει τα ξόρκιά σας σε άπειρη επαναφόρτιση

Όλα αυτά ακούγονται τρομακτικά, σωστά; Σε ένα MMORPG, αυτά τα πράγματα θα καταχραστούν από την πρώτη μέρα και θα καταστρέψουν τα πάντα!

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

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

Και πάλι, εδώ είναι το παιχνίδι μου αν θέλετε να το δοκιμάσετε (σημειώστε ότι δεν είναι βελτιστοποιημένο για κινητές συσκευές):

Και εδώ είναι ο κωδικός (ο οποίος είναι επίσης ανοιχτός κώδικας και επεξεργάσιμος στο CodePen):

RobertSkalko / LOOT-RPG-v1.0

LOOT-RPG-v1.0 - Σκότωσε τα αφεντικά, πάρτε LOOT! github.com

Λάβετε υπόψη ότι είμαι αρχάριος (μόλις 2 μήνες στον προγραμματισμό), ώστε ορισμένες από τις λύσεις μου να βελτιωθούν. Ας ελπίσουμε όμως ότι σας έδωσα τουλάχιστον τα βασικά για να ξεκινήσετε!

Διασκεδάστε δημιουργώντας το παιχνίδι Javascript!