Πώς να δημιουργήσετε τυχαίους αριθμούς στο παιχνίδι HTML5 - οι τυχαίοι αριθμοί τυχαίων αριθμών

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

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

Η JavaScript παράγει έναν τυχαίο αριθμό.

Διαφορετικές γλώσσες το κάνουν με διαφορετικούς τρόπους, αλλά η JavaScript έχει μια συνάρτηση που δημιουργεί μια τυχαία τιμή κυμαινόμενου σημείου μεταξύ 0 και 1. Αυτή η τιμή εμφανίζεται στο ωμό πλαίσιο.
Πολλαπλασιάστε την ακατέργαστη τιμή κατά 100.
Μετατρέψτε τον μεγάλο αριθμό σε ακέραιο αριθμό.
Ο χρήστης δεν πρόκειται ποτέ να μαντέψει έναν αριθμό με 17 θέσεις μετά το δεκαδικό, οπότε χρειάζεστε έναν ακέραιο αριθμό. Το JavaScript έχει πολλούς τρόπους για να μετατρέψει ένα float σε έναν ακέραιο αριθμό. Για να πάρετε τη συμπεριφορά 1 έως 100 που ψάχνετε, χρησιμοποιείτε μια μέθοδο που ονομάζεται Μαθηματικά. ceil. Το τελικό αποτέλεσμα εμφανίζεται στο τελικό πλαίσιο.

Εδώ είναι ο κωδικός στο σύνολό του:

