Πηγαίνετε στη σελίδα: setup-software.htmlsoftware.html Κατεβάστε το νέο πρόγραµµα εγκατάστασης. Πηγαίνετε στο φάκελο: C:\Program. κατεβάσατε πριν.

Transcript

1 App Inventor 2 Το παιχνίδι MoleMash 1

2 Εγκατάσταση Πηγαίνετε στη σελίδα: setup-software.htmlsoftware.html Κατεβάστε το νέο πρόγραµµα εγκατάστασης. Πηγαίνετε στο φάκελο: C:\Program Files\AppInventor\commands-for-Appinventor Τρέξτε το uninstall. Εγκαταστήστε το νέο πρόγραµµα που κατεβάσατε πριν. 2

3 ηµιουργία νέας εφαρµογής Ανοίξτε τη σελίδα : Επιλέξτε Create ώστε το λογαριασµό σας στο Gmail Όταν συνδεθείτε πατήστε επάνω αριστερά: New Project ώστε σαν όνοµα: "MoleMash" ώστεσαν σαν τίτλο στην screen1 το "MoleMash" Πηγαίνετε στη σελίδα στο Google και αναζητήστε µια εικόνα mole.pngκαι αποθηκεύστε τη στον υπολογιστή σας µ αυτό το όνοµα. 3

4 Γνωριµία µε την νέα έκδοση Palette:Περιέχει τα στοιχεία που θα χρησιµοποιείτε για την εφαρµογή σας. Τα επιλέγετε και τα σέρνετε µέσα στο viewer Designer:Εµφανίζει την οθόνη που βλέπετε Properties: ιαλέξτε ένα στοιχείο από την λίστα Components για να του αλλάξετε τα χαρακτηριστικά (χρώµα, τίτλο, µέγεθος) Viewer: Σύρετε τα στοιχεία από την palette εδώ. 4

5 App Inventor Blocks Editor Προγραµµατίστε τη συµπεριφορά της εφαρµογής βάζοντας τα µπλοκ µαζί. Built-in: Βρείτε µπλοκ γενικής χρήσης που θέλετε να προσθέσετε στην εφαρµογή. Σύρετε τα στον Blocks Viewer. Blocks:Έτσι ανοίγει ο block Editor. Εδώ θα βρείτε τα µπλοκ που αφορούν τα στοιχεία που χρησιµοποιείτε για την εφαρµογή σας Ενώστε τα µπλοκ για να φτιάξετε την εφαρµογή σας. Viewer:Σύρετε µπλοκς εδώ για να δηµιουργήσετε τις σχέσεις και τις συµπεριφορές των στοιχείων σας 5

6 MoleMash Στο MoleMash παιχνίδι, ένας τυφλοπόντικας κινείται σε τυχαίες θέσεις, και ο παίκτης σκοράρει χτυπώντας το mole, πριν φύγει µακριά. Θα δούµε πώς να φτιάξουµε το MoleMash σαν ένα απλό παιχνίδι που χρησιµοποιεί animation. 6

7 Τι θα φτιάξετε Ένας τυφλοπόντικας κινείται σε τυχαίες θέσεις στην οθόνη, κάθε δευτερόλεπτο. Αγγίζοντας τον, η συσκευή δονείται, το σκορ αυξάνεται (αύξηση κατά ένα), και ο τυφλοπόντικας κινείται αµέσως προς µια νέα θέση. (hits) Αγγίζοντας την οθόνη, όταν λείπει ο τυφλοπόντικας αυξάνεται ο αριθµός των αποτυχιών κατά 1. (misses) Πατώντας το κουµπί Resetεπαναφέρει τις µετρήσεις των χτυπήµατα και αποτυχιών. 7

8 Τι θα µάθετε Το στοιχείο ImageSpriteγια δηµιουργία εικόνων που κινούνται µε την αφή. Το στοιχείο Canvasπου δρα ως επιφάνεια πάνω στην οποία θα τοποθετήσετε το ImageSprite. Το στοιχείο Clockγια να µετακινήσετε το ImageSprite γύρω γύρω. Το στοιχείο Soundγια την παραγωγή δόνησης όταν ο τυφλοπόντικας αγγίζεται. Το στοιχείο Button για να ξεκινήσετε ένα νέο παιχνίδι. ιαδικασίες για την εφαρµογή επαναλαµβανόµενης συµπεριφοράς, όπως η µετακίνηση του τυφλοπόντικα. Παραγωγή τυχαίων αριθµών. Τη χρήση των µπλοκ της πρόσθεσης (+) και αφαίρεσης (-) 8

