Πώς να δημιουργήσετε κινούμενα σχέδια με το SimpleGame. js Το παιχνίδι σας HTML5 - dummies

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

Η σκηνή: Αυτό το αντικείμενο αρχίζει με ένα αντικείμενο HTML canvas και προσθέτει τον κύριο βρόχο. Η σκηνή είναι το ενοποιημένο αντικείμενο που ελέγχει το παιχνίδι.
Sprites: Αυτά τα αντικείμενα είναι τα στοιχεία που μετακινούνται στην οθόνη. Τα περισσότερα από τα στοιχεία του παιχνιδιού είναι sprites. Κάθε sprite πρέπει να ανήκει σε μια ενιαία σκηνή, αλλά μπορείτε να έχετε τόσα sprites όπως θέλετε. Ένα sprite βασίζεται σε μια εικόνα.

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

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

Ακολουθεί ολόκληρη η λίστα κωδικών:

redBall. html // απλό παιχνίδι με μια ενιαία κινούμενη μπάλα var σκηνή? var μπάλα? λειτουργία init () {σκηνή = νέα σκηνή (); μπάλα = νέο Sprite (σκηνή, "redBall. png", 50, 50); μπάλα. setMoveAngle (180); μπάλα. setSpeed (3); σκηνή. start ();} // end init λειτουργία ενημέρωσης () {σκηνή. Σαφή(); μπάλα. update ();} // end update

Ξεκινάτε με μια βασική σελίδα HTML5 και προσθέστε μερικές δυνατότητες για να την μετατρέψετε σε περιβάλλον παιχνιδιών.

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

Ξεκινήστε δημιουργώντας την υποκείμενη σελίδα:

Ξεκινήστε με μια σελίδα HTML5.

Μπορείτε να χρησιμοποιήσετε τα ίδια εργαλεία που έχετε χρησιμοποιήσει για την ανάπτυξη του άλλου ιστού σας. Δημιουργήστε ένα βασικό πρότυπο HTML5 όπως κάνετε για οποιοδήποτε άλλο έγγραφο HTML5.
Εισάγετε το simpleGame. js βιβλιοθήκη.

Αυτή η βιβλιοθήκη είναι διαθέσιμη δωρεάν από την ιστοσελίδα. Χρησιμοποιήστε μια ετικέτα για να εισαγάγετε τη βιβλιοθήκη. Ορίστε την ιδιότητα src στο όνομα της βιβλιοθήκης (simpleGame. Js).
Κρατήστε το HTML απλό.

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

Είναι πολύ συνηθισμένο να έχουμε μια λειτουργία που ονομάζεται όταν φορτώνεται το σώμα. Προσθέστε onload = "init ()" στην ετικέτα σώματος για να καλέσετε τη μέθοδο init ().
Δημιουργήστε μια δεύτερη ετικέτα δέσμης ενεργειών για να περιέχει τον κωδικό σας.

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

Όλα τα προγράμματα simpleGame θα έχουν τουλάχιστον δύο λειτουργίες: init () συμβαίνει κατά την εκκίνηση και η ενημέρωση () θα συμβεί μία φορά ανά πλαίσιο.

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

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

var σκηνή? var μπάλα? λειτουργία init () {σκηνή = νέα σκηνή (); μπάλα = νέο Sprite (σκηνή, "redBall. png", 50, 50); μπάλα. setMoveAngle (180); μπάλα. setSpeed (3);} // end init

Τα περισσότερα παιχνίδια χρησιμοποιούν παρόμοιο στυλ αρχικοποίησης. Ακολουθεί ο τρόπος ρύθμισης του παιχνιδιού:

Ορίστε μια μεταβλητή που θα περιέχει τη σκηνή.

Κάθε παιχνίδι simpleGame θα έχει τουλάχιστον ένα αντικείμενο σκηνής. Καθορίστε τη σκηνή έξω από οποιαδήποτε λειτουργία, έτσι ώστε να είναι διαθέσιμη σε όλους τους. Θα δημιουργήσετε πραγματικά τη σκηνή μέσα στη λειτουργία init ().
Ορίστε μια μεταβλητή για κάθε sprite.

Κάθε sprite στο παιχνίδι σας θα πρέπει να ανήκει και σε μια παγκόσμια μεταβλητή. Θα δημιουργήσετε τα sprites στη λειτουργία init (), αλλά πρέπει να κάνετε τη μεταβλητή διαθέσιμη σε όλες τις λειτουργίες.
Δημιουργήστε τη λειτουργία init ().

Αυτή η λειτουργία ονομάζεται από το φορτίο του σώματος. Θα τρέξει μετά τη φόρτωση της σελίδας στη μνήμη.
Δημιουργήστε τη σκηνή.

Για να δημιουργήσετε τη σκηνή, δημιουργήστε μια εμφάνιση της κλάσης σκηνής. Αυτό που λέτε πραγματικά είναι το "Κάνε μου μια σκηνή Scene και καλέστε αυτή τη συγκεκριμένη περίπτωση" σκηνή. '' Η σκηνή δεν απαιτεί παραμέτρους.
Δημιουργήστε το sprite μπάλα.

Η μπάλα είναι μια περίπτωση Sprite. Για να δημιουργήσετε ένα σπρίτ, χρειάζεστε λίγα περισσότερα κομμάτια πληροφοριών. Χρειάζεστε μια σκηνή, ένα όνομα αρχείου εικόνας, πλάτος και ύψος.
Ρυθμίστε τη γωνία κίνησης της μπάλας.

Μπορείτε να αλλάξετε τη γωνία που κινείται η μπάλα. Οι γωνίες μετρώνται σε μοίρες όπως σε χάρτη.
Ρυθμίστε την ταχύτητα κίνησης της μπάλας.

Μπορείτε επίσης να καθορίσετε την ταχύτητα της μπάλας.
Ξεκινήστε τη σκηνή.

Όταν τελειώσετε τη ρύθμιση όλων, πείτε τη σκηνή για να ξεκινήσει.

Ενημερώστε την κίνηση του παιχνιδιού

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

Η λειτουργία ενημέρωσης () δεν είναι εξαιρετικά δύσκολη.

ενημέρωση λειτουργίας () {σκηνή. Σαφή(); μπάλα. update () · // end update

Η λειτουργία ενημέρωσης () συνήθως κάνει τρία πράγματα:

Καθαρίζει την προηγούμενη οθόνη: Η πρώτη σειρά εργασιών είναι να καθαρίσετε κάθε αναστάτωση που προκαλείται από την τελευταία οθόνη. Το αντικείμενο Σκηνή έχει μια σαφή λειτουργία () για ακριβώς αυτόν τον σκοπό.
Έλεγχοι για συμβάντα: Συνήθως, ελέγχετε τα συμβάντα, όπως η είσοδος χρηστών, οι sprites που συντρίβονται ο ένας στον άλλο, τα sprites αφήνοντας την οθόνη ή οτιδήποτε άλλο.Για αυτό το απλό κινούμενο σχέδιο, το μόνο συμβάν είναι ένα sprite που εξέρχεται από την οθόνη και η συμπεριφορά που σχετίζεται με αυτήν την ενέργεια έχει αυτοματοποιηθεί.
Ενημερώνει κάθε sprite: Το τελευταίο μέρος της ενημέρωσης οθόνης ενημερώνει τα sprites. Όταν ενημερώνετε ένα sprite, θα αντλήσει τη νέα του θέση.

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