Αυξήστε τις δεξιότητές σας στο JavaScript με αυτά τα 9 εκπαιδευτικά βίντεο διασκεδαστικών παιχνιδιών

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

Εάν μαθαίνετε καλύτερα με οπτικές επιδείξεις, αυτά τα εκπαιδευτικά παιχνίδια που βασίζονται σε JavaScript στο YouTube αξίζουν τον χρόνο σας.

1. Παιχνίδι καρτών με JavaScript

Αυτό το παιχνίδι καρτών JavaScript με τον Γκάβιν Λον σας δείχνει τον τρόπο να γυρίζετε κάρτες με περισσότερες από 600 γραμμές κώδικα JavaScript. Ενώ η κύρια εστίαση είναι να διδάξετε JavaScript, θα μάθετε επίσης να συνδυάζετε τη σχεδιαστική δύναμη του CSS με τη δομή DOM του HTML για να επιτύχετε ανταπόκριση με JavaScript.

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

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

2. 2D Breakout Game με JavaScript

​​​

Εάν θέλετε να μάθετε να ελέγχετε τα διαστήματα ενεργειών και να μετακινείτε στοιχεία DOM δυναμικά χρησιμοποιώντας JavaScript, η Ania Kubów δείχνει πόσο διασκεδαστικό γίνεται με αυτό το σεμινάριο παιχνιδιού με χρήση JavaScript. Επιπλέον, το βίντεο δείχνει επίσης πώς να φιλοξενήσετε και να παρουσιάσετε το έργο σας σε πιθανούς εργοδότες.

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

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

3. Παιχνίδι JavaScript Snake

Ξετυλίξτε τη νοσταλγία του παιχνιδιού Snake II του Nokia 3310 δημιουργώντας αυτό το παιχνίδι φιδιού JavaScript με τον Kyle. Πιθανότατα το έχετε παίξει στο παρελθόν και πιθανότατα θα το παίξετε πολλές φορές στη ζωή σας, αφού θα κωδικοποιήσετε ένα χρησιμοποιώντας JavaScript βανίλια.

Ενώ σας μαθαίνει να συνδέσετε το DOM δυναμικά, αυτό το βίντεο δείχνει πώς μπορείτε να δημιουργήσετε και να χρησιμοποιήσετε προσαρμοσμένες μονάδες σε JavaScript. Έτσι, σας ανοίγει μια ευκαιρία να μάθετε σχετικά με τον διαχωρισμό των ανησυχιών χρησιμοποιώντας την αρχή μη επαναλαμβάνεστε (DRY).

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

4. Παιχνίδι Tic Tac Toe με JavaScript

​​​​​

Ίσως το παιχνίδι σας Tic Tac Toe οξύνεται καθώς δημιουργείτε ένα με JavaScript σε ένα άλλο βίντεο με τον Kyle. Αυτό είναι ένα απλό αλλά πολύτιμο έργο για αρχάριους JavaScript για να τσιμπήσετε καθώς θα λύσετε περίπλοκα προβλήματα.

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

Κατά τη χειραγώγηση του DOM με JavaScript, το βίντεο τυλίγει τη βαρύτητα γύρω από τις αποφάσεις κωδικοποίησης win and draw, αποφασίζοντας τις στροφές των παικτών και την ευθυγράμμιση αντικειμένων. Οι συναρτήσεις, οι βρόχοι και οι συνθήκες JavaScript είναι μερικές από τις προηγμένες έννοιες που θα μάθετε σε αυτό το εκπαιδευτικό βίντεο JavaScript Tic tac Toe.

5. Παιχνίδι παζλ διαφανειών με JavaScript

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

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

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

6. Παιχνίδι αγώνων αυτοκινήτου με JavaScript

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

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

Αν και αυτή είναι μια απλή περιγραφή του τι θα δημιουργήσετε σε αυτό, θα μάθετε κάποια προηγμένη λογική JavaScript για χειρισμό και στυλ DOM. Θα αποκτήσετε επίσης πληροφορίες για τους τελεστές JavaScript ενώ δημιουργείτε ανταμοιβές και ποινές παικτών.

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

7. Mario παιχνίδι με JavaScript

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

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

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

8. Κατασκευάστε ναρκαλιευτή με JavaScript

Θέλετε να εξερευνήσετε τη δύναμη των αναδρομικών συναρτήσεων και μεθόδους συστοιχίας στον πολλαπλασιασμό των στοιχείων DOM με JavaScript; Ίσως θελήσετε να ξεκινήσετε με αυτό το σεμινάριο JavaScript Minesweeper από την Ania Kubów στο Traversy Media.

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

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

9. Εκμάθηση παιχνιδιού Pokemon JavaScript με καμβά HTML

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

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

Εκτός από άλλες βασικές τεχνικές χειρισμού JavaScript, το σεμινάριο χρησιμοποιεί επίσης σε μεγάλο βαθμό τις έννοιες του OOP. Αυτό είναι πολύτιμο εάν σκοπεύετε να εμβαθύνετε αργότερα στο TypeScript. Ένας από τους απλοποιητικούς παράγοντες αυτού του σεμιναρίου είναι ο τρόπος με τον οποίο ο δάσκαλος περιγράφει τις εργασίες.

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

Μάθετε τις εφαρμογές επίλυσης προβλημάτων της JavaScript

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