Πώς να δημιουργήσετε αλληλεπίδραση χρηστών στο παιχνίδι σας HTML5 - dummies

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

Εδώ είναι ο κωδικός:

αυτοκίνητο. html var scene; var αυτοκίνητο? λειτουργία init () {σκηνή = νέα σκηνή (); αυτοκίνητο = νέο Sprite (σκηνή, "car. ​​png", 50, 30); αυτοκίνητο. setAngle (270); αυτοκίνητο. setSpeed ​​(0); σκηνή. start ();} // end init λειτουργία ενημέρωσης () {σκηνή. Σαφή(); // ελέγξτε τα πλήκτρα αν (κλειδιάΚάτω [K_LEFT]) { αυτοκίνητο. changeAngleBy (-5); } // τέλος αν εάν (κλειδιάΚατά την [K_RIGHT]) { αυτοκίνητο. changeAngleBy (5); } // τερματίστε εάν εάν (κλειδιάΚατά το [K_UP]) { αυτοκίνητο. changeSpeedBy (1); } // τερματίστε εάν αν (κλειδιάΚατά το [K_DOWN]) { αυτοκίνητο. changeSpeedBy (-1); } // τέλος αν αυτοκίνητο. ενημέρωση ();} // ενημέρωση τέλος

Οδηγήστε το αυτοκίνητο!

Πώς να χρησιμοποιήσετε το πληκτρολόγιο για το παιχνίδι σας

Με κάποιο τρόπο ο χρήστης πρέπει να αλληλεπιδράσει με τη σελίδα. Το πληκτρολόγιο είναι ένα από τα ευκολότερα στοιχεία εισόδου που μπορείτε να χρησιμοποιήσετε. Το simpleGame παρέχει δύο τρόπους για τον έλεγχο του πληκτρολογίου, αλλά η πιο ισχυρή τεχνική χρησιμοποιεί μια ειδική μεταβλητή που ονομάζεται keysDown. Εδώ είναι πώς λειτουργεί:

• keysDown είναι ένας παγκόσμιος πίνακας. Αυτή η μεταβλητή δημιουργείται αυτόματα όταν δημιουργείτε μια σκηνή. Είναι μια σειρά από τιμές Boolean - αυτό σημαίνει ότι κάθε στοιχείο μπορεί να είναι μόνο αληθές ή μόνο ψευδές.

• Για κάθε πλήκτρο ορίζεται μια σταθερά. Κάθε πλήκτρο στο τυπικό πληκτρολόγιο έχει ήδη οριστεί μια ειδική σταθερά. Για παράδειγμα, το K_A αντιπροσωπεύει το κλειδί Α και το K_B αντιπροσωπεύει το πλήκτρο Β.

• Τα πλήκτρα ορίζουν την κατάσταση κάθε πλήκτρου. Εάν πατηθεί το πλήκτρο Α, τα πλήκτραDown [A] θα περιέχουν την τιμή true. Εάν δεν πατηθεί το πλήκτρο Α, τα πλήκτραDown [A] θα περιέχουν την τιμή false.

• Μπορείτε να καθορίσετε την τρέχουσα κατάσταση οποιουδήποτε πλήκτρου. Απλά ελέγξτε τα πλήκτραDown [] για να καθορίσετε την τρέχουσα κατάσταση οποιουδήποτε πλήκτρου.

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

Πώς να μετακινήσετε το παιχνίδι sprite

Ουσιαστικά, ένας sprite έχει μια θέση, η οποία ελέγχεται από ιδιότητες X και Y. Εάν θυμάστε από την τάξη μαθηματικών, το Χ αντιπροσωπεύει οριζόντιες τιμές και το Υ είναι για κατακόρυφη θέση. Η προέλευση (0, 0) είναι η επάνω αριστερή γωνία της οθόνης.

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

Σημειώστε ότι το μέγιστο ύψος και πλάτος αποθηκεύονται σε μεταβλητές: σκηνή. ύψος και σκηνή. πλάτος.

