Δραστηριότητα 4 – MoleMash-2
Τετάρτη, 19 Δεκεμβρίου 2012, 3:28 πμ
Από: ΝΧΤ ΡΟΜΠΟΤ | Κάτω από: App_inventor

MoleMash-2

Το κυνήγι του τυφλοπόντικα 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 να καθορίσετε τους χειριστές συμβάντων. Αν δεν σας είναι οικείες οι αρχές, δοκιμάστε ένα από τα βασικά εγχειρίδια πριν ξεκινήσετε.

Εισαγωγή

Το εγχειρίδιο περιλαμβάνει:

  1. Δημιουργία μίας λίστας από στοιχεία
  2. Χρήση της λειτουργίας από την ενότητα Advanced του Blocks Editor για να πάρετε και να ορίσετε τις ιδιότητες των αυθαίρετων στοιχείων
  3. Συμβάντα του παιχνιδιού που ελέγχονται από το στοιχείο Clock
  4. Χρήση 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:

  1. Δημιουργία μεταβλητών:
    1. holes: μία λίστα από τρύπες
    2. currentHole: η τρύπα που ο τυφλοπόντικας βγαίνει αυτή τη στιγμή
  2. Όταν η εφαρμογή αρχίσει:
    1. Συμπληρώστε την λίστα με τις τρύπες.
    2. Ορίστε την ιδιότητα Picture κάθε τρύπας σε “hole.png”.
    3. Καλέστε την διαδικασία MoveMole (παρακάτω).
  3. Δημιουργήστε μία διαδικασία με όνομα MoveMole:
    1. Αναθέστε στο currentHole μία τυχαία τρύπα από την λίστα holes.
    2. Μετακινήστε τον τυφλοπόντικα στο σημείο που δείχνει η currentHole.
  4. Στην MoleClock θα καλείτε την MoveMole κάθε φορά που ο μετρητής χρόνου (timer) goes off (every second).
  5. Υλοποιήστε έναν χειριστή που κάνει τα ακόλουθα όταν ο τυφλοπόντικας δέχεται άγγιγμα:
    1. Αυξήστε κατά ένα το σκορ.
    2. Κάντε το τηλέφωνο να δονηθεί σύντομα.
    3. Καλέστε την 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

Τέλος, χρείαζεται να καθορίσουμε τι συμβαίνει όταν ο τυφλοπόντικας αγγίζεται. Συγκεκριμένα, θέλουμε να:

  1. Αυξάνεται το σκορ.
  2. Δονείται το τηλέφωνο σύντομα.
  3. Μετακινείται ο τυφλοπόντικας.

Μπορούμε εύκολα να το μεταφράσουμε σε 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 από πολλαπλά σημεία.

© Μετάφραση: Νινιδάκης Στυλιανός, Τμήμα Επιστήμης Υπολογιστών Π.Κ., στo πλαίσιo της πρακτικής άσκησης στο Πρότυπο Πειραματικό Γυμνάσιο Ηρακλείου 2012.  Επιμέλεια: Ψαρουδάκης Νικόλαος, Συντονιστής Πρακτικής Άσκησης, Πρότυπο Πειραματικό Γυμνάσιο Ηρακλείου. Πηγή: http://appinventor.mit.edu





     
Δεν υπάρχουν σχόλια μέχρι τώρα



Αφήστε μια απάντηση

Η ηλ. διεύθυνση σας δεν δημοσιεύεται. Τα υποχρεωτικά πεδία σημειώνονται με *

Αλλαγή μεγέθους γραμματοσειράς
Αντίθεση