Αρχή

Εργασία Π41.4: Δημιουργία παιχνιδιού MoleMash (Τυφλοπόντικας)

Σκοπός και εκπαιδευτικοί στόχοι

Σκοπός της εργασία αυτής είναι να μπορέσετε να γράψετε ένα πρόγραμμα στο περιβάλλον του App Inventor και να κατανοήσετε τον τρόπο λειτουργίας του.  

Πιο συγκεκριμένα, οι επιμέρους εκπαιδευτικοί στόχοι είναι:

 

Τι θα κάνετε

Θα δημιουργήσετε ένα 1 έργο-πρόγραμμα, το οποίο θα εμφανίζει ένα τυφλοπόντικα (Molemash) σε τυχαίες θέσεις στην οθόνη του κινητού. Μόλις τον αγγίξετε θα δονείται το κινητό και θα αυξάνει το σκορ σας κατά ένα βαθμό.

Συνδεθείτε με το περιβάλλον του AI, χρησιμοποιώντας έναν πλοηγό (πχ. Mozilla Firefox) και πληκτρολογείστε τη διεύθυνση:

localhost:8888

Στην οθόνη εμφανίζεται ένας εικονικός λογαριασμός e-mail (test@example.com), επιλέγετε το πλαίσιο ελέγχου Sign as Administrator και πατάτε Log In.

Αφού έχει γίνει η σύνδεση σας με το περιβάλλον επιτυχώς, πατήστε στο πλήκτρο My Projects  και στη συνέχεια Start New Project

Στο παράθυρο που εμφανίζεται πληκτρολογήστε σαν όνομα το MoleMash και πατήστε το πλήκτρο ΟΚ.

Είστε ήδη στο περιβάλλον του AI, όπου θα πρέπει να εισάγετε τα αντικείμενα:

Αντικείμενο

Ομάδα

Όνομα που πρέπει να δώσετε

Canvas

Drawing and Animation

Canvas1

ImageSprite

Drawing and Animation

Mole

Button

User Interface

ResetButton

Clock

Sensors

Clock1

Sound

Media

Sound1

Label

User Interface

HitsLabel

Label

User Interface

HitsCountLabel

Horizontal Arrangement

Layout

HorizontalArrangement1

1)      Αρχικά αλλάξτε την ιδιότητα Title του αντικειμένου Screen1 σε Molemash.

 

2)      Σύρετε στην οθόνη ένα αντικείμενο Canvas (ομάδα Drawing and Animation) και αφήστε το με το προεπιλεγμένο όνομα Canvas1. Αλλάξτε την ιδιότητα Width σε “Fill parent” ώστε να πιάνει όλο το πλάτος της οθόνη και την ιδιότητα Height σε 300 pixels.

 

3)      Σύρετε στην οθόνη ένα αντικείμενο ImageSprite (ομάδα Drawing and Animation). Τοποθετήστε το μέσα στο αντικείμενο Canvas1. Αλλάξτε το όνομα του αντικειμένου σε Mole. (Πατήστε Rename στo κάτω μέρος της περιοχής Components και στο παράθυρο που εμφανίζεται στο πλαίσιο New Name δώστε το όνομα Mole και πατήστε ΟΚ). Αλλάξτε την ιδιότητα Picture σε mole.png. (Θα τη βρείτε στον αντίστοιχο φάκελο)

 

4)      Εισάγετε στην περιοχή σχεδίασης ένα αντικείμενο Button (ομάδα User Interface). Τοποθετήστε το κάτω από το αντικείμενο canvas. Αλλάξτε το όνομα του σε  ResetButton και αλλάξτε την ιδιότητα Text σε Reset.

 

5)      Εισάγετε στην περιοχή σχεδίασης ένα αντικείμενο Clock (ομάδα Sensors). Τοποθετήστε το κάτω από το ResetButton ώστε να εμφανιστεί στην περιοχή κάτω από τον Viewer δηλαδή εκεί που λέει “Non-visible components”.

 

6)      Τοποθετήστε στην περιοχή σχεδίασης (Viewer) ένα αντικείμενο Sound (ομάδα Sensors).  Τοποθετήστε το κάτω από το ResetButton ώστε να εμφανιστεί στην περιοχή κάτω από τον Viewer δηλαδή εκεί που λέει “Non-visible components”.

Μετά από τα παραπάνω η οθόνη πρέπει να είναι κάπως έτσι:

Στη συνέχεια πρέπει να προσθέσετε ένα αντικείμενο που θα κρατά το σκορ. (Δηλαδή πόσες φορές έχετε αγγίξει τον τυφλοπόντικα)

Εισάγετε κάτω από το button Reset ένα αντικείμενο Horizontal Arrangement. Αφήστε το όνομα του Horizontal Arrangement1.