Όλες οι διάφορες μέθοδοι κίνησης είναι πραγματικά για το χειρισμό των Χ και Υ. Μπορείτε να ορίσετε αυτές τις τιμές με το χέρι (setPosition (), setX (), και setY ()) ή μπορείτε να αλλάξετε τις τιμές (changeXby ()). Κάθε μία από αυτές τις μεθόδους λειτουργεί άμεσα, έτσι μπορείτε να τις χρησιμοποιήσετε για να κατευθύνετε τη θέση ή την κίνηση του sprite.

Ορισμένες από αυτές τις λειτουργίες φαίνονται παρόμοιες μεταξύ τους. Για παράδειγμα, το changeXby () μοιάζει πολύ με το setChangeX (). Αυτές οι λειτουργίες έχουν μια λεπτή αλλά σημαντική διαφορά. Η συνάρτηση changeXby () αλλάζει την τιμή του Χ μία φορά. Αν θέλετε να συνεχιστεί η αλλαγή, πρέπει να συνεχίσετε να καλείτε αυτήν τη λειτουργία.

Η συνάρτηση setChangeX () είναι πιο ισχυρή επειδή μπορείτε να την καλέσετε μία φορά και επανειλημμένα αλλάζει το x από οποιαδήποτε τιμή καθορίζετε μέχρι να καλέσετε ξανά το setChangeX ().

Για τους περισσότερους sprites, θέλετε πραγματικά να δώσετε απλά στον sprite γωνία και ταχύτητα, και αφήστε το να πάει. Το αντικείμενο sprite έχει ακριβώς τις μεθόδους που χρειάζεστε για αυτήν τη συμπεριφορά. Το setAngle () σάς επιτρέπει να καθορίσετε την κατεύθυνση που θα ακολουθήσει ο sprite και το setSpeed ​​() σάς επιτρέπει να ορίσετε την ταχύτητα που πρέπει να ακολουθήσετε προς αυτή την κατεύθυνση. Όπως και οι περισσότερες λειτουργίες κίνησης, υπάρχουν επίσης οι μέθοδοι changeAngle () και changeSpeed ​​().

Πώς να ελέγξετε το αυτοκίνητο στο παιχνίδι σας

Οι μηχανισμοί keysDown μπορούν να συνδυαστούν με τις μεθόδους κίνησης για τον εύκολο έλεγχο του αυτοκινήτου σας. Εδώ είναι πάλι ο σχετικός κώδικας από την ενημέρωση ():

ενημέρωση λειτουργίας () {σκηνή. Σαφή(); // ελέγξτε τα πλήκτρα αν (κλειδιάΚάτω [K_LEFT]) { αυτοκίνητο. changeAngleBy (-5); } // τέλος αν εάν (κλειδιάΚατά την [K_RIGHT]) { αυτοκίνητο. changeAngleBy (5); } // τερματίστε εάν εάν (κλειδιάΚατά το [K_UP]) { αυτοκίνητο. changeSpeedBy (1); } // τερματίστε εάν αν (κλειδιάΚατά το [K_DOWN]) { αυτοκίνητο. changeSpeedBy (-1); } // τέλος αν αυτοκίνητο. update (); // // end update

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

1. Καθαρίστε τη σκηνή.

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

2. Ελέγξτε το πάτημα ενός αριστερού βέλους.

   Χρησιμοποιήστε τους μηχανισμούς πλήκτρωνDown για να καθορίσετε αν πατήσετε το αριστερό βέλος.

3. Αν πατήσετε το αριστερό βέλος, γυρίστε το αυτοκίνητο αριστερά.

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

4. Επαναλάβετε για το δεξί βέλος.

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

5. Χρησιμοποιήστε το επάνω βέλος για να επιταχύνετε.

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

6. Χαμηλώστε το αυτοκίνητο με το βέλος κάτω.

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

7. Σχεδιάστε το αυτοκίνητο στη νέα του θέση.

   Είναι πολύ σημαντικό να θυμάστε ότι η κλήση των λειτουργιών κίνησης του sprite δεν αλλάζει τη θέση του αυτοκινήτου! Αλλάζει μόνο εσωτερικά δεδομένα στη μνήμη του παιχνιδιού. Πρέπει να καλέσετε τη μέθοδο ενημέρωσης () του αυτοκινήτου για να δείτε αυτές τις αλλαγές σε ενέργεια.