Δραστηριότητα 3 – MoleMash (Μέρος 1)
Δευτέρα, 3 Δεκεμβρίου 2012, 9:55 πμ
Από: ΝΧΤ ΡΟΜΠΟΤ | Κάτω από: App_inventor

Το κυνήγι του τυφλοπόντικα (Μέρος 1)

Download Refined Version (Book Chapter PDF)

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

Σε αυτό το εγχειρίδιο υποθέτουμε ότι έχετε ολοκληρώσει την εφαρμογή HelloPurr και την εφαρμογή PaintPot από τα αντίστοιχα εγχειρίδια.

Ας ξεκινήσουμε:

Συνδεθείτε στη σελίδα του App Inventor και δημιουργήστε ένα νέο project. Ονομάστε το “MoleMash”, και επίσης ρυθμίστε το τίτλο της οθόνης ( Title ) σε “MoleMash”. Ανοίξτε το Blocks Editor και συνδεθείτε στην κινητή συσκευή.

Κατεβάστε επίσης και αυτή την εικόνα ενός τυφλοπόντικα και αποθηκεύστε την στον υπολογιστή σας.

Εισαγωγή

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

Το παρόν εγχειρίδιο παρουσιάζει:

  • στοιχεία εικόνων
  • χρονόμετρα και το στοιχείο Clock
  • διαδικασίες
  • παραγωγή τυχαίων αριθμών μεταξύ 0 και 1
  • πεδία κειμένου
  • ομαδοποίηση τύπων

Τα πρώτα μέρη

Μερικά από αυτά θα πρέπει να σας είναι οικία από προηγούμενα εγχειρίδια:

  • Ένας Canvas με όνομα “MyCanvas”. Είναι η περιοχή όπου ο τυφλοπόντικας κινείται.
  • Ένα Label με όνομα “ScoreLabel” που εμφανίζει το σκορ, π.χ., τον αριθμό των χτυπημάτων που έχει πετύχει στον τυφλοπόντικα ο παίχτης.
  • Ένα Button με όνομα “ResetButton”.

Τραβήξτε αυτά τα στοιχεία από την Παλέττα πάνω στον Viewer και ρυθμίστε τα ονόματά τους. Τοποθετήστε το MyCanvas στην κορυφή και θέστε τις διαστάσεις του σε 300 pixels οριζόντια και 300 pixels κάθετα. Ρυθμίστε το Text του ScoreLabel σε “Score: —“. Ρυθμίστε το Text του ResetButton σε “Reset”. Επίσης πρόσθεσε ενα στοιχείο Sound και ονόμασέ το “Noise”. Θα χρησιμοποιήσεις το Noise για να κάνεις την συσκευή να δονηθεί όταν χτυπηθεί ο τυφλοπόντικας, όπως περίπου κάναμε με το γατάκι στο HelloPurr.

Χρονόμετρα και το στοιχείο Clock

Απαιτείται να ορίσεις για τον τυφλοπόντικα να κινείται περιοδικά, και θα το κάνεις αυτό με την χρήση ενός στοιχείου Clock. Το στοιχείο Clock παρέχει διαφορετικές ενέργειες σχετικά με τον χρόνο, όπως το να σου λέει την τρέχουσα ημερομηνία. Εδώ, θα χρησιμοποιήσεις το στοιχείο σαν ένα χρονόμετρο που “πυροδοτείται” σε καθορισμένα διαστήματα. Το διάστημα “πυροδότησης” εντοπίζεται από την επιλογή TimerInterval του στοιχείου Clock. Τραβήξτε ένα στοιχείο Clock. Θα τοποθετηθεί στην περιοχή των μη-εμφανών στοιχείων. Ονομάστε το “MoleTimer”. Θέστε το TimeInterval σε 500 ms για να κάνει τον τυφλοπόντικα να κινείται κάθε μισό λεπτό. Σιγουρέψου ότι η επιλογή Enabled έχει τσεκαριστεί.

Είσαγοντας μία εικόνα

Για να εισάγουμε τον κινούμενο τυφλοπόντικα θα χρησιμοποιήσουμε ένα sprite.

