Πώς να Κατασκευάσετε το Guesser Αριθμών στο Παιχνίδι HTML5 - dummies

Με τυχαίους αριθμούς, μπορείτε να κάνετε ενδιαφέροντα παιχνίδια HTML5. Ρίξτε μια ματιά σε ένα απλό παιχνίδι που χρησιμοποιεί HTML, CSS και JavaScript μαζί. Αυτό το παιχνίδι έχει μια σειρά από ενδιαφέροντα χαρακτηριστικά:

• Χρησιμοποιεί την ιστοσελίδα ως διεπαφή. Όπως πολλά προγράμματα JavaScript, χρησιμοποιεί μια ιστοσελίδα ως διεπαφή χρήστη. Ένα στοιχείο εισόδου χρησιμοποιείται για είσοδο, ένα div είναι το κύριο στοιχείο εξόδου και ένα κουμπί ενεργοποιεί όλες τις ενέργειες.

• Χρησιμοποιεί το CSS για στυλ. Τα διάφορα μέρη της σελίδας έχουν μορφοποιηθεί με CSS. Το CSS αποθηκεύεται σε ένα εξωτερικό φύλλο στυλ για ευκολία και επαναχρησιμοποίηση.

• Λέει στον χρήστη πόσες στροφές έχει πάρει. Σε κάθε πέρασμα, ο υπολογιστής υπενθυμίζει στον χρήστη πόσες στροφές έχουν συμβεί.

• Όταν ο χρήστης έχει μαντέψει σωστά, εμφανίζεται ένα κουμπί επανεκκίνησης. Αυτό το κουμπί είναι κρυμμένο στην αρχή και εμφανίζεται μόνο όταν είναι απαραίτητο.

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

• Μια λειτουργία init () ξεκινάει το παιχνίδι. Η λειτουργία init () αρχικοποιεί το παιχνίδι. Ονομάζεται όταν αρχίζει το πρόγραμμα και πάλι όταν ο χρήστης θέλει να ξεκινήσει.

• Μια άλλη λειτουργία είναι συνδεδεμένη στο κουμπί. Όταν ο χρήστης κάνει κλικ στο κουμπί Ελέγξτε την εικασία σας, η εικασία του τρέχοντος χρήστη συγκρίνεται με τη σωστή απάντηση και επιστρέφεται μια υπαινιγμός στο χρήστη.

  

Πώς να σχεδιάσετε το πρόγραμμα παιχνιδιών

Όταν δημιουργείτε ένα σύνθετο πρόγραμμα, πρέπει να ξεκινήσετε με ένα σχέδιο σχεδιασμού.

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

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

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

• Λειτουργίες κουμπιών: Κάθε πλήκτρο θα καλέσει μια λειτουργία. Το διάγραμμα υποδεικνύει ποια λειτουργία θα καλέσει κάθε κουμπί.

• Σχέδια λειτουργιών: Κάθε λειτουργία προγραμματίζεται με μια περιγραφή αγγλικής γλώσσας για το τι θα κάνει η λειτουργία.

• Παγκόσμιες μεταβλητές: Περιγράφονται οι μεταβλητές που θα πρέπει να μοιραστούν μεταξύ λειτουργιών.

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

Πώς να δημιουργήσετε το HTML για το παιχνίδι

Ο κώδικας HTML για το παιχνίδι που μαντεύει τους αριθμούς είναι αρκετά εύκολο να γραφτεί αν έχετε σχεδιάσει πρώτα το παιχνίδι σε χαρτί. Εδώ είναι ο κωδικός:

Number Guesser

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

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

1. Σύνδεση με το CSS σε ένα εξωτερικό αρχείο.

   Προς το παρόν, το CSS δεν είναι κρίσιμο, ώστε να το μετακινήσετε σε ξεχωριστό αρχείο, ώστε να μπορείτε να το χρησιμοποιήσετε αργότερα.

2. Αναθέστε τον κώδικα JavaScript.

   Μπορείτε επίσης να μετακινήσετε τον κώδικα JavaScript σε ένα εξωτερικό αρχείο, ώστε να μην χρειάζεται να ανησυχείτε για αυτό ακόμα. Στον κώδικα HTML, απλά κάντε τις συνδέσεις με τα εξωτερικά αρχεία.

3. Δημιουργήστε μια φόρμα ως το κύριο συστατικό της σελίδας.

   Η πιο σημαντική πτυχή αυτής της σελίδας είναι η φόρμα. Όπως και οι περισσότερες μορφές, θα έχει ένα fieldset, ετικέτες, στοιχεία εισόδου και κουμπιά.

4. Δημιουργήστε div για έξοδο.

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

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

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

6. Δημιουργήστε ένα κουμπί για τον έλεγχο της εικασίας.

   Ο χρήστης δεν κάνει εικασίες μέχρι να κάνει κλικ στο κουμπί Έλεγχος της εικασίας. Έτσι, πρέπει πραγματικά να έχετε ένα τέτοιο κουμπί. Αυτό το κουμπί δεν χρειάζεται ένα όνομα, αλλά θα καλέσει τη λειτουργία checkGuess ().

7. Δημιουργήστε ένα δεύτερο κουμπί για να ξεκινήσετε ξανά.

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