Παιχνίδι μνήμης με εικόνες

 

Φύλλο Εργασίας

 

Τίτλος: Παιχνίδι μνήμης με εικόνες

Γνωστικό Αντικείμενο: Εφαρμογές Πληροφορικής-Υπολογιστών

Διδακτική Ενότητα: Διερευνώ - Δημιουργώ – Ανακαλύπτω, Συνθετικές εργασίες. Δημιουργικές δραστηριότητες με χρήση πακέτων λογισμικού, προγραμματιστικών εργαλείων, υπηρεσιών του Internet, εκπαιδευτικού λογισμικού

Τάξη: B΄Λυκείου

Διάρκεια: 5 ώρες

 

 

Δραστηριότητα 1: « Παιχνίδι μνήμης με εικόνες»

 

Στην εργασία αυτή θα σας δοθεί η ευκαιρία να κατασκευάσετε ένα γνωστό παιχνίδι μνήμης. Η οθόνη δράσης περιλαμβάνει έναν πίνακα χωρισμένο σε 16 κελιά. Τα κελιά αυτά περιέχουν εικόνες από διάφορα κοχύλια. Κάθε κοχύλι επαναλαμβάνεται δύο φορές, σε τυχαία σημεία. Οι απεικονίσεις είναι καλυμμένες αρχικά (Εικόνα 17 - 1) και μόνο όταν ο χρήστης κάνει κλικ με το ποντίκι σε κάποιο κελί αποκαλύπτει την κρυμμένη εικόνα.

 

Σκοπός είναι με δύο συνεχείς “αποκαλύψεις” να εμφανιστούν δύο ίδιες εικόνες, οπότε και παραμένουν ανοιχτές (Εικόνα 17 - 2). Αν δεν επιτευχθεί αυτό, τα κελιά κλείνουν και πάλι. Ο χρήστης, πρέπει να θυμάται τις θέσεις των εικόνων που έχει ανοίξει ώστε κάθε φορά που ανοίγει κάποια να αναζητά το ζευγάρι της. Αν η μνήμη του είναι δυνατή, σύντομα θα καταφέρει να ανακαλύψει όλα τα ζεύγη και να τερματίσει έτσι το παιχνίδι.

 

Εικόνα 17 - 1

 

Εικόνα 17 - 2

 

 

 

 

 

Βήμα 1ο

 

Οι κλάσεις

 

Στο αρχείο eikones.zip θα βρείτε όλες τις εικόνες που θα χρειαστείτε για τη δημιουργία του παιχνιδιού.

 

Καταγράψτε στον παρακάτω πίνακα τους πράκτορες που απαιτεί η συγκεκριμένη εφαρμογή, τις πιθανές απεικονίσεις τους και ένα σύντομο σχόλιο για τη λειτουργία τους.

 

Πίνακας 12

ΠΡΑΚΤΟΡΑΣ

ΑΠΕΙΚΟΝΙΣΗ

ΛΕΙΤΟΥΡΓΙΑ

 

 

 

 

 

 

 

 

 

 

 

 

 

Βήμα 2ο

 

Οι πράκτορες

 

Ενεργοποιήστε το πρόγραμμα Agentsheets και δημιουργήσετε ένα νέο έργο (Αρχείο->Νέο Έργο) με το όνομα Memory. Ορίστε το μέγεθος των πρακτόρων 100x100.

 

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

 

Δημιουργείστε έπειτα τους πράκτορες που αποφασίσατε στο Βήμα1. Ο πίνακας του παιχνιδιού θα αποτελείται από 16 εικόνες ανα δύο ίδιες μεταξύ τους. Ορίστε  τις απαραίτητες για κάθε πράκτορα απεικονίσεις και ονομάστε τις κατάλληλα. Με Επεξεργασία απεικόνισης και Εισαγωγή Εικόνας δώστε μορφή στις απεικονίσεις χρησιμοποιώντας τις Εικόνες του φακέλου που αναφέρεται στο Βήμα 1.

Εναλλακτικά, μπορείτε να σχεδιάσετε μόνοι σας τις απεικονίσεις με τα σχεδιαστικά εργαλεία ή ακόμη και να δημιουργήσετε εικόνες στη Ζωγραφική και έπειτα να τις εισάγετε.

Στην Εικονοθήκη Πρακτόρων φαίνονται τώρα όλοι οι Πράκτορες με τις απεικονίσεις   τους (Εικόνα 17 - 3).                  