Τα Sprites είναι εικόνες που μπορούν να κινηθούν στην οθόνη μέσα στο Canvas. Κάθε sprite έχει μία Ταχύτητα (Speed) και ένα Heading, και επίσης ένα διάστημα (Interval) που εντοπίζει πόσο συχνά η εικόνα κινείται στην ταχύτητα που ορίστηκε. Τα Sprites μπορούν επίσης να εντοπίσουν όταν κάποιος τα αγγίζει. Στο MoleMash, έχει ταχύτητα 0, έτσι δεν κινείται από μόνος του. Γι’ αυτό, θα θέτεις την θέση του τυφλοπόντικα κάθε φορά που το χρονόμετρο “πυροδοτείται”. Τράβηξε ένα αντικείμενο ImageSprite στον Viewer. Θα βρείτε ένα τέτοιο αντικείμενο στην κατηγορία Animation της Παλέττας. Τοποθετήστε την μέσα στην περιοχή του MyCanvas. Θέστε τις παρακάτω επιλογές για την εικόνα του τυφλοπόντικα:

  • Picture: Χρησιμοποίησε το mole.png, που κατέβασες στον υπολογιστή σου στην αρχή.
  • Enabled: Επιλεγμένο
  • Interval: 500 (Το διάστημα δεν έχει σημασία εδώ, επειδή η ταχύτητα του τφλοπόντικα είναι μηδέν: δεν κινείται από μόνος του.)
  • Heading: 0 Δεν έχει σημασία ούτε αυτό, επειδή η ταχύτητα είναι 0.
  • Speed: 0.0
  • Visible: Επιλεγμένο
  • Width: Automatic
  • Height: Automatic

Θα πρέπει να δεις τώρα τις επιλογές x και y ήδη να έχουν συμπληρωθεί. Εντοπίστηκαν από όπου τοποθέτησες τον τυφλοπόντικα στο MyCanvas. Συνέχισε και τράβηξε λίγο ακόμα τον τυφλοπόντικα. Θα δεις τα x και y να αλλάζουν. Θα πρέπει να δείτε επίσης τον τυφλοπόντικα στο συνδεδεμένο τηλέφωνο, και τον τυφλοπόντικα να κινείται στην οθόνη όσο τον μετακινείται στο Designer. Έχετε τώρα ορίσει όλα τα στοιχεία. Ο Designer θα πρέπει να μοιάζει με αυτό παρακάτω. Σημειώστε ότι το Mole εξαρτάται από το MyCanvas στην λιστα των δομικών στοιχείων, υποδεικνύοντας ότι το sprite είναι υπό-στοιχείο του κανβά μας.

Συμπεριφορά των στοιχείων και χειριστές γεγονότων

Τώρα θα συγκεκριμενοποιήσετε την συμπεριφορά των στοιχείων. Αυτό εισάγει κάποιες νέες ιδέες για το App Inventor. Η πρώτη είναι η ιδέα της διαδικασίας.

Μία διαδικασία είναι μία ακολουθία δηλώσεων που μπορείς να αναφερθείς σε όλες με μία μοναδική εντολή. Εάν έχετε μία ακολουθεία που πρέπει να χρησιμοποιήσετε παραπάνω από μία φορά σε ένα πρόγραμμα, μπορείτε να την ορίσετε σαν μία διαδικασία, και έτσι δεν χρειάζεται να επαναλάβετε την ακολουθία κάθε φορά που την χρησιμοποιείτε. Οι διαδικασίες στο App Inventor μπορούν να δεχτούν ορίσματα και να επιστρέψουν τιμές. Αυτό το εγχειρίδιο καλύπτει μόνο την απλούστερη περίπτωση: διαδικασίες που δεν δέχονται ορίσματα και δεν επιστρέφουν τιμές.

Δήλωση Διαδικασιών ( Procedures )

Δηλώστε δύο διαδικασίες:

  • Η MoveMole μετακινεί τον τυφλοπόντικα σε μία νέα τυχαία θέση στο καμβα.
  • Η UpdateScore εμφανίζει το σκορ, αλλάζοντας το κείμενο του πεδίου ScoreLabel

