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

Ρίξτε μια ματιά στο διάστημα. html. Αυτό το απλό παιχνίδι παρέχει ένα καλό παράδειγμα για την εφαρμογή ρεαλιστικής κίνησης στο παιχνίδι σας HTML5. Χρησιμοποιεί το σχέδιο ελέγχου που έγινε γνωστό στα κλασικά παιχνίδια Αστεροειδείς και Spacewar! (Αν και οι αστεροειδείς είναι πιο γνωστοί, Spacewar! είναι μακράν το παλαιότερο παιχνίδι με μεγαλύτερη επιρροή.)

Κάντε κλικ εδώ για να έχετε την πλήρη εμπειρία.

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

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

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

space var ship; παιχνίδι var? λειτουργία πλοίου () {tShip = νέο Sprite (παιχνίδι, "πλοίο. png", 25, 25); tShip. setSpeed ​​(3); tShip. checkKeys = λειτουργία () {if (keysDown [K_LEFT]) { αυτό. changeImgAngleBy (-5); } αν (κλειδιάΚατά την [K_RIGHT]) { αυτό. changeImgAngleBy (5); } αν (keysDown [K_UP]) { αυτό. addVector (αυτό το getImgAngle (), 1); }} // επιστρέφει η συνάρτηση tShip;} // η εντολή ορισμού αντικειμένου init () {game = new Scene (); πλοίο = νέο πλοίο (); παιχνίδι. setBG ("μαύρο"); παιχνίδι. start ();} // end init λειτουργία ενημέρωσης () {παιχνίδι. Σαφή(); πλοίο. checkKeys (); πλοίο. update ();} // end update

Πώς να προσομοιώσετε χώρο στο παιχνίδι σας

Ακολουθεί η παύλα:

1. Ξεκινήστε το παράδειγμα με τον κανονικό τρόπο.

   Όπως και τα περισσότερα demo απλών παιχνιδιών, ξεκινήστε με ένα sprite και μια σκηνή. Επειδή το σκάφος θα έχει μια προσαρμοσμένη μέθοδο, το κάνετε ένα μοναδικό αντικείμενο.

2. Δώστε στο πλοίο μια μέθοδο checkKeys ().

   Η μέθοδος checkKeys () αναζητά τα πλήκτρα και αλλάζει ανάλογα τη συμπεριφορά του πλοίου.

3. Αλλάξτε τη γωνία της εικόνας.

   Ένας sprite έχει δύο διαφορετικές γωνίες. Μπορεί να έχει μια γωνία που δείχνει (ονομάζεται imgAngle στο simpleGame) και τη γωνία που κινείται (ονομάζεται moveAngle). Όταν αλλάζετε τη γωνία, αλλάζετε τόσο την κίνηση όσο και τις γωνίες της εικόνας, υποθέτοντας ότι το αντικείμενο απλά θα ταξιδέψει προς την κατεύθυνση που αντιμετωπίζει.

   Για απλά παραδείγματα αυτό είναι καλό, αλλά πολλά είδη κίνησης απαιτούν αποσύνδεση της γωνίας εικόνας και κίνησης. Η μέθοδος changeImgAngleBy () σάς επιτρέπει να αλλάξετε την κατεύθυνση που δείχνει η εικόνα χωρίς να αλλάξετε τη γωνία κίνησης. (Υπάρχει επίσης μια μέθοδος changeMotionAngle (), αλλά δεν χρησιμοποιείται πολύ συχνά.)

4. Προσθέστε ένα διάνυσμα δύναμης για να προσομοιώσετε ώθηση.

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

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