Το κυνήγι του τυφλοπόντικα 2
Τι θα φτιάξετε
Download Refined Version (Book Chapter PDF)
Αυτό το εγχειρίδιο σας παρουσιάσει πως θα υλοποιήσετε ένα παιχνίδι παρόμοιο με το παιχνίδι Whac-A-MoleTM. Πιο συγκεκριμένα, ο σκοπός είναι να χτυπήσετε έναν τυφλοπόντικα που εμφανίζεται τυχαία σε μία από τις 5 προκαθορισμένες τρύπες. Κάθε φορά που το πετυχαίνετε, το σκορ σας αυξάνεται κατά ένα βαθμό.
Με σκοπό να τονιστούν οι νέες δυνατότητες του App Inventor — η καρτέλα Advanced και το Sprite Z-layering — αυτή η εφαρμογή έχει μία διαφορετική προσέγγυση από το κανονικό εγχειρίδιο Mole Mash, το οποίο δεν χρειάζεται να έχετε διαβάσει για να κάνετε το παρόν. Πρέπει, ωστόσο, να σας είναι οικείες οι αρχές του App Inventor — με τη χρήση του Component Designer για να φτιάξετε μία διεπαφή χρήστη και με τη χρήση του Blocks Editor να καθορίσετε τους χειριστές συμβάντων. Αν δεν σας είναι οικείες οι αρχές, δοκιμάστε ένα από τα βασικά εγχειρίδια πριν ξεκινήσετε.
Εισαγωγή
Το εγχειρίδιο περιλαμβάνει:
- Δημιουργία μίας λίστας από στοιχεία
- Χρήση της λειτουργίας από την ενότητα Advanced του Blocks Editor για να πάρετε και να ορίσετε τις ιδιότητες των αυθαίρετων στοιχείων
- Συμβάντα του παιχνιδιού που ελέγχονται από το στοιχείο Clock
- Χρήση Sprite Z-layering για να σιγουρευτείτε ότι ένα sprite (ImageSprite ή Ball) μπροστά από κάποιο άλλο
Ας ξεκινήσουμε
Συνδεθείτε στην ιστοσελίδα του App Inventor και ξεκινήστε ένα νέο project. Ορίστε την επιλογή του στοιχείου της οθόνης Title σε ένα κατάλληλο όνομα, όπως “Mole Mash”. Ανοίξτε το Blocks Editor και συνδέστε το κινητό τηλέφωνο. Κατεβάστε τα παρακάτω αρχεία εικόνων (created by Yun Miao) πατώντας δεξί κλικ πάνω τους, και προσθέστε τα στο project πατώντας στο κουμπί “Add…” στην κατηγορία Media.
Στήνοντας τα Components
Η διεπαφή χρήστη θα περιέχει συνολικά 6 ImageSprites: 5 τρύπες που δεν μετακινούνται και 1 τυφλοπόντικας, ο οποίος μετακινείται πάνω στις τρύπες. Χρησιμοποιήστε τον σχεδιαστή component για να δημιουργήσετε τη διεπαφή χρήστη. Όταν τελειώσετε, πρέπει να είναι παρόμοιο με την εικόνα που ακολουθεί. Μην ανησυχείτε για την ομοιόμορφη ευθυγράμμιση των τρυπών. Θα καθορίσετε τις τοποθεσίες τους μέσω των ιδιοτήτων X και Y. Επιπρόσθετες οδηγίες θα βρείτε κάτω από την εικόνα.
Δημιουργήστε τα ακόλουθα στοιχεία τραβώντας τα από το Palette στο Viewer.
Τύπος Component | Κατηγορία Palette | Όνομα που θα δώσετε | Σκοπός του Component |
Canvas | Basic | GameCanvas | Το περιβάλλον του παιχνιδιού |
ImageSprite (5) | Animation | Hole1 … Hole5 | Οι τρύπες από τις οποίες μπορεί να εμφανιστεί ο τυφλοπόντικας |
ImageSprite | Animation | Mole | Ο τυφλοπόντικας |
HorizontalArrangement | Screen Arrangement | ScoreArrangement | Η ένδειξη του σκορ |
Label | Basic | ScoreTextLabel | Κρατάει το κείμενο “Score: “ |
Label | Basic | ScoreValueLabel | Κρατάει το σκορ (αριθμό που χτυπήθηκε ο τυφλοπόντικας) |
Clock | Basic | MoleClock | Ελέγχει την κίνηση του τυφλοπόντικα |
Sound | Media | Buzzer | Δόνηση όταν αγγίζεται ο τυφλοπόντικας |
Κάντε τις παρακάτω αλλαγές στις ιδιότητες των στοιχείων:
Component | Action |
Canvas1 | Ορίστε το BackgroundColor σε πράσινο (Green). Ορίστε το Width σε 320 pixels. Ορίστε το Height σε 320 pixels. |
Hole1 | Ορίστε το X με 20 και το Y με 60 (αριστερά πάνω). |
Hole2 | Ορίστε το X με 130 και το Y με 60 (κέντρο πάνω). |
Hole3 | Ορίστε το X με 240 και το Y με 60 (δεξιά πάνω) |
Hole4 | Ορίστε το X με 75 και το Y με 140 (κάτω αριστερά). |
Hole5 | Ορίστε το X με 185 και το Y με 140 (κάτω δεξιά). |
Mole | Ορίστε το Picture σε “mole.png”. Ορίστε το Z σε 2, έτσι ο τυφλοπόντικας εμφανίζεται μπροστά από το άλλο ImageSprite s, που έχει την προκαθορισμένη τιμή Z με 1. |
ScoreTextLabel | Ορίστε το Text σε “Score: “. |
ScoreTextValue | Ορίστε το Text σε “0”. |
Μην ανησυχείτε τώρα για τον ορισμό της ιδιότητας Picture για τις τρύπες. Θα ορίσουμε την ιδιότητα στον Blocks Editor.
Προσθήκη συμπεριφοράς στα Components
Ακολουθεί μία σύνοψη με το τι χρειάζετε να κάνουν τα blocks:
- Δημιουργία μεταβλητών:
- holes: μία λίστα από τρύπες
- currentHole: η τρύπα που ο τυφλοπόντικας βγαίνει αυτή τη στιγμή
- Όταν η εφαρμογή αρχίσει:
- Συμπληρώστε την λίστα με τις τρύπες.
- Ορίστε την ιδιότητα Picture κάθε τρύπας σε “hole.png”.
- Καλέστε την διαδικασία MoveMole (παρακάτω).
- Δημιουργήστε μία διαδικασία με όνομα MoveMole:
- Αναθέστε στο currentHole μία τυχαία τρύπα από την λίστα holes.
- Μετακινήστε τον τυφλοπόντικα στο σημείο που δείχνει η currentHole.
- Στην MoleClock θα καλείτε την MoveMole κάθε φορά που ο μετρητής χρόνου (timer) goes off (every second).
- Υλοποιήστε έναν χειριστή που κάνει τα ακόλουθα όταν ο τυφλοπόντικας δέχεται άγγιγμα:
- Αυξήστε κατά ένα το σκορ.
- Κάντε το τηλέφωνο να δονηθεί σύντομα.
- Καλέστε την MoveMole.
Για να συνεχίσετε, ανοίξτε το Blocks Editor.
Δημιουργώντας μεταβλητές
Δημιουργήστε τις μεταβλητές holes και currentHole. Τώρα, θα τους δώσουμε ανούσιες αρχικές τιμές. Θα δώσουμε τις πραγματικές αρχικές τιμές στο χειριστή συμβάντων Screen1.Initialize, το οποίο τρέχει όταν η εφαρμογή ξεκινάει. (Για τεχνικούς λόγους, τα components δεν μπορούν να αναφερθούν στα def blocks, τα οποία τρέχουν πριν αρχίσει η εφαρμογή.) Ακολουθεί μία εικόνα και μία λίστα από τα blocks που θα χρειαστείτε:
Block type | Drawer | Σκοπός |
def variable as (holes) | Definition | Κρατάει μία λίστα . |
make a list | Lists | Δημιουργείστε μία λίστα, για να συμπληρωθεί όταν το πρόγραμμα αρχίσει. |
def variable as (currentHole) | Definition | Κρατάει την παρούσα τρύπα που βρίσκετε ο τυφλοπόντικας. |
number (0) | Numbers | Παρέχει μία απαραίτητη αρχική τιμή για το currentHole. |
Όπως πάντα, τα σχόλια ενθαρρύνονται (δημιουργία κάνοντας δεξί κλικ σε ένα block) αλλά δεν χρειάζονται.
Ξεκινώντας την εφαρμογή
Το πρώτο συμβάν που προκύπτει σε οποιοδήποτε πρόγραμμα του Screen1.Initialize, γι αυτό θα βάλλουμε αρχικό κώδικα σε αυτόν τον χειριστή. Ειδικότερα, θα προσθέσουμε τα στοιχεία της τρύπας στην λίστα με τις τρύπες, ορίστε την ιδιότητα του Picture κάθε τρύπας σε “hole.png”, και καλέστε την MoveMole. Από την στιγμή που δεν έχουμε γράψει ακόμα την MoveMole, θα δημιουργήσουμε μία άδεια διαδικασία με αυτό το όνομα, η οποία θα συμπληρωθεί αργότερα.
Παρακάτω ακολουθεί μία εικόνα και ένας πίνακας των blocks που χρειάζεται να δημιουργήσετε. Σημειώστε ότι το “Any ImageSprite” βρίσκεται στην καρτέλα “Advanced” στα δεξιά των “Built-In” και “My Blocks” στον Blocks Editor.
Block type | Drawer | Σκοπός |
Screen1.Initialize | Screen1 | Καθορίστε τί θα συμβεί όταν η εφαρμογή θα αρχίσει. |
add items to list | Lists | Προσθέστε τις ακόλουθες τιμές στην … |
holes | My Definitions | …στην λίστα με τις τρύπες: |
component Hole1 | Hole1 | -πάνω αριστερά τρύπα |
component Hole2 | Hole2 | -στην κέντρο πάνω τρύπα |
component Hole3 | Hole3 | -στην πάνω δεξιά τρύπα |
component Hole4 | Hole4 | -στην κάτω αριστερά τρύπα |
component Hole5 | Hole5 | -στην κάτω δεξιά τρύπα |
foreach | Control | Καθορίστε ότι θέλουμε … |
name (hole) | Definitions | …μία μεταβλητή με όνομα “hole”… |
holes | My Definitions | …που αναλαμβάνει κάθε τιμή της λίστας. |
ImageSprite.Picture | Any Image Sprite | Θέστε την ιδιότητα Picture του … |
value hole | My Definitions | …ImageSprite να αναφέρεται από την μεταβλητή hole … |
text (hole.png) | Text | …στην εικόνα της άδειας τρύπας. |
to procedure (MoveMole) | Definition | Δημιουργήστε μία διαδικασία, που θα συμπληρωθεί αργότερα, για την μετακίνηση του τυφλοπόντικα. |
MoveMole | My Definitions | Καλεί την MoveMole για να γίνει η πρώτη τοποθέτηση του τυφλοπόντικα. |
Σύγκρινε το block foreach με τα ισοδύναμα blocks τα είναι απαραίτητα:
Το αριστερό σύνολο έχει λιγότερα blocks, με μικρότερη επαναληψημότητα, και αυτό έχει σαν αποτέλεσμα να ελαχιστοποιούνται οι άσκοπες εντολές copy-and-paste κάνοντάς το ευκολότερο σε αλλαγές, για παράδειγμα, αν το όνομα της εικόνας έχει αλλάξει.
Μετακίνηση του τυφλοπόντικα
Τώρα ας συμπληρώσουμε το σώμα της διαδικασίας MoveMole, η οποία θα καλείται όταν το πρόγραμμα ξεκινάει, όταν ο τυφλοπόντικας δέχεται άγγιγμα, και όταν ο χρονομετρητής μας εξαντλείται κάθε δευτερόλεπτο. Αυτό που θέλουμε να κάνουμε είναι να επιλέγουμε μία τυχαία τρύπα και να μετακινούμε τον τυφλοπόντικα πάνω της. Ακολουθεί μία εικόνα και μία λίστα των νέων blocks:
Block type | Drawer | Σκοπός |
set currentHole to | My Definitions | Αποθήκευσε την… |
call pick random item | Lists | …τυχαία επιλεγμένη… |
holes | My Definitions | …τρύπα. |
call Mole.MoveTo | Mole | Μετακίνησε τον τυφλοπόντικα στην… |
ImageSprite.X | Advanced/ImageSprite | ..συντεταγμένη x της… |
currentHole | My Definitions | …επιλεγμένης τρύπας… |
ImageSprite.Y | Advanced/ImageSprite | …και την συντεταγμένη y … |
current Hole | My Definitions | …της επιλεγμένης τρύπας. |
Πρέπει, τώρα, να καθορίσουμε ότι η διαδικασία MoveMole πρέπει να καλείται κάθε φορά που ο χρονομετρητής της MoleClock εξαντλείται. Χρειαζόμαστε μόνο 2 blocks για να το ολοκληρώσουμε:
Block type | Drawer | Σκοπός |
MoleClock.Timer | MoleClock | Όταν εξαντλείται ο χρονομετρητής… |
call MoveMole | My Definitions | … μετακίνησε τον τυφλοπόντικα. |
Registering Touches
Τέλος, χρείαζεται να καθορίσουμε τι συμβαίνει όταν ο τυφλοπόντικας αγγίζεται. Συγκεκριμένα, θέλουμε να:
- Αυξάνεται το σκορ.
- Δονείται το τηλέφωνο σύντομα.
- Μετακινείται ο τυφλοπόντικας.
Μπορούμε εύκολα να το μεταφράσουμε σε blocks:
Block type | Drawer | Σκοπός |
Mole.Touched | Mole | Όταν αγγίζεται ο τυφλοπόντικας… |
set ScoreValueLabel.Text to | ScoreValueLabel | …ενημερώστε το ορατό σκορ σε… |
number (1) | Math | …1 [και]… |
ScoreValueLabel.Text | ScoreValueLabel | …το προηγούμενο σκορ. |
call Buzzer.Vibrate | Buzzer | Κάντε το τηλέφωνο να δονηθεί για … |
number (100) | Math | …100 milliseconds. |
call MoveMole | My Definitions | Μετακίνησε τον τυφλοπόντικα σε μία νέα τοποθεσία. |
Τελικό Πρόγραμμα
Παραλλαγές
Παρακάτω θα βρείτε κάποιες παραλλαγές που ίσως σας ενδιαφέρουν να υλοποιήσετε:
- Προσθέστε ένα κουμπί Reset για να επιστρέψετε το σκορ πάλι στο 0.
- Έχοντας το σκορ να εξαρτάται όχι μόνο από τα χτυπήματα αλλά επίσης και από τον αριθμό των αποτυχιών και των τυφλοπόντικων που απέδρασαν.
- Αυξήστε την ταχύτητα κίνησης του παιχνιδιού αν ο παίκτης τα πάει καλά, ή μειώστε την σε αντίθετη περίπτωση.
- Προσθέστε ένα δεύτερο τυφλοπόντικα με ένα δεύτερο χρονομετρητή.
Μπορείτε να δείτε πως θα υλοποιήσετε τις πρώτες δύο παραλλαγές στο αυθεντικό εγχειρίδιο Mole Mash.
Ανασκόπηση
Παρακάτω είναι κάποιες ιδέες που παρουσιάζονται σε αυτό το εγχειρίδιο:
- Τοποθετώντας στοιχεία σε μία λίστα ( List.)
- Παρουσιάζοντας μία λειτουργία σε κάθε στοιχείο του List με την χρήση του block foreach και τα χαρακτηριστικά Advanced.
- Τοποθετώντας ένα ImageSprite πάνω σε ένα άλλο, με την χρήση των ιδιοτήτων Z για τον έλεγχο του ποιό πάει μπροστά.
- Χρησιμοποιώντας το στοιχείο Clock για τον έλεγχο του παιχνιδιού.
- Δημιουργώντας μία διαδικασία και καλώντας την it από πολλαπλά σημεία.