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

Επειδή οι φυλλομετρητές ιστού είναι ασυνεπείς με τον τρόπο που αναφέρουν τη θέση του ποντικιού, η εισαγωγή του ποντικιού σε κανονική JavaScript είναι δύσκολη στο HTML κόσμο παιχνιδιών. Η βιβλιοθήκη simpleGame χειρίζεται αυτό προσθέτοντας τις μεθόδους getMouseX () και getMouseY () στο αντικείμενο Scene. Αυτές οι μέθοδοι δεν είναι πάντα ακριβείς, αλλά είναι αρκετά κοντά για τον περισσότερο προγραμματισμό παιχνιδιών.

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

Τις περισσότερες φορές όταν θέλετε τη θέση του ποντικιού, είναι επειδή πρόκειται να μετακινήσετε ένα αντικείμενο με το ποντίκι ή να τοποθετήσετε ένα αντικείμενο προς το ποντίκι.

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

Αν θέλετε να διαβάσετε μια οθόνη αφής, υπάρχει ένα ακόμα απλό βήμα. Η βιβλιοθήκη simpleGame έχει ένα εικονικό αντικείμενο joystick που ονομάζεται Joy. Δημιουργήστε μια παρουσία αυτής της κλάσης για να ενεργοποιήσετε τις λειτουργίες ανάγνωσης οθόνης αφής.

Σημειώστε ότι η διεπαφή αφής των κινητών συσκευών δεν είναι ακριβώς όπως το ποντίκι, γι 'αυτό χρειάζεται μια διαφορετική διεπαφή. Ωστόσο, μόλις δημιουργήσετε ένα αντικείμενο Joy, οι λειτουργίες getMouseX () και getMouseY () θα κάνουν την είσοδο αφής να ενεργεί ακριβώς όπως ένα κανονικό ποντίκι.

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

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

touchMouse. html var ball; παιχνίδι var? χαρά; λειτουργία init () {παιχνίδι = νέα σκηνή (); μπάλα = νέο Sprite (παιχνίδι, "redBall. png", 25, 25); μπάλα. setSpeed ​​(0); παιχνίδι. hideCursor (); χαρά = νέα χαρά (); παιχνίδι. start ();} // end init λειτουργία ενημέρωσης () {παιχνίδι. Σαφή(); followMouse (); μπάλα. ενημέρωση ();} // λειτουργία ενημέρωσης τέλος followMouse () { x = παιχνίδι. getMouseX (); y = παιχνίδι. getMouseY (); αν (παιχνιδιάρικο.) { // μετακινήστε το αντικείμενο λίγο υψηλότερα για οθόνες αφής y - = 100; } // τερματισμός οθόνης αφής μπάλα. setPosition (χ, γ); }

Η απόκτηση ενός sprite για να ακολουθήσετε το ποντίκι είναι απλώς ένα ζήτημα γνώσης των μεθόδων που πρέπει να καλέσετε.

1. Απόκρυψη του δρομέα του ποντικιού.

   Το αντικείμενο Scene έχει μια μέθοδο hideCursor ().Αυτός είναι ο ευκολότερος τρόπος για να αποκρύψετε τον κανονικό δείκτη του ποντικιού. Κανονικά, όταν ακολουθείτε το ποντίκι με ένα αντικείμενο, εννοείτε ότι το αντικείμενο αυτό θα δράσει όπως ο νέος δείκτης του ποντικιού, έτσι θα αποκρύψετε το κανονικό βέλος.

2. Δημιουργήστε μια μεταβλητή για το εικονικό joystick.

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

3. Αρχίστε το joystick.

   Κάντε μια εμφάνιση του αντικειμένου Joy στη λειτουργία init (). Απλά δημιουργώντας το joystick θα πει στον κινητήρα να περιμένει την είσοδο της αφής και να την αντιστοιχίσει στις κανονικές εντολές του ποντικιού.

4. Προσθέστε μια λειτουργία followMouse ().

   Είναι γενικά καλό να δημιουργήσετε μια νέα λειτουργία για να χειριστείτε την είσοδο. Η λειτουργία followMouse () θα πει το αντικείμενο να ακολουθεί το ποντίκι. Φυσικά, εάν δημιουργείτε ένα αντικείμενο που ακολουθεί το ποντίκι, μπορείτε να κάνετε αυτό μια μέθοδο αυτού του αντικειμένου, αν προτιμάτε.

5. Χρησιμοποιήστε τις μεθόδους getMouseX () και getMouseY ().

   Το αντικείμενο Scene έχει μεθόδους που ονομάζονται getMouseX () και getMouseY (). Χρησιμοποιήστε αυτές τις μεθόδους για να βρείτε τις συντεταγμένες Χ και Υ του ποντικιού στη σκηνή. Σημειώστε ότι οι συντεταγμένες δεν είναι πάντα ακριβείς.

6. Ελέγξτε αν έχετε οθόνη αφής.

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

7. Μετακινήστε το αντικείμενο ψηλότερα από το δάχτυλό σας.

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