Εικόνα 17 - 3

 

Βήμα 3ο

 

Το πεδίο εργασίας

 

Δημιουργήστε ένα νέο πεδίο εργασίας και με Αρχείο->Φορτωμα Φόντου εισάγετε το φόντο που υπάρχει στο φάκελο με τις εικόνες. Στη συνέχεια χρησιμοποιώντας το εργαλείο εισαγωγής πράκτορα,(μολύβι), τοποθετήστε στο πεδίο τους απαραίτητους πράκτορες. Δημιουργήστε έναν πίνακα εικόνων 4x4 (Εικόνα 17 - 4) και τοποθετήστε πάνω από κάθε εικόνα έναν πράκτορα κάλυμμα (Εικόνα 17 - 5).

 

Εικόνα 17 - 4

 

Εικόνα 17 - 5

 

Τέλος, με Αρχείο->Αποθήκευση, αποθηκεύεστε το έτοιμο πεδίο Εργασίας με το όνομα memory0.

 

 

 

Βήμα 4ο

 

Αποκάλυψη των κρυμμένων εικόνων

 

Σε πρώτη φάση το μόνο που θέλουμε να γίνεται είναι με κλικ επάνω σε πράκτορα Κάλυμμα να εμφανίζεται η εικόνα που κρύβει από κάτω.

Η συμπεριφορά αυτή ανήκει στον πράκτορα Κάλλυμα. Επιλέξτε τον πράκτορα αυτόν και έπειτα Επεξεργασία συμπεριφοράς.

Ποιος θα είναι ο Ενεργοποιητής της μεθόδου; Ποιες οι συνθήκες του κανόνα και ποιες οι δράσεις;

Με δεξί κλικ στην ετικέτα της και Αλλαγή ενεργοποιητή->Ποντίκι ορίζουμε ότι η μέθοδος θα καλείται όποτε ο πράκτορας Κάλυμμα δέχεται κλικ. Η μέθοδος στερείται συνθηκών και η δράση της είναι προφανώς τύπου εξαφανίζω(τον εαυτό μου, δηλαδή το Κάλυμμα που έχει επιλεγεί).

Με run δοκίμάστε τη λειτουργία του κώδικα.

Μετά από τη δοκιμή αυτή είναι πιο εύκολο να δρομολογήσετε τις επόμενες κινήσεις σας. Θα πρέπει όποτε ανοίγουν δύο συνεχόμενα καλύμματα να γίνεται σύγκριση των εικόνων και αν είναι διαφορετικές να κλείνουν και πάλι.

 

Βήμα 5ο

 

Σύγκριση ανοιχτών Εικόνων

 

Πώς μπορεί ο υπολογιστής να “δει” αν οι δύο Εικόνες που αποκαλύφθηκαν είναι ίδιες μεταξύ τους;

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

Είναι γνωστό ότι υπάρχει προκαθορισμένη συνθήκη αν είναι η ιδιότητα .. ίση με..  για σύγκριση αριθμητικών τιμών.

Προσανατολιστείτε στην απόδοση μίας μοναδικής αριθμητικής τιμής σε κάθε Εικόνα. Έτσι, δύο ίδιες μεταξύ τους Εικόνες θα έχουν ίδια τιμή και θα μπορούν να αναγνωριστούν από τον υπολογιστή ως ζευγάρι.

Θα προγραμματίσετε τώρα μία μέθοδο για την απόδοση αυτή. Αυτή θα προστεθεί φυσικά στις συμπεριφορές του πράκτορα Εικόνα. Οι συνθήκες της μεθόδου είναι τύπου δω, ενώ οι δράσεις είναι τύπου θέτω την ιδιότητα..ίση με...Το δε πλήθος των κανόνων της μεθόδου είναι ίσο με το πλήθος των διαφορετικών Εικόνων. Η μέθοδος αυτή(initialize) φαίνεται στην Εικόνα 17 - 6.

Εικόνα 17 - 6

 

Ξεκαθαρίστε στο μυαλό σας ότι η μεταβήτή value είναι μεταβλητή πράκτορα και όχι προσομοίωσης.

Πού και πότε θα καλείται αυτή η αρχικοποίηση;

