Στο παιχνίδι «MoleMash» ένας τυφλοπόντικας εμφανίζεται σε τυχαίες θέσεις σε έναν αγωνιστικό χώρο και ο παίκτης κερδίζει πόντους χτυπώντας τον τυφλοπόντικα πριν αυτός πηδήξει μακριά. Αυτό το σεμινάριο δείχνει πώς να κατασκευάσετε το «MoleMash» ως παράδειγμα ενός απλού παιχνιδιού που χρησιμοποιεί κινούμενα σχέδια. Δείτε το κεφάλαιο του βιβλίου από το App Inventor Book των Wolber, et al. (Περιλαμβάνει VIDEO tutorial)
| Δημιουργός | Mikko Muilu |
| Γνωστικό Αντικείμενο | Μαθηματικά, Πληροφορική |
| Διάρκεια | 90 λεπτά |
| Παιδαγωγική προσέγγιση | Μάθηση με βάση το “project” |
| Δεξιότητες | Οι μαθητές μαθαίνουν : ● πώς λειτουργούν τα ηλεκτρονικά παιχνίδια και τι είδους μαθηματικά κρύβονται πίσω από αυτά. |
| Ηλικιακή Ομάδα | Μαθητές ηλικίας 10-16 ετών. Μαθητές εξοικειωμένοι με τη γλώσσα “Blockly”, για παράδειγμα το “Scratch”. |
| Τεχνολογία | Υπολογιστές και συσκευές «Android» |
Περιγραφή:
Συνδεθείτε στον ιστότοπο «App Inventor» και ξεκινήστε ένα νέο έργο. Ονομάστε το “MoleMash” και ορίστε επίσης τον τίτλο της οθόνης σε “MoleMash”. Ανοίξτε το «Blocks Editor» και συνδεθείτε με το τηλέφωνο.
Επίσης, κατεβάστε αυτή την εικόνα ενός τυφλοπόντικα και αποθηκεύστε την στον υπολογιστή σας.
Εισαγωγή:
Θα σχεδιάσετε το παιχνίδι έτσι, ώστε ο τυφλοπόντικας να κινείται μία φορά κάθε μισό δευτερόλεπτο. Αν τον αγγίξετε, το σκορ αυξάνεται κατά ένα και το τηλέφωνο δονείται. Πατώντας επανεκκίνηση, το σκορ μηδενίζεται.
Πώς φαίνεται το παιχνίδι μετά την ολοκλήρωση
Αυτό το σεμινάριο εισάγει:
- αντικείμενα: εικόνα
- χρονοδιακόπτες και το στοιχείο “Clock”
- διαδικασίες
- επιλογή τυχαίων αριθμών μεταξύ 0 και 1
- μπλοκ κειμένου
- «typeblocking»
Τα πρώτα στοιχεία
Αρκετά εξαρτήματα θα πρέπει να είναι γνωστά από προηγούμενα σεμινάρια:
- Ένας καμβάς με όνομα “MyCanvas”. Αυτή είναι η περιοχή όπου κινείται ο τυφλοπόντικας.
- Μια Ετικέτα με όνομα “ScoreLabel” που δείχνει το σκορ, δηλαδή τον αριθμό των φορών που ο παίκτης έχει χτυπήσει τον τυφλοπόντικα.
- Ένα κουμπί με όνομα “ResetButton”.
Σύρετε αυτά τα στοιχεία από την παλέτα στην Προβολή και δώστε τα ονόματά τους. Τοποθετήστε το MyCanvas στην κορυφή και ορίστε τις διαστάσεις του σε 300 pixels πλάτος και 300 pixels ύψος. Ορίστε το κείμενο του ScoreLabel σε “Score: -“. Ορίστε το κείμενο του κουμπιού ResetButton σε “Reset”. Προσθέστε επίσης ένα στοιχείο Sound και ονομάστε το “Noise”. Θα χρησιμοποιήσετε το Noise για να κάνετε το τηλέφωνο να δονείται όταν χτυπηθεί η ελιά, παρόμοια με τον τρόπο που κάνατε τη γατούλα να γουργουρίζει στο HelloPurr.
Χρονοδιακόπτες και το στοιχείο ρολόι
Πρέπει να κανονίσετε να πηδάει ο τυφλοπόντικας περιοδικά, και αυτό θα το κάνετε με τη βοήθεια ενός στοιχείου Ρολόι. Το συστατικό “Clock” παρέχει διάφορες λειτουργίες που έχουν να κάνουν με τον χρόνο, όπως το να σας λέει ποια είναι η ημερομηνία. Εδώ, θα χρησιμοποιήσετε το συστατικό ως ένα χρονόμετρο που πυροδοτείται σε τακτά χρονικά διαστήματα. Το διάστημα πυροδότησης καθορίζεται από την ιδιότητα “TimerInterval του Clock ‘s”. Σύρετε ένα συστατικό “Clock” θα πάει στην περιοχή μη ορατών συστατικών. Ονομάστε το “MoleTimer”. Ορίστε το “TimeInterval” του σε 500 χιλιοστά του δευτερολέπτου, για να κάνετε τον τυφλοπόντικα να κινείται κάθε μισό δευτερόλεπτο. Βεβαιωθείτε ότι το “TimerEnabled” είναι επιλεγμένο.
Προσθήκη ενός αντικειμένου εικόνας
Για να προσθέσουμε τον κινούμενο τυφλοπόντικα θα χρησιμοποιήσουμε ένα «sprite».
Τα «Sprites» είναι εικόνες που μπορούν να κινούνται στην οθόνη μέσα σε έναν καμβά. Κάθε sprite έχει μια Ταχύτητα και μια Κεφαλή, καθώς και ένα Διάστημα που καθορίζει πόσο συχνά το “sprite” κινείται με την καθορισμένη ταχύτητα. Τα «sprites» μπορούν επίσης να ανιχνεύουν πότε αγγίζονται. Στο «MoleMash», ο τυφλοπόντικας έχει ταχύτητα μηδέν, οπότε δεν κινείται μόνος του. Αντ’ αυτού, θα ορίζετε τη θέση του τυφλοπόντικα κάθε φορά που ενεργοποιείται το χρονόμετρο. Σύρετε ένα στοιχείο «ImageSprite» στο «Viewer». Θα βρείτε αυτό το στοιχείο στην κατηγορία «Drawing and Animation» της παλέτας. Τοποθετήστε το μέσα στην περιοχή «MyCanvas». Ορίστε αυτές τις ιδιότητες για το sprite Mole:
- Εικόνα: png, την οποία θα κατεβάσατε στον υπολογιστή σας στην αρχή αυτού του σεμιναρίου.
- Ενεργοποιημένο: τσεκαρισμένο
- Διάστημα: (Το διάστημα δεν έχει σημασία εδώ, επειδή η ταχύτητα του μορίου είναι μηδέν: δεν κινείται μόνο του.)
- Επικεφαλής: 0 Η κατεύθυνση δεν έχει σημασία ούτε εδώ, επειδή η ταχύτητα είναι 0.
- Ταχύτητα: 0.0
- Ορατό: επιλεγμένο
- Πλάτος: Αυτόματο
- Ύψος: Αυτόματο
Θα πρέπει να δείτε τις ιδιότητες x και y ήδη συμπληρωμένες. Καθορίστηκαν από το σημείο στο οποίο τοποθετήσατε τον τυφλοπόντικα, όταν τον σύρατε στον καμβά «MyCanvas». Προχωρήστε και σύρετε τον τυφλοπόντικα λίγο ακόμα. Θα πρέπει να δείτε τα x και y να αλλάζουν. Θα πρέπει επίσης να δείτε τον τυφλοπόντικα στο συνδεδεμένο τηλέφωνό σας και τον τυφλοπόντικα να μετακινείται στο τηλέφωνο, καθώς τον σέρνετε στον Σχεδιαστή. Έχετε πλέον καθορίσει όλα τα στοιχεία. Ο σχεδιαστής θα πρέπει να μοιάζει με αυτό. Παρατηρήστε πώς το Mole βρίσκεται σε εσοχή κάτω από το «MyCanva» στη λίστα δομής συστατικών, υποδεικνύοντας ότι το sprite είναι υπο-συστατικό του καμβά.
- Εικόνα: png, την οποία κατεβάσατε στον υπολογιστή σας στην αρχή αυτού του σεμιναρίου.
- Ενεργοποιημένο: τσεκαρισμένο
- Διάστημα: (Το διάστημα δεν έχει σημασία εδώ, επειδή η ταχύτητα του μορίου είναι μηδέν: δεν κινείται μόνο του.)
- Επικεφαλής: 0 Η κατεύθυνση δεν έχει σημασία ούτε εδώ, επειδή η ταχύτητα είναι 0.
- Ταχύτητα: 0.0
- Ορατό: επιλεγμένο
- Πλάτος: Αυτόματο
- Ύψος: Αυτόματο
Θα πρέπει να δείτε τις ιδιότητες x και y ήδη συμπληρωμένες. Καθορίστηκαν από το σημείο στο οποίο τοποθετήσατε τον τυφλοπόντικα, όταν τον σύρατε στον καμβά «MyCanvas». Προχωρήστε και σύρετε τον τυφλοπόντικα λίγο ακόμα. Θα πρέπει να δείτε τις τιμές x και y να αλλάζουν. Θα πρέπει επίσης να δείτε τον τυφλοπόντικα στο συνδεδεμένο τηλέφωνό σας και τον τυφλοπόντικα να μετακινείται στο τηλέφωνο, καθώς τον σέρνετε στον Σχεδιαστή. Έχετε πλέον καθορίσει όλα τα στοιχεία. Ο σχεδιαστής θα πρέπει να μοιάζει με αυτό. Παρατηρήστε πώς το «Mole» βρίσκεται σε εσοχή κάτω από το «MyCanvas» στη λίστα δομής συστατικών, υποδεικνύοντας ότι το sprite είναι υπο-συστατικό του καμβά.
Συμπεριφορά συστατικού και χειριστές συμβάντων
Τώρα θα καθορίσετε τη συμπεριφορά του στοιχείου. Αυτό εισάγει ορισμένες νέες ιδέες της εφαρμογής «App Inventor». Η πρώτη είναι η ιδέα της διαδικασίας. Για μια επισκόπηση και επεξήγηση των διαδικασιών, ανατρέξτε στη σελίδα Διαδικασίες.
Μια διαδικασία είναι μια ακολουθία εντολών στις οποίες μπορείτε να αναφέρεστε ταυτόχρονα ως ενιαία εντολή. Αν έχετε μια ακολουθία που πρέπει να χρησιμοποιήσετε περισσότερες από μία φορές σε ένα πρόγραμμα, μπορείτε να την ορίσετε ως διαδικασία και τότε δεν χρειάζεται να επαναλαμβάνετε την ακολουθία κάθε φορά που τη χρησιμοποιείτε. Οι διαδικασίες στο “App Inventor” μπορούν να λαμβάνουν ορίσματα και να επιστρέφουν τιμές. Αυτό το σεμινάριο καλύπτει μόνο την απλούστερη περίπτωση: διαδικασίες που δεν λαμβάνουν επιχειρήματα και δεν επιστρέφουν τιμές.
Ορισμός διαδικασιών
Ορίστε δύο διαδικασίες:
Το «MoveMole» μετακινεί το sprite Mole σε μια νέα τυχαία θέση στον καμβά.
Η “UpdateScore” δείχνει το σκορ, αλλάζοντας το κείμενο της “ScoreLabel”
Ξεκινήστε με το “MoveMole”:
- Στο Blocks Editor, στην περιοχή Built-In, ανοίξτε το συρτάρι Procedures. Σύρετε ένα μπλοκ to procedure και αλλάξτε την ετικέτα “procedure” σε “MoveMole”.Σημείωση: Υπάρχουν δύο παρόμοια μπλοκ: to procedure do και to procedure result. Εδώ θα πρέπει να χρησιμοποιήσετε το μπλοκ to procedure do.Το μπλοκ to MoveMole έχει μια υποδοχή με την ετικέτα “do”. Εκεί τοποθετείτε τις εντολές για τη διαδικασία. Σε αυτή την περίπτωση θα υπάρχουν δύο δηλώσεις: μία για να ορίσετε τη θέση x του τυφλοπόντικα και μία για να ορίσετε τη θέση y του. Σε κάθε περίπτωση, θα ορίσετε τη θέση να είναι ένα τυχαίο κλάσμα, μεταξύ 0 και 1, της διαφοράς μεταξύ του μεγέθους του καμβά και του μεγέθους του τυφλοπόντικα. Δημιουργείτε αυτή την τιμή χρησιμοποιώντας μπλοκ για τυχαίο κλάσμα και πολλαπλασιασμό και αφαίρεση. Μπορείτε να τα βρείτε στο συρτάρι Μαθηματικά.
- Κατασκευάστε τη διαδικασία MoveMole. Ο ολοκληρωμένος ορισμός θα πρέπει να μοιάζει ως εξής:
Η «MoveMole» δεν δέχεται ορίσματα, οπότε δεν χρειάζεται να χρησιμοποιήσετε τη συνάρτηση mutator του μπλοκ διαδικασιών. Παρατηρήστε πώς συνδέονται μεταξύ τους τα μπλοκ: η πρώτη εντολή χρησιμοποιεί το μπλοκ Mole.X set για να ορίσει την οριζόντια θέση του mole. Η τιμή που συνδέεται στην υποδοχή του μπλοκ είναι το αποτέλεσμα του πολλαπλασιασμού:
- Το αποτέλεσμα του μπλοκ κλήσης τυχαίου κλάσματος, το οποίο είναι μια τιμή μεταξύ 0 και 1.
- Το αποτέλεσμα της αφαίρεσης του πλάτους της ελιάς από το πλάτος του καμβά
Η κατακόρυφη θέση αντιμετωπίζεται με παρόμοιο τρόπο.
Με το «MoveMole» έτοιμο, το επόμενο βήμα είναι να ορίσουμε μια μεταβλητή που ονομάζεται score για να κρατάει το σκορ (αριθμός επιτυχιών) και να της δώσουμε αρχική τιμή 0.
Ορίστε επίσης μια διαδικασία «UpdateScore» που εμφανίζει το σκορ στην «ScoreLabel». Το πραγματικό περιεχόμενο που θα εμφανίζεται στην «ScoreLabel» θα είναι το κείμενο “Score: ” ενωμένο με την τιμή του score.
- Για να δημιουργήσετε το τμήμα “Score: ” της ετικέτας, σύρετε ένα μπλοκ κειμένου από το συρτάρι Κείμενο. Αλλάξτε το μπλοκ, ώστε να γράφει “Score: ” και όχι ” “.
- Χρησιμοποιήστε ένα μπλοκ σύνδεσης, για να το συνδέσετε με ένα μπλοκ που δίνει την τιμή της μεταβλητής score. Μπορείτε να βρείτε το μπλοκ join στο συρτάρι Text.
Έτσι θα πρέπει να φαίνονται τα “score και UpdateScore”:
Προσθήκη χρονοδιακόπτη
Το επόμενο βήμα είναι να κάνετε τον τυφλοπόντικα να συνεχίσει να κινείται. Εδώ είναι που θα χρησιμοποιήσετε το «MoleTimer». Τα στοιχεία ρολογιού έχουν έναν χειριστή συμβάντος που καλείται when … Timer που ενεργοποιείται επανειλημμένα με ρυθμό που καθορίζεται από το TimerInterval.
Ρυθμίστε το MoleTimer να καλεί το MoveMole κάθε φορά που ενεργοποιείται ο χρονοδιακόπτης, δημιουργώντας τον χειριστή συμβάντος ως εξής:
Παρατηρήστε πώς ο τυφλοπόντικας αρχίζει να χοροπηδάει στο τηλέφωνο, μόλις ορίσετε τον χειριστή συμβάντος. Αυτό είναι ένα παράδειγμα του πώς τα πράγματα στο App Inventor αρχίζουν να συμβαίνουν άμεσα, μόλις τα ορίσετε.
Προσθέστε έναν χειριστή «Mole Touch»
Το πρόγραμμα θα πρέπει να αυξάνει το σκορ κάθε φορά που αγγίζουν τον τυφλοπόντικα. Τα sprites, όπως και οι καμβάδες, ανταποκρίνονται σε γεγονότα αφής. Δημιουργήστε λοιπόν έναν χειριστή συμβάντος αφής για τον τυφλοπόντικα που:
- Αυξάνει το σκορ.
- Καλεί το «UpdateScore» για να εμφανίσει το νέο σκορ.
- Κάνει το τηλέφωνο να δονείται για 1/10 του δευτερολέπτου (100 χιλιοστά του δευτερολέπτου).
- Καλεί το «MoveMole», ώστε ο τυφλοπόντικας να μετακινηθεί αμέσως, αντί να περιμένει το χρονόμετρο.
Να πώς φαίνεται αυτό σε μπλοκ. Προχωρήστε και συναρμολογήστε τα μπλοκ όταν το Mole.Touched όπως φαίνεται
Ακολουθεί μια συμβουλή: Μπορείτε να χρησιμοποιήσετε το typeblocking: πληκτρολόγηση για να δημιουργήσετε γρήγορα μπλοκ.
- Για να δημιουργήσετε ένα μπλοκ τιμών που περιέχει 100, απλώς πληκτρολογήστε 100 και πατήστε return.
- Για να δημιουργήσετε ένα μπλοκ «MoveMole», απλά πληκτρολογήστε «MoveMole» και επιλέξτε το μπλοκ που θέλετε από τη λίστα
Επαναφορά του σκορ
Μια τελευταία λεπτομέρεια είναι η επαναφορά του σκορ. Αυτό είναι απλά θέμα του να κάνετε το «ResetButton» να αλλάξει το σκορ σε 0 και να καλέσετε το «UpdateScore».
Πλήρες πρόγραμμα
Εδώ είναι το πλήρες πρόγραμμα «MoleMash»:
Παραλλαγές
Μόλις καταφέρετε να λειτουργήσει το παιχνίδι, ίσως θελήσετε να εξερευνήσετε μερικές παραλλαγές. Για παράδειγμα:
- Κάντε το παιχνίδι να μεταβάλλει την ταχύτητα του τυφλοπόντικα ανάλογα με το πόσο καλά τα καταφέρνει ο παίκτης. Για να μεταβάλλετε πόσο γρήγορα κινείται ο τυφλοπόντικας, θα πρέπει να αλλάξετε την ιδιότητα «Interval» του «MoleTimer».
- Παρακολουθήστε πότε ο παίκτης χτυπάει τον τυφλοπόντικα και πότε αστοχεί και εμφανίστε ένα σκορ με τα χτυπήματα και τις αστοχίες. Για να το κάνετε αυτό, θα πρέπει να ορίσετε χειριστές αγγίγματος τόσο για το Mole, όπως και τώρα, όσο και για το MyCanvas. Ένα λεπτό ζήτημα, αν ο παίκτης αγγίξει τον τυφλοπόντικα, αυτό μετράει επίσης ως άγγιγμα για το MyCanvas; Η απάντηση είναι ναι. Και τα δύο συμβάντα αφής θα καταχωρηθούν.
- Μπορείτε εύκολα να τροποποιήσετε την ιδέα του παιχνιδιού αλλάζοντας την εικόνα του τυφλοπόντικα με το δικό σας πρόσωπο ή με κάτι άλλο.
- Βρείτε τα δικά σας σχέδια!
Ανασκόπηση
Ακολουθούν μερικές από τις ιδέες που καλύπτονται σε αυτό το έργο:
- Τα «Sprites» είναι σχήματα ευαίσθητα στην αφή, τα οποία μπορείτε να προγραμματίσετε να μετακινούνται σε έναν καμβά.
- Το στοιχείο «Clock» μπορεί να χρησιμοποιηθεί ως χρονοδιακόπτης για την πραγματοποίηση γεγονότων που συμβαίνουν σε τακτά χρονικά διαστήματα.
- Οι διαδικασίες ορίζονται χρησιμοποιώντας μπλοκ διαδικασιών.
- Για κάθε διαδικασία που ορίζετε, το «App Inventor» δημιουργεί αυτόματα ένα σχετικό μπλοκ κλήσης και το τοποθετεί στο συρτάρι «Procedures».
- Η δημιουργία ενός τυχαίου μπλοκ κλάσματος παράγει έναν αριθμό μεταξύ 0 και 1.
- Τα μπλοκ κειμένου καθορίζουν κυριολεκτικό κείμενο, όπως τα μπλοκ αριθμών καθορίζουν κυριολεκτικούς αριθμούς.
- Το «Typeblocking» είναι ένας τρόπος, για να δημιουργείτε μπλοκ γρήγορα, πληκτρολογώντας το όνομα ενός μπλοκ.
Το αρχικό σεμινάριο δημοσιεύεται στον ιστότοπο «App inventor». Εκεί μπορείτε επίσης να βρείτε περισσότερα παρόμοια έργα. Ο προγραμματισμός γίνεται επίσης στον ιστότοπο του «App Inventor». Θα χρειαστείτε λογαριασμό Google για να εισέλθετε στον ιστότοπο. Αν έχετε τηλέφωνο Android, μπορείτε να χρησιμοποιήσετε το τηλέφωνό σας ως προεπισκόπηση και τελικά να εγκαταστήσετε το παιχνίδι σε αυτό.