Πώς να δημιουργήσετε ένα εικονικό χειριστήριο για HTML5 σας Game - ανδρείκελα

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

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

δοκιμή joystick παιχνίδι var? var output; var joystick; λειτουργία init () {παιχνίδι = νέα σκηνή (); output = document. getElementById ("έξοδος"); αν (παιχνιδιάρικο.) { joystick = new Joy (); } αλλιώς { alert ("Αυτή η δοκιμή απαιτεί μια διεπαφή βασισμένη στην αφή"). } παιχνίδι. start ()?} // τέλος ενημέρωση συνάρτηση init () { αν (. παιχνίδι απλός) { JX = joystick. getMouseX (); jy = joystick. getMouseY (); jdx = joystick. getDiffX (); jdy = joystick. getDiffY (); αποτέλεσμα = "joystick x:" + jx + "

"; αποτέλεσμα + = "joystick y:" + jy + "
"; αποτέλεσμα + = "joystick dx:" + jdx + "
"; αποτέλεσμα + = "joystick dy:" + jdy + "
"; . innerHTML = αποτέλεσμα?} else {alert ("Το παράδειγμα αναμένει μια οθόνη αφής")?}} // τέλος ενημέρωση Τίποτα δεν υπάρχουν ακόμα

Το εικονικό joystick είναι αρκετά εύκολο στη χρήση:

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

   Μπορείτε να το ονομάσετε χειριστήριο. Είδος πιασάρικα.

2. Δημιουργήστε το joystick αν είναι δυνατόν.

   Χρησιμοποιήστε το παιχνίδι. για να προσδιορίσετε εάν υπάρχει μια διεπαφή αφής. Εάν όχι, στείλτε ένα μήνυμα στον χρήστη.

3. Βάλτε τη θέση του ποντικιού.

   Όταν το εικονικό αντικείμενο του Joystick εντοπίζει ένα άγγιγμα στην οθόνη, ενεργοποιεί τις τιμές mouseX και mouseY. Χρησιμοποιήστε τις μεθόδους getMouseX () και getMouseY () για να προσδιορίσετε τις θέσεις X και Y της αφής. Με αυτόν τον τρόπο, η διεπαφή αφής λειτουργεί πολύ όπως το παραδοσιακό ποντίκι.

4. Λάβετε μια ένδειξη diffX και diffY από το joystick.

   Όταν ο χρήστης αγγίξει την οθόνη, η βιβλιοθήκη παρακολουθεί τις συντεταγμένες της αρχικής αφής. Στη συνέχεια μετρά πόσο μακριά έχει περάσει ο χρήστης. Η διαφορά στο X ονομάζεται diffX, και η διαφορά στο Y ονομάζεται diffY. Χρησιμοποιήστε το getDiffX () και τις μεθόδους getDiffY () του εικονικού αντικειμένου joystick για να καθορίσει πόσα pixel σε Χ και Υ του χρήστη έχει μετακινηθεί από το άγγιγμα της οθόνης.

5. Εμφανίστε τις τρέχουσες τιμές.

   Για το πρώτο πέρασμα, είναι σημαντικό να καταλάβουμε ποιο είναι το joystick εμφανίζει, έτσι μόλις λάβει τις αξίες και να τις εκτυπώσετε σε μια έξοδο στην οθόνη.

Φυσικά, το σημείο ενός εικονικού joystick είναι να μετακινήσετε τα πράγματα γύρω από την οθόνη.

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

joystick Δοκιμή var παιχνίδι? var μπάλα? var joystick; λειτουργία init () {παιχνίδι = νέα σκηνή (); μπάλα = νέο Sprite (παιχνίδι, "redBall. png", 50, 50); εάν το παιχνίδι είναι παιχνιδιάρικο {joystick = new Joy ()}} else {alert ("Το παιχνίδι απαιτεί οθόνη αφής")} // // end if ball. setSpeed ​​(0); μπάλα. setPosition (400, 300). παιχνίδι. start ();} // end init λειτουργία ενημέρωσης () {παιχνίδι. Σαφή(); αν (παιχνίδι. setDX (joystick, getDiffX ()); μπάλα. setDY (joystick, getDiffY ()); // // end touchable ball. update ();} // end update

Αυτό το παράδειγμα είναι ακόμη πιο απλό από το προηγούμενο.

1. Δημιουργήστε ένα απλό sprite μπάλα.

   Για αυτό το παράδειγμα, χρησιμοποιείται μια απλή μπάλα. Δημιουργήστε το σαν οποιοδήποτε άλλο βασικό sprite.

2. Δημιουργήστε ένα αντικείμενο χειριστηρίου.

   Κάντε ένα εικονικό αντικείμενο joystick.

3. Χαρτογράψτε το diffX του joystick και διαχωρίστε τις τιμές dx και dy της μπάλας.

   Αυτό δίνει εξαιρετικά ευαίσθητη κίνηση, επομένως μπορεί να θέλετε να προσαρμόσετε την ευαισθησία διαιρώντας την diffX και diffY με κάποιο συντελεστή κλιμάκωσης.