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

Η αρχή της προσθήκης φορέων μπορεί να είναι χρήσιμη για το παιχνίδι σας HTML5 με πολλούς τρόπους. Για το ένα, μπορεί να προσθέσει φαινόμενο οπισθέλκουσας και, συνεπώς, να οδηγήσει σε πιο ακριβή συμπεριφορά του οχήματος. Φανταστείτε ότι το αυτοκίνητό σας έχει κολλήσει σε κακή γειτονιά στη μέση της νύχτας (και πάλι). Δεν μπορείτε απλά να αλλάξετε τη θέση του αυτοκινήτου απευθείας. Δεν μπορεί καν να αλλάξει την κίνηση του.

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

Κυνήγι αγώνων παιχνιδιών

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

Θα χρειαστεί πραγματικά να δείτε το πρόγραμμα σε δράση για να εκτιμήσει τη συμπεριφορά του.

Σύρετε το παιχνίδι var? σκάφος var? λειτουργία Car () {tCar = νέα Sprite (παιχνίδι, "car. ​​png", 100, 50); tCar. checkKeys = λειτουργία () {κονσόλα. log (αυτή την ταχύτητα). αν (κλειδιάΚατά [K_LEFT]) {αυτό. changeImgAngleBy (-5);} αν (keysDown [K_RIGHT]) {αυτό. changeImgAngleBy (5);} αν (keysDown [K_UP]) { αυτό. addVector (αυτό το imgAngle, 2); } // μετακινήστε στην τρέχουσα κατεύθυνση αυτό. addVector (αυτό το. imgAngle, 2); // // endKey tCar. checkDrag = λειτουργία () { ταχύτητα = αυτό. getSpeed ​​(); ταχύτητα * =. 95; αυτό. setSpeed ​​(ταχύτητα); } // τέλος checkDrag επιστροφή tCar;} // end function def init () {game = new Scene (); παιχνίδι. setBG ("# 666666"); αυτοκίνητο = νέο αυτοκίνητο (); παιχνίδι. start ();} // end init λειτουργία ενημέρωσης () {παιχνίδι. Σαφή(); αυτοκίνητο. checkKeys (); αυτοκίνητο. checkDrag (); αυτοκίνητο. update ();} // ενημέρωση τέλος

Τρόπος εφαρμογής drag στο παιχνίδι σας

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

Δείτε πώς λειτουργεί:

1. Κατασκευάστε ένα βασικό όχημα.

   Δημιουργήστε ένα custom sprite με μια μέθοδο checkKeys () και ελέγξτε για όλα τα κανονικά πλήκτρα βέλους. Ο κώδικας για τον έλεγχο των αριστερών και δεξιών βέλων είναι ακριβώς αυτό που περιμένετε.

2. Προχωρήστε με ένα διάνυσμα δύναμης.

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

3. Δημιουργήστε μια μέθοδο checkDrag ().

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

4. Πολλαπλασιάστε την ταχύτητα με συντελεστή οπισθέλκουσας.

   Για το παράδειγμα αυτό, οι διάφορες δυνάμεις οπισθέλκουσας θα αψηφήσουν το αυτοκίνητο με το 5% της ταχύτητάς του σε κάθε καρέ. Θυμηθείτε ότι το παιχνίδι λειτουργεί σε 20 καρέ ανά δευτερόλεπτο, έτσι η δύναμη οπισθέλκουσας είναι αρκετά σημαντική. Μπορείτε να επιτύχετε το εφέ σύμπτωσης με πολλούς τρόπους, αλλά ο ευκολότερος τρόπος είναι να πολλαπλασιάσετε την ταχύτητα του αυτοκινήτου σας με κάποια τιμή μικρότερη από 1.

5. Χωρίς φρένα!

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

6. Σε γεύση.

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

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