Βίντεο: Inyeccion de Dependencias 01 - Introducción 2024
Θα υπάρχουν φορές που θα επαναχρησιμοποιήσετε αντικείμενα πολλές φορές στα παιχνίδια σας HTML5 και πρόκειται να παραμείνουν περίπου το ίδιο. Έτσι, είναι λογικό να τα τοποθετήσετε σε βιβλιοθήκη για εύκολη επαναχρησιμοποίηση. Αυτό ακριβώς πρόκειται να κάνετε. Ρίξτε μια ματιά στο frogLib. js:
// frogLib. js // Αντικείμενα για λειτουργία παιχνιδιού βατράχου Fly () {tFly = νέο Sprite (σκηνή, "fly. png", 20, 20); tFly. setSpeed (10); tFly. (=) {// αλλαγή κατεύθυνσης με κάποια τυχαία ποσότητα newDir = (Math. random () * 90) - 45; Αυτό. ()) // // επιστρέφει το τέλος της αποκοπής tFly;} // end Fly Frog () {tFrog = νέο Sprite (σκηνή, "frog. png", 50, 50); tFrog. maxSpeed = 10; tFrog. minSpeed = -3. tFrog. setSpeed (0); tFrog. setAngle (0); tFrog. checkKeys = συνάρτηση () {if (keysDown [K_LEFT]) {αυτό. changeAngleBy (-5);} // end if if (κλειδιάΚατά [K_RIGHT]) {this. changeAngleBy (5);} // end if if (keysDown [K_UP]) {αυτό. changeSpeedBy (1); αν (αυτή η ταχύτητα> αυτό το maxSpeed) {αυτό. setSpeed (αυτό το maxSpeed), // // end if} // if if (keysDown [K_DOWN]) {αυτό. changeSpeedBy (-1); αν (αυτή η ταχύτητα <αυτό., minSpeed) {αυτό. setSpeed (this.minSpeed), // // end if} // end if} // end checkKeys επιστροφή tFrog,} // end setupFrog
Αυτό είναι ένα ενδιαφέρον έγγραφο. Δεν περιέχει τίποτε άλλο παρά τους δύο ορισμούς κλάσης. Χρησιμοποιείται επειδή πολλά άλλα προγράμματα θα χρησιμοποιήσουν αυτές τις δύο κατηγορίες.
Η χρήση βιβλιοθήκης είναι η ίδια η απλότητα. Εδώ είναι το frogFly. html αρχείο που βάζει αυτά τα δύο στοιχεία μαζί σε ένα παιχνίδι:
frogFly. html src = "frogLib. js"> var σκηνή; var βατράχου; var fly; φύλλα var? λειτουργία init () {σκηνή = νέα σκηνή (); σκηνή. setBG ("πράσινο"); βάτραχος = νέος βάτραχος (); fly = νέα Fly (); φύλλα = νέο Sprite (σκηνή, "φύλλα. png", 640, 480); φύλλα. setSpeed (0); σκηνή. start ();} // end init λειτουργία ενημέρωσης () {σκηνή. Σαφή(); βάτραχος. checkKeys (); πετώ. στριφογυρίζω(); φύλλα. εκσυγχρονίζω(); βάτραχος. εκσυγχρονίζω(); πετώ. ενημέρωση ();} // end update ();
Αυτό το πρόγραμμα δεν εισάγει πολλά που είναι καινούργια. Απλά υλοποιεί τα στοιχεία που ορίζονται στη βιβλιοθήκη, σύμφωνα με τα εξής βήματα:
-
Εισάγετε το froglib. js βιβλιοθήκη.
Το αρχείο frogLib είναι απλά ένα αρχείο JavaScript. Εισαγάγετε τον με τον ίδιο τρόπο που εισάγετε το simpleGame. js, με ξεχωριστή ετικέτα.
-
Δημιουργήστε τα sprites.
Τα σπρίχη των φύλλων είναι απλά ένας συνηθισμένος σκωγράφος. Κατασκευάστε τον βάτραχο και πετάξτε όπως ακριβώς κάνατε πριν, ακόμα κι αν ορίζονται σε ένα άλλο αρχείο. (Εάν ο βάτραχος ή η μύγα δεν δημιουργηθεί, βεβαιωθείτε ότι έχετε εισαγάγει τη βιβλιοθήκη σωστά.)
-
Διαχείριση αλλαγής.
Η λειτουργία ενημέρωσης () αναλαμβάνει την ευθύνη για τον έλεγχο του παιχνιδιού. Αυτό είναι όπου μπορείτε να διαχειριστείτε όλες τις διάφορες συμπεριφορές sprite: Ενημερώστε τον βάτραχο να ψάξει για πληκτρολογήσεις (με τη μέθοδο βάτραχος checkKeys ()), και πείτε στο fly να συρρικνώσει (με τη μέθοδο.
-
Σχεδιάστε τα sprites.
Μόλις χειριστείτε όλα όσα προκάλεσαν την αλλαγή των sprites, σχεδιάστε τα sprites στην οθόνη. Σχεδιάστε κάθε sprite κάνοντας έκκληση στη μέθοδο ενημέρωσης (). Τα Sprites σχεδιάζονται με τη σειρά, οπότε οτιδήποτε θέλετε να έχετε στο παρασκήνιο πρέπει να σχεδιαστεί πριν τα στοιχεία που θα εμφανιστούν μπροστά. (Ο βάτραχος θα εμφανιστεί στην κορυφή του φόντου, οπότε ο βάτραχος πρέπει να σχεδιαστεί μετά το φόντο σε κάθε ενημέρωση οθόνης.)