9 Τοποθετώντας τα στοιχεία Σύρετε ένα στοιχείο Canvasαπό την οµάδα Drawing and Animation, δίνοντας του τοόνοµα MyCanvas.. Ορίστε το Width (Πλάτος)) σε Fill Parent, και το ύψος του 300 pixels. Σύρετε ένα Button ονοµάστε το "ResetButton". Αλλάξτε το Textτου ResetButton σε "Reset". Σύρετε ένα Soundστοιχείο από την οµάδα Media και ονοµάστε το "Noise". Θα το χρησιµοποιήσετε για να κάνετε τα τηλέφωνο να δονείται όταν χτυπιέται ο τυφλοπόντικας. 9

10 Το στοιχείο Clock Ο τυφλοπόντικας θα πρέπει να πηδάει περιοδικά, και θα το κάνετε αυτό µε τη βοήθεια ενός στοιχείου Clock (ρολόι). Το στοιχείο Clockέχει διάφορες εφαρµογές όπως να µετράει χρόνο, ή να λέει την ηµεροµηνία. Εδώ, θα χρησιµοποιήσετε το στοιχείο ως ένα χρονόµετρο που πυροδοτείται σε τακτά χρονικά διαστήµατα. Τα διαστήµατα πυροδότησης προσδιορίζονται µε την ιδιότητα TimerIntervalτου Ρολογιού. Σύρετε ένα στοιχείο Clock.Θα πάει στην περιοχή µη ορατά στοιχεία. Ονοµάστε το "MoleTimer". Ορίστε το TimeIntervalσε 1000χιλιοστά του δευτερολέπτου για να κάνει τον τυφλοπόντικα να µετακινείται κάθε µισό δευτερόλεπτο. Βεβαιωθείτε ότι η ιδιότητα Enabled είναι τσεκαρισµένη. 10

11 Το στοιχείο ImageSprite Τα Sprites είναι εικόνες που µπορούν να κινηθούν στην οθόνη µέσα σε ένα καµβά. Κάθε sprite έχει µια ταχύτητα και µια επικεφαλίδα, καθώς επίσης και ένα διάστηµα που καθορίζει πόσο συχνά το sprite κινείται µε καθορισµένο ταχύτητα. Τα Sprites µπορούν επίσης να ανιχνεύσουν πότε τ αγγίζουν. Στην εφαρµογή MoleMash, ο τυφλοπόντικας έχει ταχύτητα µηδέν, έτσι δεν θα κινηθεί από µόνος του. Αντ 'αυτού, εσείς θα πρέπει ορίζετε τη θέση του τυφλοπόντικα κάθε φορά που πυροδοτείται ο χρονοδιακόπτης. 11

12 Το στοιχείο ImageSprite Σύρετε ένα στοιχείο ImageSpriteπάνω στο Viewer. Θα βρείτε αυτό το στοιχείο στην κατηγορία Drawing and Animationστην παλέτα. Τοποθετήστε το µέσα στην περιοχή MyCanvas. Κάντε κλικ στην επιλογή Rename (Μετονοµασία) στο κάτω µέρος της λίστας Components και αλλάξτετο το όνοµά της σε "Mole". Ρυθµίστε αυτές τις ιδιότητες για το sprite: Picture: Εικόνα mole.png, που κατεβάσατε νωρίτερα. Enabled: ΝΑΙ Interval: : 500 Heading: : 0 Speed: : 0.0 Visible: ΝΑΙ Width: : Automatic Height: : Automatic 12

13 Το στοιχείο Label Θα τοποθετήσουµε τα στοιχεία που θα δείχνουν το σκορ του χρήστη και συγκεκριµένα τον αριθµό των χτυπηµάτων και τον αριθµό των αποτυχιών. Σύρετε ένα στοιχείο HorizontalArrangement t από την οµάδα Layout,, τοποθετώντας το κάτω από το κουµπί Reset µε όνοµα HorizontalArrangement1. Σύρετε δύο Labelαπό τη βασική οµάδα µέσα στο HorizontalArrangement1. Μετονοµάστε το αριστερό Labelσε "HitsLabel»» και αλλάξτε το Textσε «Σκορ:» (φροντίζοντας να συµπεριλάβετε ένα κενό διάστηµα µετά την άνω και κάτω τελεία). Μετονοµάστε το δεξί Label σε HitsCountsLabel»» και αλλάξτε το Textσε "0". 13