Αρχίζοντας με την διαδικασία MoveMole:

  • Στο Blocks Editor, κάτω από το Built-In, άνοιξε το Definition drawer. Τράβηξε ένα μπλοκ to procedure και αλλάξτε το πεδίο “procedure” σε “MoveMole”.
    Σημείωση: Υπάρχουν δύο παρόμοια μπλοκ: procedure και procedureWithResult. Εδώ θα πρέπει να χρησιμοποιήσετε το procedure.

    Το μπλοκto MoveMole έχει μία ένδειξη με τίτλο “do”. Εκεί τοποθετείται τις εντολές για την διαδικασία. Σε αυτή τη περίπτωση υπάρχουν 2 εντολές: μία για να ορίσει τη θέση x του τυφλοπόντικα και άλλη μία για την θέση y. Σε κάθε μία περίπτωση, θα ορίσετε την θέση να τυχαία συνάρτηση μεταξύ του 0 και του 1, της διαφοράς μεταξύ του μεγέθους του καμβά και του μεγέθους του τυφλοπόντικα. Δημιουργείς αυτή τη τιμή με την χρήση blocks για random fraction και πολλαπλασιασμό και διαίρεση. Μπορείται να τα βρείτε στο Math drawer.

  • Κάντε build την διαδικασία MoveMole. Η ολοκληρωμένη δήλωση θα πρέπει να μοιάζει με αυτό:

    Αφήστε το πεδίο των ορισμάτων της MoveMole κενό επειδή η MoveMole δεν δέχεται κανένα όρισμα. Παρατηρήστε πώς τα blocks συνδέονται μεταξύ τους: η πρώτη δήλωση χρησιμοποεί το block Mole.X set για να ορίσει την οριζόντια θέση του τυφλοπόντικα. Η τιμή που τοποθετείται στο πεδίο του block είναι το αποτέλεσμα του πολλαπλασιασμού.

    1. Το αποτέλεσμα του πεδίου του block call random fraction, μία τιμή μεταξύ 0 και 1.
    2. Το αποτέλεσμα της αφαίρεσης το πλάτος του τυλοπόντικα από το πλάτος του καμβά.

    Την κάθετη θέση την χειριζόμαστε παρομοίως.

Όταν η διαδικασία MoveMole ολοκληρωθεί, το επόμενο βήμα είναι η δήλωση μίας μεταβλητής με όνομα score για να κρατάει τον αριθμό των χτυπημάτων με αρχική τιμή 0. Επίσης, δηλώστε μία διαδικασία UpdateScore που δείχνει το σκορ στο ScoreLabel. Το περιεχόμενο στο πεδίο ScoreLabel θα είναι η συμβολοσειρά “Score: ” συνοδευόμενη με την τιμή score.

  • Για την δημιουργία του μέρους που εμφανίζει το “Score: “, τραβήξτε ένα block κειμένου από το Text drawer. Αλλάξτε το κείμενο σε “Score: ” από “text”.
  • Χρησιμοποιείστε ένα bolck τύπου join για να εισάγει την τιμή σε block που δίνει στην μεταβλητή του σκορ. Μπορείται να βρείτε το block τύπου join στο Text drawer.

Ορίστε πως score και UpdateScore θα πρέπει να μοιάζουν τώρα:

Προσθήκη ενός χρονομετρητή

Το επόμενο βήμα είναι να συνεχίσει το τυφλοπόντικας να κινείται. Εδώ είναι που θα κάνετε χρήση του MoleTimer. Τα Clock components έχουν ένα χειρηστή γεγονότων when … Timer που ενεργοποιείται επανειλημμένα σε ένα ρυθμό που καθορίζεται από τη TimerInterval.

Ρυθμίστε τον MoleTimer για να καλεί την MoveMole κάθε φορά που ο χρονομετρητής τροφοδοτείται, φτιάχνοντας έναν event handler σαν αυτό:

Προσθήκη χειριστή για το “άγγιγμα” του τυφλοπόντικα.

Το πρόγραμμα πρέπει να αυξάνει το σκορ κάθε φορά που ο τυφλοπόντικας δέχεται άγγιγμα. Τα Sprites ανταποκρίνονται όταν δεχτούν ένα άγγιγμα. Γι αυτό δημιουργήστε ένα touch event handler για τον τυφλοπόντικα Mole ώστε να:

  1. Αυξάνει το σκορ.
  2. Καλεί την UpdateScore για την εμφάνιση του σκορ.
  3. Δονεί το τηλέφωνο για 1/10 του δευτερολέπτου (100 milliseconds).
  4. Καλεί την MoveMole έτσι ώστε ο τυφλοπόντικας να κινείται αμέσως, αντί να περιμένουμε το χρονόμετρο.

Ορίστε πώς φαίνεται τώρα με τα blocks. Συνεχίστε και φτιάξτε το blockwhen Mole.Touched.

Μία βοήθεια: Γρήγορη δημιουργία blocks.

  • Για να δημιουργήσετε ένα block με την τιμή 100, αρκεί να πληκτρολογήσετε 100 και να πατήσετε enter.
  • Για να δημιουργήσετε ένα block MoveMole, αρκεί να πληκτρολογήσετε MoveMole και να επιλέξετε το block που επιθυμείται από την λίστα.

Μηδενισμός του σκορ

Μία τελευταία λεπτομέρεια είναι ο μηδενισμός του σκορ. Αυτό είναι απλά το αποτέλεσμα μίας ενέργειας στο ResetButton που αλλάζει το σκορ σε 0 και καλεί την UpdateScore.

Ολοκλήρωση του προγράμματος

Εδώ είναι το ολοκληρωμένο πρόγραμμα του MoleMash

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





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



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

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

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