App Inventor: Διδασκαλία Προγραμματισμού με Δημιουργία Εφαρμογών για Κινητές Συσκευές

Φύλλο εργασίας 1 –

Δραστηριότητα

Στόχος της δραστηριότητας είναι η εξοικείωση των μαθητών με την έννοια της δομής

επιλογής σε συνδυασμό με την χρήση λογικών συνθηκών.

ΔΡΑΣΤΗΡΙΟΤΗΤΑ : ΠΙΑΣΕ ΤΗ ΜΠΑΛΑ

ΠΕΡΙΓΡΑΦΗ ΕΦΑΡΜΟΓΗΣ

• Θα υλοποιήσουμε ένα παιχνίδι στο οποίο ο παίκτης θα χειρίζεται μια μπάλα.

Σκοπός του παιχνιδιού είναι να αγγίξει ο παίκτης τη μπάλα. Εάν ο παίκτης αγγίξει τη

μπάλα, τότε κερδίζει ... πόντους και η ταχύτητα της μπάλας αυξάνεται. Εάν ο παίκτης

αγγίξει την πίστα, αλλά όχι τη μπάλα, τότε χάνει ... ζωές.

Το σκορ ενδεικτικά θα μπορούσε να προκύπτει π.χ. κερδίζοντας 1 πόντο για κάθε εύστοχο

άγγιγμα και χάνοντας μία ζωή για κάθε άστοχο άγγιγμα.

• Όταν πατηθεί το πλήκτρο "Start/Reset" μηδενίζεται το σκορ για την εκκίνηση ενός

νέου παιχνιδιού.

• Επίσης, με τη βοήθεια ενός αισθητήρα προσανατολισμού (Orientation Sensor)

πρέπει κάθε φορά που αλλάζει ο προσανατολισμός της συσκευής να προσαρμόζουμε την

κατεύθυνση (heading) της εικόνας της μπάλας.

ΒΑΣΙΚΕΣ ΕΝΝΟΙΕΣ

• Υποπρόγραμμα - διαδικασία (procedure).

• Μεταβλητές (variables)

• Εντολή επιλογής if ... else if ... (Αν ... Αλλιώς Αν ...).

• Αισθητήρας ανίχνευσης προσανατολισμού της συσκευής.

Βήμα 1

Δημιουργία νέου project και ρυθμίσεις οθόνης

Ξεκινώντας, δημιουργούμε ένα καινούργιο project με όνομα CatchTheBall. Αρχικά, το

μοναδικό διαθέσιμο συστατικό της εφαρμογής είναι η οθόνη (Screen 1) και θα χρειαστεί

να μεταβάλλουμε κάποιες από τις ιδιότητές της.

επιλέγουμε το αντικείμενο Screen1 μεταβάλλουμε τις ιδιότητες

Screen Orientation: Portrait

Scrollable: No

Title:Χτύπα τη μπάλα

Βήμα 2

Προσθήκη των απαραίτητων αρχείων πολυμέσων

Ας προσθέσουμε στο project μας τα αρχεία εικόνας και τους ήχους που θα χρησιμοποιεί η

εφαρμογή μας. Επισκεφθείτε τη διεύθυνση https://drive.google.com/?

tab=Xo&authuser=0#folders/0BwA8BQjAnmXsNFljZ09WMXQ5X3M

σύντομη περιγραφή

ανεβάζουμε το αρχείο με όνομα Εικόνα φόντου

real_grass_background.png

Soccer_Ball_small.png Γραφικό μπάλας

music.mid Μουσική που αναπαράγεται

κατά τη διάρκεια του παιχνιδιού

click.wav Ήχος εύστοχου αγγίγματος της μπάλας

explosion.wav Ήχος 5 άστοχων αγγιγμάτων της μπάλας, οπότε

έχουν χαθεί όλες οι ζωές και ο παίκτης πρέπει να ξεκινήσει νέο παιχνίδι.

Βήμα 3

Προσθήκη αντικειμένων στο γραφικό περιβάλλον

Θα χρειαστούμε το αντικείμενο του καμβά, πάνω στο οποίο θα εμφανίζεται η μπάλα.

Επιπλέον, θα προσθέσουμε το γραφικό (ImageSprite) της μπάλας, τρία αντικείμενα Player

για την αναπαραγωγή των ηχητικών εφέ. Επίσης θα χρειαστούμε δύο ετικέτες (Label) για

τους πόντους και τις ζωές και ένα κουμπί εκίνησης του παιχνιδού (Start/Reset Button).

Τέλος θα χρειαστούμε και τον αισθητήρα προσανατολισμού (Orientation Sensor).

