Πώς να προσθέσετε κουμπιά στο παιχνίδι HTML5 για κινητή πρόσβαση - dummies

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

Το αντικείμενο προσαρμοσμένου κουμπιού GameButton ξεκινά με τα χαρακτηριστικά ενός τυπικού κουμπιού HTML, αλλά στη συνέχεια προσθέτει μερικά κόλπα για να το κάνει κατάλληλο για τυχερά παιχνίδια. Μπορείτε να ενεργοποιήσετε το κουμπί με ένα κανονικό ποντίκι ή με τα χειριστήρια αφής, καθιστώντας το ιδανικό για παιχνίδια που μπορούν να παιχτούν και στους δύο τύπους συσκευών. Το κουμπί. Η σελίδα html απεικονίζει το κουμπί σε ενέργεια:

. html var btnMove; παιχνίδι var? var μπάλα? λειτουργία init () {παιχνίδι = νέα σκηνή (); παιχνίδι. setSize (200, 200). μπάλα = νέο Sprite (παιχνίδι, "redBall. png", 25, 25); μπάλα. setSpeed ​​(0); μπάλα. setPosition (100, 100). btnMove = νέο GameButton ("Μετακίνηση"); btnMove. SetPos (70,150). btnMove. setSize (60, 30). παιχνίδι. start ();} // end init λειτουργία ενημέρωσης () {παιχνίδι. Σαφή(); checkButtons (); μπάλα. ()}} // τέλος ενημέρωση λειτουργία checkButtons () { αν (btnMove.isClicked ()) { μπάλα. setSpeed ​​(3); } αλλιώς { μπάλα. setSpeed ​​(0); } // end if } // end checkButtons

Ως συνήθως, τα νέα και ενδιαφέροντα στοιχεία εμφανίζονται με έντονους χαρακτήρες. Εδώ μπορείτε να προσθέσετε ένα κουμπί παιχνιδιού σε ένα παιχνίδι:

1. Δημιουργήστε μια μεταβλητή για το κουμπί.

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

2. Κατασκευάστε το αντικείμενο GameButton.

   Κατασκευάστε το αντικείμενο GameButton στη μέθοδο init (). Η μεμονωμένη παράμετρος υποδεικνύει την περιγραφή του κουμπιού.

3. Ρυθμίστε το μέγεθος και τη θέση του κουμπιού.

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

4. Ελέγξτε την κατάσταση του κουμπιού κατά την ενημέρωση ().

   Όπως κανονικά ελέγχετε την κατάσταση του πληκτρολογίου κατά τη διάρκεια της λειτουργίας ενημέρωσης (), μπορείτε επίσης να καλέσετε μια λειτουργία για να ελέγξετε την κατάσταση του κουμπιού σας. Φυσικά, θα πρέπει να γράψετε αυτή τη λειτουργία.

5. Διαβάστε τη μέθοδο isClicked () του κουμπιού.

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

6. Αντιμετωπίστε ένα κουμπί σαν το πληκτρολόγιο.

   Επειδή η δοκιμή των κουμπιών επιστρέφει τελικά Boolean (αλήθεια ή ψευδής) τιμές, ο έλεγχος για τα κουμπιά συνήθως αισθάνεται πολλά όπως ο έλεγχος για το πληκτρολόγιο.

7. Εξετάστε το ενδεχόμενο να προσθέσετε κουμπιά μόνο όταν είναι απαραίτητο.

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

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

Σημειώστε ότι η λεζάντα του κουμπιού είναι συνηθισμένη HTML, οπότε αν θέλετε να κάνετε τα κουμπιά σας με βάση τις εικόνες, μπορείτε απλά να προσθέσετε την κατάλληλη ετικέτα

ως λεζάντα κουμπί.