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

Συχνά το πέρασμα του χρόνου θα είναι ένα στοιχείο στα παιχνίδια σας HTML5. Τα αγωνιστικά παιχνίδια είναι όλα σχετικά με την ταχύτητα, ή μπορεί να έχετε κάποιο χρονικό όριο για την εκτέλεση κάποιας δραστηριότητας. Η βιβλιοθήκη simpleGame περιλαμβάνει ένα πολύ εύχρηστο χρονόμετρο που σας επιτρέπει να διαχειριστείτε εύκολα το χρόνο. Το αντικείμενο Χρονοδιακόπτης δημιουργείται όπως οποιοδήποτε άλλο αντικείμενο JavaScript. Έχει τρεις μεθόδους:

• επαναφορά (): Αυτή η λειτουργία προετοιμάζει το χρονοδιακόπτη και ξεκινά τον μετρητή χρόνου που έχει περάσει.

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

• getElapsedTime (): Επιστρέφει τον αριθμό δευτερολέπτων από τη δημιουργία του χρονομέτρου ή την τελευταία επαναφορά (όποια είναι πιο πρόσφατη).

Στο JavaScript και στις περισσότερες άλλες γλώσσες, οι πληροφορίες ημερομηνίας και ώρας αποθηκεύονται γενικά σε ειδική μορφή ακέραιου αριθμού. Ο χρόνος μετριέται στην πραγματικότητα ως ένας τεράστιος ακέραιος αριθμός που δείχνει τον αριθμό των χιλιοστών του δευτερολέπτου από τα μεσάνυχτα της 1ης Ιανουαρίου 1970.

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

Για παράδειγμα χρονισμού, κοιτάξτε το timerDemo. html:

χρονοδιακόπτης var timer; εξόδου var; παιχνίδι var? λειτουργία init () {παιχνίδι = νέα σκηνή (); output = document. getElementById ("έξοδος"); χρονοδιακόπτης = νέος χρονοδιακόπτης (); χρονόμετρο. επαναφορά(); παιχνίδι. start ();} // end game λειτουργία ενημέρωσης () { παιχνίδι. κρύβω(); currentTime = χρονοδιακόπτης. getElapsedTime ();. innerHTML = τρέχουσα τιμή; } // τερματισμός λειτουργίας λειτουργίας ανανέωσης () { χρονοδιακόπτη. επαναφορά(); } // τελική επαναφορά χρονοδιακόπτης κενής επαναφοράς

Αυτό το παράδειγμα δείχνει ένα απλό χρονόμετρο. Εμφανίζει τον αριθμό των δευτερολέπτων που εκτελεί η σελίδα. Ο χρονοδιακόπτης μπορεί να επαναρυθμιστεί με το κουμπί (επαναπροσδιορισμός) Reset Timer.

Αυτό το πρόγραμμα είναι σχετικά απλό, αλλά δείχνει μερικές πολύ ισχυρές ιδέες. Χρησιμοποιήστε αυτή τη διαδικασία για να δημιουργήσετε το δικό σας παιχνίδι αίσθησης χρόνου:

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

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

2. Επαναφέρετε το χρονοδιακόπτη.

   Βεβαιωθείτε ότι ο χρονοδιακόπτης ξεκινάει στο μηδέν.

3. Πάρτε το χρόνο που έχει περάσει σε κάθε πλαίσιο.

   Στη συνάρτηση update (), καλέστε τη μέθοδο getElapsedTime () του χρονόμετρου για να μάθετε πόσο χρόνο έχει περάσει και να αντιγράψετε αυτήν την τιμή στην περιοχή εξόδου.

4. Επαναφέρετε το χρονόμετρο όταν ο χρήστης πιέσει το κουμπί.

   Όταν ο χρήστης πιέσει το κουμπί επαναφοράς, καλέστε τη μέθοδο reset () του χρονοδιακόπτη για να επαναφέρετε το μηδέν το χρόνο που πέρασε.

5. Απόκρυψη της κύριας σκηνής.

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