Η απάντηση είναι προφανώς κατά τη λείτουργία, όμως υπό συνθήκη. Αν την καλέσουμε σε μία μέθοδο που εκτελείται «Κατά τη λειτουργία», χωρίς συνθήκη τότε θα εκτελείται ασταμάτητα. Χρειάζεται μία μεταβλητή, πράκτορα και πάλι, που θα ενημερώνει για τον αν ο πράκτορας έχει πάρει τιμή ή όχι και μόνο στην περίπτωση αρνητικής απάντησης θα εκτελεί τη μέθοδο initialize.

Επανερχόμαστε στις συμπεριφορές του πράκτορα Εικόνα. Δημιουργήστε μία μέθοδο με ενεργοποιητή «Κατά τη λειτουργία». Έχοντας κατά νου όλα τα παραπάνω συμπληρώστε τα πεδία συνθηκών και δράσεων (Εικόνα 17 - 7).

Εικόνα 17 - 7

Η μεταβλητή set είναι η “πληροφοριακή” μεταβλητή που περιγράφηκε παραπάνω και δηλώνει αν ένας πράκτορας Εικόνα έχει πάρει αριθμητική τιμή (set=1) ή όχι (set=0).

 

Κάνετε έλεγχο  της παραπάνω υλοποίησης. Επιλέξτε run, εξαφανίστε με το ποντίκι κάποιο κάλυμμα για να αποκτήσετε πρόσβαση σε πράκτορα Εικόνα, έπειτα επιλέξτε τον τελευταίο και Εργαλεία->Ιδιότητες Πράκτορα για να ελέγξετε τη τιμή της μεταβλητής value (Εικόνα 17 - 8).

Εικόνα 17 - 8

 

 

 

 

Βήμα 6ο

 

Προσπέλαση ανοιχτών  Εικόνων

 

Πώς όμως θα γίνεται η προσπέλαση της ανοιχτής Εικόνας, ώστε να πάρουμε την τιμή της;

Πρέπει να αποδώσετε στους πράκτορες Εικόνα μια μεταβλητή πράκτορα που να δηλώνει την κατάστασή τους. Η μεταβλητή αυτή θα ονομαστεί open. Αν ένας πράκτορας Εικόνα είναι καλυμμένος, η open θα έχει τιμή 0. Αν ανοίξει για να ελεγχθεί θα έχει τιμή open=1. Αν έχει παραμείνει ανοιχτός επειδή έχει ήδη ελεγχθεί και βρέθηκε με το ζευγάρι του έχει open=2.

Θα αλλάξετε τώρα τη μέθοδο του πράκτορα Κάλυμμα που ενεργοποιείται με το κλικ του ποντικιού με τρόπο ώστε: στο πρώτο κλικ να θέτει σε όλες τις εικόνες open=1 (μέθοδος open), έπειτα να θέτει στις κλειστές open=0 (μέθοδος check_for_closed), τέλος να αποδίδει σε μια μεταβλητή προσομοίωσης (value1) την τιμή της Εικόνας που άνοιξε (μέθοδος check1).

Στο δεύτερο κλικ, να θέτει σε όλες τις εικόνες open=1, έπειτα να θέτει στις κλειστές open=0, να αποδίδει σε μια δεύτερη μεταβλητή προσομοίωσης  (value2) την τιμή της Εικόνας που άνοιξε (μέθοδος check2) και τέλος να κάνει τη σύγκριση (μέθοδος compare).

Για να γίνεται διάκριση μεταξύ πρώτου και δεύτερου κλικ, χρησιμοποιείται η μεταβλητή προσομοίωσης turn. Αν turn=0, είναι το πρώτο κλικ, αν turn=1 πρόκειται για το δεύτερο.

Θα χρησιμοποιήσετε δράσεις τύπου  Εκπέμπω και Κάνω, θα προγραμματίσετε την κλήση μεθόδων για τα παραπάνω και έπειτα θα προγραμματίσετε τις ίδιες (Εικόνα 17 -9).

 

 

 

 

 

 

 

 

 

Εικόνα 17 - 9

 

 

 

 

 

 

 

 

 

 

 

 

Βήμα 7ο

 

Προγραμματισμός μεθόδων  Open, check_for_closed, check1, check2, compare

 

Τώρα θα προγραμματίσετε τις μεθόδους που καλούνται στη μέθοδο της Εικόνας 9.  Συγκεκριμένα στον πράκτορα Εικόνα έχουμε  τις μεθόδους Open, check_for_closed, check1 και check2 και στον πράκτορα Κάλυμμα τη μέθοδο compare. Θυμηθείτε ότι η μέθοδος Open σε συνδυασμό με την check_for_closed (Εικόνα 17 - 10)  προκαλεί  έμμεση προσπέλαση της ανοιχτής κάθε φορά Εικόνας. Θυμηθείτε επίσης το ρόλο της μεταβλητής open (0-κλειστό,1-ανοιχτό προς έλεγχο, 2-ανοιχτό και ήδη ελεγμένο).

 