14 Σύρετε ένα δεύτερο HorizontalArrangement, τοποθετώντας το κάτω από το HorizontalArrangement1. Σύρετε δύο Label στο HorizontalArrangement2. Μετονοµάστε το αριστερό Label σε "MissesLabel»» και αλλάξτε το Textσε «Αστοχίες: " (φροντίζοντας να συµπεριλάβετε ένα κενό διάστηµα µετά την άνω και κάτω τελεία). Μετονοµάστε το δεξί Label σε "MissesCountsLabel»» και αλλάξτε το Textσε "0". 14

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

16 Προσθέτοντας Συµπεριφορές στα στοιχεία Μετά τη δηµιουργία των προηγουµένων στοιχείων, µπορούµε να προχωρήσουµε στο Blocks Editor για την εφαρµογή της συµπεριφοράς του προγράµµατος. Συγκεκριµένα, θέλουµε ο τυφλοπόντικας να µετακινηθεί σε µια τυχαία θέση στον καµβά κάθε δευτερόλεπτο. Στόχος του χρήστη είναι να χτυπήσει στον τυφλοπόντικα όταν αυτός εµφανίζεται, και η εφαρµογή θα εµφανίσει τον αριθµό των φορών που ο χρήστης τα κατάφερε ή έχασε. Πατώντας το κουµπί Reset επαναφέρει τον αριθµό του σκορ και των αποτυχιών σε 0. 16

17 Κινώντας τον τυφλοπόντικα Ορίστε τη διαδικασία(procedure) Procedure): MoveMoleκινείται ο τυφλοπόντικας ς σε µια νέα τυχαία θέση πάνω στον καµβά. 17

18 ηµιουργία της MoveMole Για να καταλάβουµε πώς θα µετακινήσουµε τον τυφλοπόντικα, θα πρέπει να δούµε πώς λειτουργούν τα Android γραφικά. Ο καµβάς (και η οθόνη) µπορεί να θεωρηθεί ως ένα πλέγµα µε χ (οριζόντια) και y (κάθετα) συντεταγµένες, όπου οι (x, y) συντεταγµένες της άνω αριστερής γωνίας είναι (0, 0). Η συντεταγµένη x αυξάνει καθώς κινείστε προς τα δεξιά, και η συντεταγµένη y αυξάνει καθώς κινείστε προς τα κάτω, όπως φαίνεται στο Σχήµα. Οι Χ και Υ ιδιότητες ενός ImageSprite δηλώνουν πού θα πρέπει να είναι η επάνω αριστερή γωνία του, έτσι στο σχήµα ο πάνω αριστερά τυφλοπόντικας έχει τιµές Χ και Υ (0,0). 18

19 ηµιουργία της MoveMole Για να προσδιοριστούν οι µέγιστες διαθέσιµες τιµές Χ και Υ έτσι ώστε ο τυφλοπόντικας να κινείται µέσα στην οθόνη, θα πρέπει να κάνουν χρήση των ιδιοτήτων πλάτος και ύψος του Moleκαι του MyCanvas.. (Όταν δηµιουργήσατε το MyCanvas, ορίσατε το ύψος του σε 300 pixels και πλάτος του όλη η οθόνη.) Αν ο τυφλοπόντικας έχει 36 pixels πλάτος και ο καµβάς έχει 200 pixels πλάτος, η συντεταγµένη x της αριστερής πλευράς του τυφλοπόντικα µπορεί να είναι το λιγότερο 0 και το περισσότερο 164 (200-36, ή My Canvas.Width - Mole.Width). Οµοίως, η συντεταγµένη y από την κορυφή του τυφλοπόντικα µπορεί να κυµαίνεται από 0 έως MyCanvas.Height - Mole.Height. 19

20 ηµιουργία της MoveMole Ξεκινήστε µε τη MoveMole: Στο Blocks Editor, µέσα στην οµάδα Built-in, επιλέξτε Procedures. Σύρετε µια διαδικασία (Procedure)στο µπλοκ και να αλλάξετε την λέξη procedure procedure" σε "MoveMole". Εδώ θα πρέπει να χρησιµοποιήσετετη τη : procedure then do. 20

21 Το µπλοκ tomovemoleέχει µια υποδοχή µε την ένδειξη do". Εδώ µπορείτε να βάλετε τις δηλώσεις για τη διαδικασία. Σε αυτή την περίπτωση θα υπάρχουν δύο δηλώσεις: µία δήλωση που θα ορίζει τη νέα τυχαία θέση x του τυφλοπόντικα πάνω στον καµβά. Επιλέγουµε το µπλοκ set Mole x to. και µια για να ορίζει τη νέα τυχαία θέση y του τυφλοπόντικα πάνω στον καµβά. Επιλέγουµε το µπλοκ set Mole y to. 21