rand100. html fieldset {πλάτος: 600px; margin-right: auto; margin-left: auto;} ετικέτα {float: left? πλάτος: 250px; κείμενο-ευθυγράμμιση: δεξιά? περιθώριο-δεξιά: 1em; σαφής: αριστερά ·} διαστήματος {float: αριστερά ·} κουμπί {εμφάνιση: μπλοκ? σαφής: και οι δύο? περιθώριο: αυτόματη;} ρολό λειτουργίας () {// δημιουργία μεταβλητών για τα στοιχεία φόρμας var spnRaw = έγγραφο. getElementById ("spnRaw"); var spn100 = έγγραφο. getElementById ("spn100"); var spnFinal = έγγραφο. getElementById ("spnFinal"); // πάρτε τυχαίους αριθμούς var raw = Μαθηματικά. τυχαίος(); spnRaw. innerHTML = ακατέργαστο; // πολλαπλασιάστε κατά 100 φορές φορές100 = ακατέργαστο * 100; spn100. innerHTML = times100; // πάρτε το ανώτατο όριο var = Math. οροφή (φορές100). spnFinal. innerHTML = final}} // end roll

Κάντε τυχαίους αριθμούς 1 - 100

ωμά 0 φορές 100 0 τελικό 0 κυλήστε τα ζάρια
Χρησιμοποιήστε τα μαθηματικά για τον κωδικό παιχνιδιού

πρέπει να καλέσετε στο απόλυτο όπλο του geekiness: Μαθηματικά.

Η JavaScript έχει μια υπέροχη βιβλιοθήκη που ονομάζεται

Math . Η βιβλιοθήκη μαθηματικών έχει κάποια πραγματικά γελοία καλοτυχία που έχει ταφεί μέσα σε αυτήν, όπως μια σειρά κοινώς χρησιμοποιούμενων μαθηματικών λειτουργιών καθώς και σταθερές (όπως το pi) και μερικές άλλες λειτουργίες χρησιμότητας για την εργασία με αριθμούς. Πρώτον, φυσικά, είναι η λειτουργία που παράγει τυχαίους αριθμούς. Ονομάζεται Math. τυχαίος().

Πραγματικά πρέπει να πείτε το Math. τυχαίος(). Αν καλέσετε τυχαία () όλα από μόνη της, το JavaScript δεν θα ξέρει τι μιλάτε.

Το Μαθηματικό. η λειτουργία random () παράγει έναν ημι-τυχαίο αριθμό. (Δεν είναι πραγματικά τυχαίο αλλά παράγεται μέσω σύνθετου τύπου από άλλο αριθμό.) Ο τυχαίος αριθμός θα είναι μια τιμή κυμαινόμενου σημείου μεταξύ 0 και 1. Αυτό δεν φαίνεται χρήσιμο, αλλά με λίγα μαθηματικά, μπορείτε να μετατρέψετε η τιμή 0 έως 1 σε οποιοδήποτε άλλο εύρος επιθυμείτε.

Εκτός από τη συνάρτηση τυχαίων (), το αντικείμενο Math έχει πολλές λειτουργίες που σας επιτρέπουν να μετατρέψετε μια τιμή κυμαινόμενου σημείου (δηλαδή έναν αριθμό με δεκαδική τιμή) σε έναν ακέραιο αριθμό (το πήρατε - έναν αριθμό

χωρίς ένα δεκαδικό σημείο). Η συνήθης μέθοδος parseInt () είναι ενσωματωμένη στο JavaScript, αλλά μερικές φορές θέλετε να κάνετε μια πιο έξυπνη μετατροπή. Η βιβλιοθήκη μαθηματικών έχει ένα αριθμό από αυτά τα εργαλεία: Μαθηματικά. round (): Μετατρέπει έναν αριθμό χρησιμοποιώντας τον τυπικό αλγόριθμο στρογγυλοποίησης. Εάν το δεκαδικό τμήμα είναι. 5 ή λιγότερο, επιλέγεται ο μικρότερος ακέραιος αριθμός. εάν το δεκαδικό τμήμα είναι μεγαλύτερο από. 5, επιλέγεται ο μεγαλύτερος ακέραιος αριθμός. Αυτό σημαίνει ότι 3. 1 γύρους σε 3 και 3. 8 γύρους σε 4.

Μαθηματικά. floor (): Η συνάρτηση αυτή πάντα στρογγυλοποιείται προς τα κάτω, έτσι ώστε οι 3. 1 και 3. 8 να γίνουν και οι 3. Η συνάρτηση parseInt () είναι ίδια με τη Math. πάτωμα().
Μαθηματικά. ceil (): Αυτή η συνάρτηση (παίρνει - η λειτουργία οροφής) πάντα στρογγυλοποιεί προς τα πάνω, έτσι 3. 1 και 3. 8 και οι δύο καταλήγουν ως 4.
Η λειτουργία που χρειάζεστε εξαρτάται από τις συγκεκριμένες περιστάσεις.

Πώς να κάνετε τη φόρμα παιχνιδιών HTML

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

Ένα άνοιγμα για τη διατήρηση των ανεπεξέργαστων δεδομένων:

Δεν υπάρχει τίποτα για τον χρήστη να πληκτρολογήσει, οπότε χρησιμοποιήστε ένα άνοιγμα για τα διάφορα στοιχεία εξόδου. Τα περιγράμματα είναι μια γενική ετικέτα inline. Είναι σούπερ για καταστάσεις όπως αυτό όπου χρειάζεστε κάποιο απλό στοιχείο εξόδου το οποίο μπορεί να ευθυγραμμιστεί με την κύρια ροή της σελίδας. Το εύρος των πρώτων δεδομένων καλείται (εδώ πηγαίνετε …) spnRaw. Ένα άλλο άνοιγμα για τα δεδομένα
φορές100 : Καθώς το πρόγραμμα κάνει τους υπολογισμούς, θα εμφανίσει την έξοδο. Ένα τρίτο άνοιγμα για την τελική έξοδο:
Αφού ολοκληρωθούν όλοι οι υπολογισμοί, χρειάζεστε κάποιο τρόπο για να εμφανίσετε το λαμπρό έργο σας. spnFinal θα εξυπηρετήσει αυτό το σκοπό. Ετικέτες για να κάνετε τα πάντα καθαρά:
Χωρίς ετικέτες που εξηγούν τι συμβαίνει, θα υπάρχουν μόνο μια δέσμη αριθμών στην οθόνη. Μην ξεχάσετε να προσθέσετε ετικέτες ακόμα και σε απλά παραδείγματα, ώστε ο χρήστης να καταλάβει τι συμβαίνει.

Ένα κουμπί για να ξεκινήσει όλη η ενέργεια:
Τίποτα δεν θα συμβεί μέχρι να το ζητήσει ο χρήστης, οπότε προσθέστε ένα κουμπί στη φόρμα. Όταν πατηθεί το κουμπί, πρέπει να καλέσει τη λειτουργία roll () για να κυλήσει έναν αριθμό. CSS για να φανεί καλό:
Το HTML χωρίς CSS είναι άσχημο, οπότε προσθέστε αρκετό CSS για να κάνετε τη φόρμα HTML αξιοπρεπή.