Εικόνα 17 - 10

 

 

 

 

 

 

 

 

Οι μέθοδοι check1 και check2 (Εικόνα 17 - 11) εντοπίζουν τις ανοιχτές Εικόνες και δεσμεύουν τις χαρακτηριστικές τιμές τους στις μεταβλητές προσομοίωσης value1 και value2 αντίστοιχα.

 

Οι μέθοδοι αυτές εκτελούνται από όλες τις Εικόνες αφού καλούνται μέσω της δράσης Εκπέμπω με το κλικ σε κάλυμμα. Η συνθήκη open=1, όμως λειτουργεί σαν φίλτρο και μόνο για την ανοιχτή εικόνα γίνεται η απόδοση της τιμής. Εμφανίζεται και μία νέα μεταβλητή, η checked. Αυτή χρησιμοποιείται γιατί στο δεύτερο άνοιγμα, υπάρχει ήδη ανοιχτή μία Εικόνα (οpen=1), αλλά θέλουμε την τιμή της δεύτερης. Έτσι όποτε γίνεται δέσμευση της τιμής μιας ανοιχτής Εικόνας αυτή “τσεκάρεται” (checked=1), ώστε να μην ελεγχθεί ξανά.

 

Εικόνα 17 - 11

 

Η μέθοδος compare (Εικόνα 17 - 12) του πράκτορα Κάλυμμα παίρνει τις τιμές value1 και value2, και τις συγκρίνει. Ανάλογα με το αποτέλεσμα της σύγκρισης αυτής Εκπέμπει στους Πράκτορες Εικόνα μεθόδους για το τι πρέπει να κάνουν(Να παραμείνουν ανοιχτές(μέθοδος correct), ή να κλείσουν (μέθοδος close)).

Εικόνα 17 - 12

 

Η μέθοδος correct (Εικόνα 17 - 13) ελέγχει στη συνθήκη της ποιες Εικόνες έχουν ελεγχθεί και θέτει την ιδιότητα open=2,για να δηλώσει με αυτόν το τρόπο ότι το ζευγάρι έχει εντοπιστεί.

 

Εικόνα 17 - 13

 

Η μέθοδος close τώρα, (Εικόνα 17 - 14), τοποθετεί και πάλι Κάλυμμα στις ανοιχτές Εικόνες και θέτει  τις ιδιότητες checked και open ίσες με μηδέν για να μπορούν να ελεγχθούν σε άλλη προσπάθεια του χρήστη.

 

 

 

 

Εικόνα 17 - 14

 

Βήμα 8ο

 

Βελτιώσεις της εφαρμογής

 

Στο βήμα αυτό μπορείτε να κάνετε βελτιώσεις της εφαρμογής.

Η περισσότερο προφανής αδυναμία στην υπάρχουσα υλοποίηση είναι η στατικότητα, με την έννοια ότι ο χρήστης παίζει συνεχώς στο ίδιο ταμπλό. Αυτό που θέλουμε να επιτύχουμε μέχρι το τέλος αυτού του βήματος είναι η δυνατότητα νέου παιχνιδιού. Θα προστεθεί δηλαδή ένα κουμπί με τίτλο “Νέο παιχνίδι”, το οποίο θα αλλάζει τυχαία τις θέσεις των εικόνων, θα τις εμφανίζει για πολύ μικρό διάστημα και θα τις καλύπτει ξανά, ώστε να ετοιμάζει τον πίνακα για εκκίνηση νέου παιχνιδιού.

 

Ποια δράση μπορεί να “ανακατέψει” τις Εικόνες;

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

Φαίνεται τώρα η ανάγκη δημιουργίας ενός νέου πράκτορα που θα μπει πίσω από τις εικόνες για να κινούνται πάνω σε αυτόν κατά το ανακάτεμμα.

Δημιουργήστε αυτόν τον πράκτορα, Φόντο, και δώστε του απλά ένα χρώμα.

Δημιουργήστε επίσης έναν πράκτορα, Επανεκκίνηση, που θα χρησιμοποιηθεί σαν κουμπί για νέο παιχνίδι. Για την απεικόνισή του μπορείτε είτε να εισάγετε έτοιμη την εικόνα από τον φάκελο είτε να τη σχεδιάσετε οι ίδιοι (Εικόνα 17 - 15).

 