22 ηµιουργία της MoveMole Για να τοποθετήσετε τυχαία τον τυφλοπόντικα, θα πρέπεινα επιλέξετε µια τυχαία συντεταγµένη x στο εύρος από 0 έως Canvas1.Width - Mole.Width. Οµοίως, θα γίνει γιατη συντεταγµένη y που θα είναι στην κλίµακα από 0 έως Canvas1.Height - Mole.Height. Μπορούµε να παράγουµεέναν τυχαίο αριθµό, µέσω του µπλοκ random fraction, που βρίσκεται στην οµάδα Math. Από αυτή την οµάδα θα χρειαστούµε επίσης το µπλοκ του πολλαπλασιασµού και της αφαίρεσης. 22

23 Για να καθορίσετε ότι ηνέα συντεταγµένη x για το Μole πρέπει να είναι µεταξύ 0 και Canvas1.Width- Mole.Width, όπως συζητήθηκε νωρίτερα: Κάντε κλικ στην οµάδα Math. Επιλέξτε το µπλοκ του πολλαπλασιασµού. Επιλέξτε το µπλοκ και βάλτε το στην πρώτη κενή θέση του µπλοκ του πολλαπλασιασµού. Επιλέξτε το µπλοκ της αφαίρεσης και βάλτε το στη 2 η θέση του µπλοκ του πολλαπλασιασµού. Στην πρώτη θέση της αφαίρεσης βάλτε το µπλοκ Canvas1.Width και στη 2 η το µπλοκ Mole.Width 23

24 Για να καθορίσετε ότι ηνέα συντεταγµένη y για το Μole πρέπει να είναι µεταξύ 0 και Canvas1.Height- Mole.Height, όπως συζητήθηκε νωρίτερα: Κάντε κλικ στην οµάδα Math. Επιλέξτε το µπλοκ του πολλαπλασιασµού. Επιλέξτε το µπλοκ και βάλτε το στην πρώτη κενή θέση του µπλοκ του πολλαπλασιασµού. Επιλέξτε το µπλοκ της αφαίρεσης και βάλτε το στη 2 η θέση του µπλοκ του πολλαπλασιασµού. Στην πρώτη θέση της αφαίρεσης βάλτε το µπλοκ Canvas1.Height και στη 2 η το µπλοκ Mole.Height 24

25 ηµιουργία της ΜyCanvas.Touched Όπως ίσως θυµάστε, έχετε δηµιουργήσει δύο ετικέτες, HitsCountsLabelκαι MissesCountsLabel,, που είχαν αρχικές τιµές 0. Θα θέλαµε να αυξάνονται οι αριθµοί σε αυτές τις ετικέτες κάθε φορά που ο χρήστης αγγίζει µε επιτυχία το Μole (ένα χτύπηµα) ή χτυπά την οθόνη χωρίς να αγγίξει το Μole (αστοχία). Για να γίνει αυτό,, θα χρησιµοποιήσουµε το ΜyCanvas.Touchedµπλοκ, που δείχνει ότι κάποιος άγγιξε τον καµβά. Μας ενδιαφέρει η παράµετρος touchedspriteπου δείχνει αν άγγιξαν ένα sprite. Θέλουµε κάθε φορά που ο καµβάς αγγιχτεί, να ελέγχεται αν αγγίχτηκε ένα sprite. εδοµένου ότι υπάρχει µόνο ένα sprite στο πρόγραµµά µας, θα πρέπει να είναι το Mole. Αν αγγίζεται το Mole, προσθέστε ένα στον αριθµό του HitsCountLabel.Text, αλλιώς να προστίθεται ένα στο MissesCountLabel.Text. Παραδείση Αρτεµις 25

26 ηµιουργία της ΜyCanvas.Touched Εδώ είναι πώς να δηµιουργήσετε το µπλοκ : 1. Κάντε κλικ στο MyCanvasκαι σύρετε έξω MyCanvas.Touched. 2. Κάντε κλικ στο Control, και σύρετε έξω if else,, ( θα πρέπει να προσθέσετε το µπλοκ elseµετά τη µετακίνησή του if thenστο χώρο εργασίας), και τοποθετήστε το µέσα στο MyCanvas.Touched. 26