Βάλτε μέσα σε αυτό δύο αντικείμενα Label και μετονομάστε το πρώτο σε HitsLabel και το δεύτερο HitsCountLabel. Αλλάξτε την ιδιότητα Text για το πρώτο αντικείμενο Σκορ: και για το δεύτερο σε 0.

Η οθόνη πρέπει να είναι κάπως έτσι:

 

Στη συνέχεια πρέπει να μεταφερθείτε στον Blocks editor, προκειμένου να γράψετε εντολές για το πώς θα συμπεριφέρονται τα αντικείμενα της εφαρμογής κατά την εκτέλεση του προγράμματος. Συγκεκριμένα αυτό που πρέπει να κάνει το πρόγραμμα είναι να εμφανίζει τον τυφλοπόντικα (mole) σε τυχαίες θέσεις μέσα στον καμβά κάθε δευτερόλεπτο. Ο στόχος του παίκτη είναι να αγγίξει με το δάχτυλο του τον τυφλοπόντικα σε όποιο τυχαίο σημείο του καμβά εμφανίζεται. Κάθε φορά που το πετυχαίνει αυτό οι πόντοι του αυξάνονται κατά ένα. Αν πατήσει το πλήκτρο Reset το σκορ μηδενίζει.

Για να καταφέρετε να εμφανίζετε τον τυφλοπόντικα σε τυχαίες θέσεις πρέπει να γράψετε τη διαδικασία MoveMole όπως φαίνεται παρακάτω:

Για να δημιουργήσετε τη διαδικασία MoveMole, επιλέγετε από την ομάδα Built-in την υποομάδα Procedures και από αυτήν το πλακίδιο to procedure do. Κάντε ένα κλικ πάνω σε αυτό και σβήστε τη λέξη procedure και πληκτρολογήστε MoveMole.

Η εσωτερική διαδικασία Mole. MoveTo υπάρχει έτοιμη και πρέπει να την επιλέξετε από την αντίστοιχη ομάδα. (Screen1->Canvas1->Mole)

Τη συνάρτηση random integer from 1 to 100 θα τη βρείτε στην ομάδα Built-in στην κατηγορία Math. Αλλάξτε την τιμή του σε 0 και το εσωτερικό πλακίδιο που έχει την τιμή 100.

 

 Επιλέξτε το πλακίδιο της αφαίρεσης από την αντίστοιχη κατηγορία. (Built-in-> Math).

Τοποθετήστε το στη θέση του πλακιδίου 100 όπως φαίνεται παρακάτω:

Εισάγετε τα πλακίδια Canvas1.Width (Screen1-> Canvas1) και Mole.Width (Screen1->Mole).

Αφού τα εισάγετε «κουμπώστε» τα κατάλληλα στο πλακίδιο της αφαίρεσης.

Επειδή τη συνάρτηση random integer τη χρειάζεστε δύο φορές για να μην ξανακάνετε τις ίδιες ενέργειες, κάντε πάνω της δεξί πάτημα και επιλέξετε την εντολή duplicate. Αλλάξτε το πλακίδιο Canvas1.Width με το πλακίδιο Canvas1.Height και το πλακίδιο Mole.Width με το πλακίδιο Mole.Height.

Η διαδικασία έχει τελειώσει, απλώς κουμπώστε κατάλληλα τα δύο πλακίδια random integer όπως φαίνεται παρακάτω:

Επειδή θέλετε κάθε φορά που ξεκινά η εφαρμογή να ξεκινά να κινείται ο τυφλοπόντικας εισάγετε την διαδικασία Screen1.Initialize (ομ. Screen1), και μέσα σε αυτή καλέστε τη MoveMole (Built-in->Procedures)

Επειδή θέλετε ο τυφλοπόντικας να συνεχίσει να κινείται κάθε δευτερόλεπτο θα χρειαστείτε το αντικείμενο clock.

Το προτελευταίο που πρέπει να γίνει είναι να κρατάτε το σκορ (δηλαδή πόσες φορές πέτυχε ο χρήστης τον τυφλοπόντικα).

Αν κάποιος άλλος θέλει να παίξει το παιχνίδι πρέπει να μηδενιστεί το σκορ, για αυτό πρέπει να δοθούν εντολές και για το κουμπί Reset.

Τέλος αν θέλετε να γίνεται δόνηση στο κινητό όποτε ο παίκτης αγγίξει τον τυφλοπόντικα πρέπει να εισάγετε το παρακάτω μπλοκ εντολών:

Πατήστε στο μενού Projects και επιλέξετε την εντολή Save project για να αποθηκεύσετε την εργασία σας.

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

Να δώσετε στην υποβολή σας ενεργό σύνδεσμο που θα οδηγεί στο MoleMash.apk αρχείο.

(Για παράδειγμα, αν ανεβάσετε το αρχείο στο ΠΣΔ, η διεύθυνση που θα υποβάλετε θα είναι της μορφής :  http://users.sch.gr/username/ MoleMash.apk, όπου “username” το όνομα χρήστη που έχετε στο ΠΣΔ.)