Εικόνα 17 - 15

 

Αν τώρα αφήσετε τον πίνακα με τις 16 θέσεις ως έχει και βάλετε πίσω από κάθε Εικόνα έναν πράκτορα Φόντο, η κλήση της δράσης Μετακινούμαι Τυχαία δεν θα έχει κανένα αποτέλεσμα, γιατί δεν υπάρχει “χώρος” για μετακίνηση. Κάθε εικόνα βλέπει στις γειτονικές της θέσεις πράκτορες τύπου Εικόνα, οπότε δεν μετακινείται. Πρέπει κάποια θέση του πίνακα να καταληφθεί μόνο από έναν πράκτορα Φόντο. Αυτό όμως κάνει τις διαθέσιμες για εικόνες θέσεις 15 που είναι περιττός αριθμός και δεν εξυπηρετεί.

Δημιουργείστε Νέο Πεδίο Εργασίας και αποθηκεύεστε το με το όνομα memory1.

Σε αυτό δημιουργείστε νέο ταμπλό παιχνιδιού, που θα είναι πίνακας 5x5 και θα αποτελείται από τρία στρώματα. Το πρώτο θα έχει 25 πράκτορες τύπου Φόντο, το δεύτερο 24 Εικόνες (για το σκοπό αυτό προσθέστε στον πράκτορα Εικόνα άλλες 4 απεικονίσεις) και το τρίτο 24 πράκτορες Κάλυμμα (Εικόνα 17 - 16). Τοποθετήστε τέλος σε μία μεριά έναν πράκτορα κουμπί.

 

 

 

Εικόνα 17 - 16

Προσθέστε τώρα στη συμπεριφορά του πράκτορα Εικόνα μία μέθοδο που θα προκαλεί την τυχαία μετακίνηση (Εικόνα 17 - 17).

 

Εικόνα 17 - 17

 

Μεταφερθείτε  έπειτα στη συμπεριφορά του πράκτορα Επανεκκίνηση. Προσθέστε μέθοδο που ενεργοποιείται με το ποντίκι (Εικόνα 17 - 18).

 

Εικόνα 17 - 18

 

Με το πάτημα της επιλογής “Νέο Παιχνίδι” πρέπει να ανοίξουν για λίγο όλα τα καλλύματα, και έπειτα να κληθεί η randomize που προκαλεί την αλλαγή των θέσεων.

Η μέθοδος open του πράκτορα Κάλυμμα φαίνεται στην εικόνα 17 - 19.

 

Εικόνα 17 - 19

 

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

 

Η μέθοδος randomize (Εικόνα 17 - 20) εκπέμπει move_rand στον πράκτορα Εικόνα. Αν γίνει εκπομπή της move_rand μία φορά, μόνο μια εικόνα θα αλλάξει θέση, καθώς μία είναι αυτή που έχει σε γειτονική θέση Φόντο. Για να επιτύχουμε το σκοπό μας, θα αναγκάσουμε την randomize να εκτελείται 100 φορές. Αυτό επιτυγχάνεται με την μεταβλητή προσομοίωσης rand_times, η οποία αυξάνεται κατά ένα όποτε γίνεται μία κλήση των Εικόνων για μετακίνηση και αν είναι μικρότερη από 100, ξανακαλεί τη randomize (αναδρομή). Όταν η rand_times γίνει 100 έχουν εκτελεστεί 100 μετακινήσεις, επαληθεύεται μόνο  ο δεύτερος κανόνας της randomize και η rand_times μηδενίζεται για να είναι “καθαρή” για την επόμενο “Νέο παιχνίδι”. Τέλος, πρέπει εδώ να κλείσουν και πάλι τα καλύμματα και αυτό γίνεται με την close_icons που ορίζεται στον πράκτορα Εικόνα (Εικόνα 17 - 21). Η close_icons δημιουργεί Κάλυμμα πάνω από κάθε Εικόνα και επαναθέτει τις ιδιότητες open και checked ίσες με μηδέν, για να ξεκινήσει το νέο παιχνίδι.

 

Εικόνα 17 - 20

 

 

 

 

Εικόνα 17 - 21

 

Με Αρχείο->Άνοιγμα πεδίου Εργασίας επιλέξτε όποια έκδοση του παιχνιδιού θέλετε και δοκιμάστε την.