27 ηµιουργία της ΜyCanvas.Touched Κάντε κλικ στο Variables,, και σύρετε ένα µπλοκ get και επιλέξτε touchedsprite από το µενού. 27

28 ηµιουργία της ΜyCanvas.Touched Επειδή θέλουµε το HitsCountLabel.Text t να αυξάνεται αν η δοκιµή πέτυχε ( αν το Μole χτυπήθηκε ) : 1. Από το HitsCountLabel, σύρετε το µπλοκ set HitsCountLabel.Text to,, βάζοντας στα δεξιά του "then-do." 2. Κάντε κλικ στο Mathκαι σύρετε ένα σύµβολο συν ( + ), τοποθετώντας το στην υποδοχή "to". 3. Κάντε κλικ στο HitsCountLabel,, και σύρετε το µπλοκ HitsCountLabel.Text. Τοποθετήστε τοστα αριστερά του σηµείου συν. 4. Κάντε κλικ στο Mathκαι σύρετε το µπλοκ 0 στα δεξιά του σηµείου συν. Κάντε κλικ στο 0 και αλλάξτε το σε 1. 28

29 ηµιουργία της ΜyCanvas.Touched Επαναλάβετε το βήµα 4 για το MissesCountLabel στο "else-do" do"του µπλοκ if else. 29

30 Κλήση της MoveMole όταν ανοίγει η εφαρµογή Από το Screen1, σύρετε έξω το Screen1.Initialize. Από το Procedures, σύρετε τοµπλοκ callmovemole. Τοποθετήστε το στο Screen1.Initialize. 30

31 Κλήση MoveMole κάθε δευτερόλεπτο Κάνοντας το mole κινηθεί κάθε δεύτερος θα απαιτήσει το στοιχείο Ρολόι. Αφήσαµε TimerInterval ιδιοκτησίας Clock1 κατά προκαθορισµένη τιµή του 1,000 (χιλιοστά του δευτερολέπτου), ή 1 δευτερόλεπτο. Αυτό σηµαίνει ότι κάθε δευτερόλεπτο, ό, τι ορίζεται σε ένα µπλοκ Clock1.Timυµεer θα λάβει χώρα. Εδώ είναι πώς να καθιερώσει κάτι τέτοιο: Κάντε κλικ στο συρτάρι Clock1 και σύρετε έξω Clock1.Timer. Κάντε κλικ στο συρτάρι ιαδικασίες και σύρετε ένα µπλοκ MoveMole κλήση στο µπλοκ Clock1.Timer, όπως φαίνεται στο Σχήµα 3-7. Το επόµενο βήµα είναι να κάνουµε το Μoleνα συνεχίσει να κινείται.. Εδώ είναι όπου θα χρησιµοποιήσετε το µπλοκ when MoleTimer.Timer πουέχει ένα πρόγραµµα χειρισµού συµβάντων που ονοµάζεται when... Timer που προκαλεί επανάληψη συµβάντων κατά χρονικά διαστήµατα που ορίζονται από την TimerInterval. Ρυθµίστε το MoleTimerνα καλέσει τη διαδικασία MoveMoleκάθε φορά που πυροδοτείται το χρονόµετρο. 31

32 Προσθέστε ένα χειριστή συµβάντων Mole Touch Είπαµε προηγουµένως ότι θέλουµε η συσκευή να δονείται όταν αγγιχτεί το Μole,, κάτι που µπορούµε να κάνουµε µε τα µπλοκ when Mole.Touchedκαι Noise.Vibrate. 32

33 Επαναφορά του Σκορ Αυτό που χρειαζόµαστε είναι ένα µπλοκ ResetButton.Clickπου θέτει τις τιµές των HitsCountLabel.Text και MissesCountLabel.Text στο 0. 33

34 Εδώ είναι µερικές ιδέες για τις προσθήκες στο MoleMash: 1. Προσθέστε κουµπιά για να αφήνετε το χρήστη να κάνει το Μole να κινηθεί πιο γρήγορα ή πιο αργά. 2. Προσθέστε ένα δεύτερο ImageSprite µε µια εικόνα που ο χρήστης δεν θα πρέπει να χτυπήσει,, όπως π.χ... ένα λουλούδι.. Εάν ο χρήστης το αγγίξει, να τιµωρείται µε τη µείωση του σκορ ή τη λήξη του αγώνα. 3. Αντί να χρησιµοποιεί µια εικόνα ενός Μole, να επιτρέπεται στο χρήστη να επιλέξει µια εικόνα µε το στοιχείο ContactPicker. 34