από την ομάδα μεταφέρουμε το αντικείμενο του δίνουμε το όνομα μεταβάλλουμε

τις ιδιότητες

Layout Horrizontal Arrangement ScoreLivesArea AlignHorizontal: Center

Width: Fill Parent

UserInterface Label ScoreLabel BackgroundColor: Orange

FontSize: 9.0

Text: Σκορ : 0

TextAlignment:Center

Width:100 pixels

Height:30 pixels

UserInterface Button StartResetButton BackgroundColor:Cyan

FontSize:10.0

Text: Start/Reset

TextAlignment: Center

Width:100 pixels

Height:30 pixels

UserInterface Button StartResetButton BackgroundColor:Cyan

FontSize: 10.0

Text: Start/Reset

TextAlignment: Center

Width:100 pixels

Height:30 pixels

UserInterface Label LivesLabel BackgroundColor: Orange

FontSize: 9.0

Text: Ζωές : 5

TextAlignment:Center

Width:100 pixels

Height:30 pixels

Drawing and Animation Canvas GameCanvas Backgroundlmage :

real_grass_background.png

Width : Fill Parent

Height : Fill Parent

Drawing and Animation ImageSprite BallSprite Picture :Soccer_Ball_small.png

Width : 40 pixels

Height : 40 pixels

Media Player SoundPlayer Source: music.mid

Sensors Orientation Sensor GameSensor

Media Player ScorePlayer Source: click.wav

Media Player LostPlayer Source: explosion.wav

Βήμα 4 Αρχική θέση μπάλας

Πρώτα απ' όλα θα υλοποιήσουμε μία διαδικασία, που θα αναπαράγει τη μουσική του

παιχνιδιού και θα περιγράφει τη τυχαία κίνηση της μπάλας.

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

μέσα στα όρια του καμβά, φυσικά. Έτσι καλούμε τη διαδικασία MoveBall

Βήμα 5

Τυχαία κίνηση της μπάλας όταν αυτή ακουμπήσει στα άκρα του καμβά

Επίσης όταν η μπάλα αγγίζει κάποια από τις 4 πλευρές του καμβά θέλουμε να κάνει πάλι τυχαία

κίνηση.

Βήμα6 Μετακίνηση μπάλας με τη βοήθεια του αισθητήρα

Όταν η κινητή μας συσκευή αλλάζει προσανατολισμό θα πρέπει η μπάλα να μετακινείται προς την

κατεύθυνση που «έστριψε» και η συσκευή.

Για να το πετύχουμε αυτό θα χρησιμοποιήσουμε καταρχήν το γεγονός αλλαγής κατεύθυνσης του

αισθητήρα προσανατολισμού.

Βήμα7 Εύστοχο και άστοχο χτύπημα της μπάλας

Όταν έχουμε ένα εύστοχο χτύπημα της μπάλας τότε ακούγεται ο ήχος εύστοχου αγγίγματος της

μπάλας, ο παίκτης κερδίζει ένα πόντο και η ταχύτητα της μπάλας αυξάνεται κατά 10. Όταν

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

μπάλα )τότε ο παίκτης χάνει μία ζωή. Γι' αυτό το λόγο αρχικοποιούμε τρείς μεταβλητές speed,

points και lives σε 10, 0, 5 αντίστοιχα.

Στη συνέχεια αν έχουμε εύστοχο άγγιγμα της μπάλας, ο παίκτης κερδίζει ένα πόντο και η ταχύτητα

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

παίκτης χάνει μια ζωή. Αν ο παίκτης χάσει και τις 5 ζωές τότε εμφανίζεται το μήνυμα "Λυπάμαι...

Έχασες" και η μπάλα εξαφανίζεται. Παράλληλα ακούγεται ο ήχος explosion.wav που σημαίνει ότι

ο παίκτης έχει χάσει και πρέπει να πατηθεί το κουμπί Start/Reset για να ξεκινήσει το παιχνίδι.

Βήμα8 Ενέργειες με το πάτημα του κουμπιού Start/Reset

Όταν πατηθεί το κουμπί Start/Reset τότε το παιχνίδι θα ξεκινήσει. Άρα θα κάνουμε ξανά

αρχικοποιήσεις στις μεταβλητές points, speed και lives. Η μεταβλητή points θα γίνει 0 και το Σκορ

στο ScoreLabel.Text θα μηδενιστεί. Η μεταβλητή lives θα γίνει 5 και οι Ζωές στο LivesLabel.Text

θα γίνουν 5. Επίσης η εικόνα της μπάλας θα εμφανιστεί ξανά.