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

Τα πιο ενδιαφέροντα πράγματα στα παιχνίδια βίντεο HTML5 συμβαίνουν όταν τα sprites conk και συγκρούονται μεταξύ τους. Οι μηχανές παιχνιδιών έχουν συνήθως κάποιο εργαλείο για να ελέγξουν εάν δύο σπρίττες αλληλεπικαλύπτονται. Αυτό ονομάζεται ανίχνευση σύγκρουσης , και μπορεί να γίνει με διάφορους τρόπους. Αυτό το παράδειγμα χρησιμοποιεί το τυπικό σχήμα οριοθετημένο ορθογώνιο . Δεν είναι τέλειο, αλλά είναι πολύ εύκολο να εφαρμοστεί και χρησιμοποιείται ευρέως.

Πώς να ρυθμίσετε συγκρούσεις ορθογώνιου ορίου στο παιχνίδι σας

Ρίξτε μια ματιά στο colTest. html και θα δείτε ένα απλό παράδειγμα.

Στο colTest. html παράδειγμα, ο χρήστης μετακινεί το critter με το ποντίκι και θα λάβετε ένα μήνυμα όταν το critter αγγίζει το πλαίσιο στη μέση της οθόνης.

colTest. html checkCollisions (); πλαίσιο. εκσυγχρονίζω(); critter. update ();} // end update; λειτουργία checkCollisions () { αν (collidesWith (critter)) { έξοδος. innerHTML = "Σύγκρουση"; } αλλού { έξοδος. innerHTML = "Δεν υπάρχει σύγκρουση"; } // end if } // end checkCollisions empty

Σε αυτόν τον κώδικα συμβαίνουν πολλά ενδιαφέροντα πράγματα:

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

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

2. Δημιουργία περισσότερων από ένα sprite.

   Χρειάζονται δύο για ταγκό ή συγκρούονται. Σε αυτό το παράδειγμα, το κουτί θα παραμείνει ακίνητο και ένα critter που ακολουθεί το ποντίκι.

3. Δώστε στο critter μια μέθοδο followMouse ().

   Σε αυτό το παράδειγμα, έχετε το critter ακολουθήστε το ποντίκι. Ξεκινήστε δημιουργώντας μια μέθοδο followMouse ().

4. Καθορίστε τη θέση του ποντικιού.

   Η θέση του ποντικιού καθορίζεται (στο simpleGame. Js) με το έγγραφο. mouseX και έγγραφο. mouseY ιδιότητες.

5. Αντιγράψτε τη θέση του ποντικιού στη θέση του critter.

   Χρησιμοποιήστε τη θέση x του ποντικιού για να ρυθμίσετε τη θέση x του critter και επαναλάβετε με το y.

6. Καλέστε τη μέθοδο followMouse () κάθε κορνίζα.

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

Αν παίζετε με το colTest. html σελίδα, πιθανότατα θα παρατηρήσετε ότι οι συγκρούσεις δεν είναι ακριβείς. Είναι πιθανό να υπάρχει ένας καταχωρητής σύγκρουσης ακόμη και όταν το critter δεν αγγίζει πραγματικά το κουτί. Αυτό είναι σημαντικό επειδή το simpleGame χρησιμοποιεί ένα σχήμα που ονομάζεται συγκρούσεις κουτιού οριοθέτησης .

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

Συγκρούσεις που βασίζονται σε απόσταση για το παιχνίδι σας

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

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

• Το όριο σύγκρουσης μπορεί να ποικίλει. Μπορείτε να ορίσετε οποιαδήποτε ευαισθησία θέλετε. Ρυθμίστε μια μεγάλη ακτίνα σύγκρουσης για εύκολη σύγκρουση και μια μικρότερη όταν θέλετε οι συγκρούσεις να ενεργοποιούνται μόνο όταν οι σπρέι είναι πολύ κοντά ο ένας στον άλλο.

Το αντικείμενο Sprite της απλής ομάδας έχει μια μέθοδο distanceTo (), η οποία υπολογίζει την απόσταση από ένα sprite σε ένα άλλο. Μπορείτε να δείτε ένα παράδειγμα αυτού του κώδικα σε απόσταση. παράδειγμα html: απόσταση

. html var παιχνίδι? κουτί var? var critter; var output; λειτουργία init () {παιχνίδι = νέα σκηνή (); παιχνίδι. hideCursor (); κουτί = νέο Sprite (παιχνίδι, "simpleBox. png", 50, 50); critter = νέος Sprite (παιχνίδι, "critter. gif", 50, 50); output = document. getElementById ("έξοδος"); // δώστε σταθερό κουτί θέσης κουτιού. setPosition (200, 150). κουτί. setSpeed ​​(0); critter. setPosition (100, 100). critter. setSpeed ​​(0); // critter που ελέγχεται από το ποντίκι critter. followMouse = συνάρτηση () {this. setX (έγγραφο ποντικιούX). Αυτό. setY (έγγραφο ποντικιούY)}} // τέλος παιχνίδι followMouse. start ();} // end init λειτουργία ενημέρωσης () {παιχνίδι. Σαφή(); critter. followMouse (); checkDistance (); πλαίσιο. εκσυγχρονίζω(); critter. update ();} // end update; λειτουργία checkDistance () { dist = box. απόστασηTo (critter); αν (έξοδος <50) {). innerHTML = "Σύγκρουση:" + dist; } αλλού { έξοδος. innerHTML = "Δεν υπάρχει σύγκρουση:" + dist; } // τέλος εάν } // τέλος checkDistance κενό

Η μέθοδος σύγκρουσης που βασίζεται σε απόσταση είναι πολύ παρόμοια με την έκδοση bounding-rectangle. Δημιουργήστε μια λειτουργία checkDistance () που θα λειτουργεί ακριβώς όπως το παλιό checkCollisions (). Εδώ είναι τα βήματα για το τι συμβαίνει στο checkDistance:

1. Βρείτε την απόσταση μεταξύ των δύο sprites.

   Χρησιμοποιήστε τη μέθοδο distanceTo () του sprite για να καθορίσετε την απόσταση μεταξύ των δύο sprites.

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

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

3. Αναφέρετε την κατάσταση σύγκρουσης.

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