ΤΕΙ ΚΑΒΑΛΑΣ ΣΧΟΛΗ ΤΕΧΝΟΛΟΓΙΚΩΝ ΕΦΑΡΜΟΓΩΝ ΤΜΗΜΑ ΒΙΟΜΗΧΑΝΙΚΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ. Διαδικτυακό Παιχνίδι Αστυνομικού Περιεχομένου Crime Solving Web Game

Transcript

1 ΤΕΙ ΚΑΒΑΛΑΣ ΣΧΟΛΗ ΤΕΧΝΟΛΟΓΙΚΩΝ ΕΦΑΡΜΟΓΩΝ ΤΜΗΜΑ ΒΙΟΜΗΧΑΝΙΚΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ Διαδικτυακό Παιχνίδι Αστυνομικού Περιεχομένου Crime Solving Web Game ΔΙΠΛΩΜΑΤΙΚΗ ΕΡΓΑΣΙΑ Μουστάκας Ηλίας ΑΜ Λιούρας Πέτρος ΑΜ Επιβλέπων καθηγητής: Δρ. Μωυσιάδης Λευτέρης

2 Ευχαριστίες Η διπλωματική αυτή εργασία μας έδωσε την δυνατότητα να διευρύνουμε τους ορίζοντες μας πέραν από τα βασικά εργαλεία που διδαχτήκαμε. Γνωρίσαμε και από την πρακτική της πλευρά την έννοια του web design (δημιουργία ιστοσελίδας), τις δυσκολίες και τις ευκολίες που υπάρχουν γύρω από αυτήν. Πιστεύουμε πως άξιζε τον κόπο και είμαστε πεπεισμένοι πως μάθαμε πλέον πολύ περισσότερα απ όσα γνωρίζαμε αρχικά. Το αποτελέσμα μας χαροποιεί ιδιαίτερα. Θα θέλαμε να απευθύνουμε τις ευχαριστίες μας πρώτα απ όλα τους γονείς μας, οι οποίοι στήριξαν τις σπουδές μας με διάφορους τρόπους, φροντίζοντας για την καλύτερη δυνατή μόρφωση μας όλα αυτά τα χρόνια. Δεν θα μπορούσαμε βέβαια να παραλείψουμε τους συγγενείς και φίλους που μας στάθηκαν, βοήθησαν, ανέχτηκαν ο καθένας με τον τρόπο του. Που υπήρξαν το ευχάριστο διάλειμμα μας, όταν μετά από ώρες δουλειάς άρχισαν να «βαραίνουν» το μυαλό και τα χέρια μας. Τέλος, να ευχαριστήσουμε και τον καθηγητή μας κ. Ελευθέριο Μωυσιάδη που μας εμπιστεύτηκε το συγκεκριμένο θέμα και μας βοήθησε να το φέρουμε εις πέρας. 1

3 Περίληψη Στην παρούσα διπλωματική εργασία δημιουργήσαμε ένα Διαδικτυακό Παιχνίδι Αστυνομικού Περιεχομένου βασισμένο κυρίως σε κείμενο, με την ονομασία «One Step Ahead». Εντάσσεται σε μια ξεχωριστή κατηγορία παιχνιδιών, αυτή των Passive. Απαιτείται δηλαδή το πέρασμα του χρόνου για να ολοκληρωθεί. Δεν μπορεί ο χρήστης να καθίσει και να το ολοκληρώσει μονομιάς όπως για παράδειγμα γίνεται σε άλλα παιχνίδια. Ο χρήστης, αφού κάνει δημιουργία νέου λογαριασμού και επιβεβαιώσει τα στοιχεία του μέσω της ηλεκτρονικής του διεύθυνσης, παίρνει το ρόλο ενός αστυνομικού επιθεωρητή (ντετέκτιβ) ο οποίος αναλαμβάνει κάποιες εγκληματικές υποθέσεις. Υπάρχει ένας μεγεθυντικός φακός και ένα σημειωματάριο. Πατώντας τον φακό, ο οποίος εμφανίζεται κάθε 15 της ώρας, θα εμφανιστεί στο σημειωματάριο αν βρέθηκε κάποιο στοιχείο της υπόθεσης. Δεν είναι σίγουρο ότι θα εμφανίσει κάποιο στοιχείο, κι αυτό γιατί έχουμε υλοποιήσει έναν μηχανισμό πιθανοτήτων ώστε να μην είναι δυνατό να το βρίσκει με κάθε κλικ. Μετά από κάποια άγνωστη ώρα, μόλις ο χρήστης «ανακαλύψει» και τα 5 στοιχεία που απαιτούνται, καλείται να λύσει ένα μικρό παιχνίδι κουίζ. Μόλις το ολοκληρώσει επιτυχώς τότε αυτόματα θεωρείται πως έχει λύσει και την υπόθεση την οποία ανέλαβε. Αυτό γίνεται σειριακά, αφού τελειώσει με την πρώτη υπόθεση μεταβαίνει στην δεύτερη κ.ο.κ. Σύμμαχος του χρήστη θα πρέπει να είναι ο χρόνος και η τύχη. Το παιχνίδι απευθύνεται σε χρήστες ηλικίας 13 και άνω, γνώστες της αγγλικής γλώσσας και του χειρισμού ηλεκτρονικών υπολογιστών, που αρέσκονται στα αστυνομικά παιχνίδια και ο χρόνος τους είναι περιορισμένος. Δεν μπορούν δηλαδή να βρίσκονται συνεχώς καθηλωμένοι σε έναν υπολογιστή. Στη συνέχεια της διπλωματικής περιγράφουμε αναλυτικά κάποιες επιπλέον πληροφορίες του παιχνιδιού καθώς και το διαφορετικό είδος στο οποίο ανήκει. Επιπλέον, τα εργαλεία και οι γλώσσες προγραμματισμού που χρησιμοποιήθηκαν αλλά και για ποιο λόγο επιλέχθηκαν από εμάς. Τέλος, γίνονται εξαγωγές συμπερασμάτων, κάποιες προτάσεις βελτίωσης, και ένας εύχρηστος οδηγός για το πώς μπορούμε να φορτώσουμε το παιχνίδι σε κάποιο server. 2

4 Abstract The subject of this diploma thesis is the creation of an online investigation game, mostly based on text, which is called «One Step Ahead». It is part of a specific category of games, known as Passive. Unlike other types of games where the user can finish the game all at once in a very short time, with Passive games the passing of time is a necessary tool to complete the game. First of all, the user creates a new account and a confirmation is sent to his in order to confirm his account details. Then the user plays the role of a police detective who tries to solve a criminal case, with the help of a magnifying glass and a notebook. The magnifying glass can be used only every 15 minutes, which is when it appears. By clicking on it a clue might appear written on the notebook. A mechanism has been embedded into the site s structure so that the user will not be able to find a clue every time he uses the magnifying glass. After some unknown time when all 5 clues, that are needed to complete the investigation, have been found the user moves on to the second stage. At this stage the user has to play a mini puzzle game so that the criminal case is solved. This is when the investigation process comes to an end. However, there is a series of investigations so the user can move on to the next investigation in a row. Time and luck are elements, which can be of great help to the police detective user. The game addresses to users aged 13 and above, who have the knowledge of the English language, know how to use a personal computer and who find detective games really entertaining. In addition it addresses to those who have limited time to spare on computer games and generally on computers. Further in the diploma thesis more detail information is given about «One Step Ahead» and the different category of games it belongs to. Moreover, there is a reference to the tools and programming languages, which have been used for the development of the game as well as to the reasons that led us in using them. Finally, some conclusions that this developing game procedure led us in are being described together with some improvement suggestions and also an easy guide is mentioned about how the game can be uploaded on a server. 3

5 Περιεχόμενα CD Σχολιασμένος Κώδικας Παιχνιδιού Πακέτο Εργαλείων XAMPP Βάση Δεδομένων Παιχνιδιού Γραπτή Διπλωματική Εργασία Αρχείο Παρουσίασης 4

6 Πίνακας Περιεχομένων Κεφάλαιο 1ο : Εισαγωγή Τι είναι το βιντεοπαιχνίδι Τι είναι τα text-based παιχνίδια Γενικά για browser-based παιχνίδια Τι είναι τα passive παιχνίδια Κεφάλαιο 2ο : Παρουσίαση παρεμφερών παιχνιδιών Mousehunt Mafia Wars Torn City «One Step Ahead», η δική μας προσπάθεια Κεφάλαιο 3ο : Τεχνολογία που χρησιμοποιήθηκε Ξεκινώντας Διαλέγοντας την σωστή γλώσσα Τι είναι η PHP Τι είναι η ASP.NET Η επιλογή μας Διαλέγοντας πακέτο εργαλείων Το πακέτο εργαλείων XAMPP Το πακέτο εργαλείων EASYPHP Η επιλογή του πακέτου εργαλείων μας Τα λοιπά εργαλεία του XAMPP Ο Apache Web Server Η MySQL Το phpmyadmin Εναλλακτικές των εργαλείων αυτών Η PostgreSQL Το cpanel Επιλέγοντας το λογισμικό προγραμματισμού Το πρόγραμμα phpdesigner Εναλλακτικά προγράμματα

7 Adobe Dreamweaver NetBeans Notepad Κεφάλαιο 4ο : Περιεχόμενο Παιχνιδιού Είδος παιχνιδιού Ρόλος και σκοπός του χρήστη Πως παίζεται - Περιβάλλον Ξεκινώντας Εγγραφή νέου χρήστη Είσοδος εγγεγραμμένου χρήστη Εκκίνηση από τα κεντρικά γραφεία Χάρτης και Υποθέσεις προς εξιχνίαση Πρώτη υπόθεση Περιγραφή σεναρίου Υπόλοιπες υποθέσεις Πως παίζω Πως λύνεται η υπόθεση Μενού πλοήγησης Κεφάλαιο 5ο : Σχεδιασμός μηχανισμού παιχνιδιού Διάγραμμα Ροής Log in / Register Διάγραμμα Ροής κεντρικού παιχνιδιού Διάγραμμα Ροής ολοκλήρωσης παιχνιδιού Κεφάλαιο 6ο : Γενικά συμπεράσματα και βελτιώσεις Εξαγωγή συμπερασμάτων Τυχών βελτιώσεις Παράρτημα 1ο : Αναλυτικότερα περί γλωσσών προγραμματισμού Τι είναι η HTML Εκδόσεις HTML Η HTML στις μέρες μας Παράδειγμα HTML CSS Τα CSS στην χρήση Πλεονεκτήματα των CSS

8 1.3 Javascript Τι μπορείτε να κάνετε με Javascript Παράδειγμα Javascript Η ιστορία της PHP Τι μπορεί να κάνει η PHP Παράδειγμα PHP Βάση Δεδομένων, SQL και MySQL Τι είναι μια Βάση Δεδομένων (ΒΔ) Τι είναι η SQL Σημαντικότερα πλεονεκτήματα της SQL Βασικά χαρακτηριστικά της MySQL Διαφορά SQL και MySQL Γνωριμία με το περιβάλλον του phpmyadmin Παράρτημα 2ο : Εγχειρίδιο Εγκατάστασης Βιβλιογραφία

9 Κεφάλαιο 1ο : Εισαγωγή Η συνεχής ανάπτυξη της τεχνολογίας από τα μισά του προηγούμενου αιώνα μέχρι και σήμερα, ενέπνευσε τους ανθρώπους να την χρησιμοποιήσουν μεταξύ άλλων και σαν μια μορφή διασκέδασης. Η χρήση αυτή έγινε με την δημιουργία των πρώτων βιντεοπαιχνιδιών. 1.1 Τι είναι το βιντεοπαιχνίδι Ένα βιντεοπαιχνίδι είναι ένα ηλεκτρονικό παιχνίδι το οποίο περιλαμβάνει αλληλεπίδραση με μια διεπαφή χρήστη για την παραγωγή οπτικής ανάδρασης σε μια συσκευή βίντεο. Η λέξη βίντεο στο βιντεοπαιχνίδι παραδοσιακά αναφερόταν σε μια συσκευή εμφάνισης raster. Παιχνίδια-ορόσημα που αντιπροσωπεύουν τα βήματα στην εξέλιξη των ηλεκτρονικών παιχνιδιών ήταν ανάμεσα σε άλλα το «Cathode ray tube amusement device» όπου ήταν και το παλαιότερο γνωστό διαδραστικό ηλεκτρονικό παιχνίδι, καθώς και το πασίγνωστο «Pong» [1]. Εικόνα 1: Pong, ένα από τα πρώτα βιντεοπαιχνίδια. Κυκλοφόρησε το 1972 Ωστόσο, με την δημοφιλή χρήση του όρου «βιντεοπαιχνίδι», τώρα υπονοεί κάθε τύπο συσκευής εμφάνισης. Τα ηλεκτρονικά συστήματα που χρησιμοποιούνται για να παιχτούν βιντεοπαιχνίδια είναι γνωστά ως πλατφόρμες, παραδείγματα αυτών είναι οι προσωπικοί υπολογιστές (PC) και οι παιχνιδομηχανές (consoles). Αυτές οι πλατφόρμες εκτείνονται από μεγάλα συστήματα υπολογιστή μέχρι συσκευές χειρός. Ειδικευμένα βιντεοπαιχνίδια όπως τα παιχνίδια arcade, ενώ προηγουμένως κοινά, έχουν σταδιακά μειωθεί σε χρήση [2]. 8

10 Τα βιντεοπαιχνίδια που τρέχουν σε υπολογιστές έχουν δεχθεί πολλές αλλαγές ώσπου να φτάσουν στο σημείο αυτό που βρίσκονται τώρα. Εξελίχθηκαν από τα απλά γραφικά και το gameplay πρώιμων τίτλων όπως το «Spacewar!», σε ένα ευρύ φάσμα από πιο προηγμένους τίτλους. Κατά την διάρκεια αυτής της εξέλιξης δημιουργήθηκαν νέα είδη παιχνιδιών, από παιχνίδια που χρησιμοποιούσαν το τότε νέο ποντίκι, μέχρι και το μεγάλο άλμα στα τρισδιάστατα παιχνίδια, και κατόπιν στην δημιουργία των πρώτων διαδικτυακών παιχνιδιών, τόσο σε επίπεδο τοπικού δικτύου όσο και σε επίπεδο Internet. Ένα από τα πιο παλιά είδη παιχνιδιών που δημιουργήθηκαν, που παρόλα αυτά έχει καταφέρει να διατηρηθεί μέχρι και σήμερα ζωντανό, είναι τα παιχνίδια με βάση το κείμενο (text-based games). Το είδος αυτό των παιχνιδιών μας ενδιαφέρει ιδιαίτερα, καθώς είναι το είδος του παιχνιδιού που διαλέξαμε να έχει η παρούσα πτυχιακή. 1.2 Τι είναι τα text-based παιχνίδια Τα text-based παιχνίδια είναι παιχνίδια που χρησιμοποιούν χαρακτήρες κειμένου αντί για γραφικά. Μεσουρανούσαν κυρίως από το 1970 μέχρι το 1990, καθώς ήταν αρκετά εύκολο να γραφτούν και απαιτούσαν πολύ λιγότερη επεξεργαστική ισχύ σε σχέση με παιχνίδια που είχαν γραφικά. Ωστόσο, πολλοί προγραμματιστές εξακολουθούν ακόμα και τώρα να δημιουργούν text-based παιχνίδια για να εξοικειωθούν με τη γλώσσα προγραμματισμού που μαθαίνουν, και διοργανώνονται ακόμα και τουρνουά σχετικά με το ποιος μπορεί να τελειώσει τον προγραμματισμό ενός τέτοιου παιχνιδιού μέσα σε σύντομο χρονικό διάστημα. Εικόνα 2: MUD, ένα είδος text-based παιχνιδιού Σήμερα, η μορφή των text-based παιχνιδιών έχει αλλάξει σε κάποιο βαθμό. Αντί για απλές εφαρμογές που περιέχουν αποκλειστικά και μόνο κείμενο, όπως στην Εικόνα 2, περιέχουν και κάποια γραφικά. Τα γραφικά αυτά είναι σε μορφή εικόνων κυρίως, που βοηθούν τον παίκτη να μπει στον ρόλο του πρωταγωνιστή του παιχνιδιού, να του παρουσιάσει μια πτυχή του παιχνιδιού όπως την σκέφτηκε ο 9

11 δημιουργός του, και όχι να το αφήσει όλο στην φαντασία του παίκτη, κάτι χαρακτηριστικό των text-based παιχνιδιών. Έτσι, μπορούμε να έχουμε εικόνες που παρουσιάζουν την περιοχή στην οποία βρίσκεται εκείνη την στιγμή ο πρωταγωνιστής, ή κάποια αντικείμενα στην κατοχή του, παράλληλα με το κείμενο. Αυτές οι προσθήκες είναι προς όφελος των text-based παιχνιδιών, και κατάφεραν να ανανεώσουν το είδος, χωρίς να ξεφεύγουν από την φιλοσοφία του [3]. 1.3 Γενικά για browser-based παιχνίδια Κάτι που επίσης αξίζει να αναφερθεί είναι το γεγονός ότι με την εξέλιξη της τεχνολογίας και του διαδικτυακού της κομματιού, άνοιξαν νέες «πύλες» και για τα βιντεοπαιχνίδια. Καθώς το World Wide Web αναπτυσσόταν συνεχώς και οι φυλλομετρητές (browsers) γινόντουσαν όλο και πιο εξεζητημένοι, οι άνθρωποι άρχισαν να δημιουργούν browser παιχνίδια που χρησιμοποίησαν ένα πρόγραμμα περιήγησης στο Web σαν πελάτες. Δημιουργηθήκαν απλά παιχνίδια ενός παίκτη που μπορούσαν να παιχτούν με έναν web browser μέσω HTML και HTML scripting τεχνολογία (κυρίως JavaScript, ASP, PHP και MySQL). Πιο περίπλοκα παιχνίδια όπως το Legend of Empires ή το Travian επικοινωνούν με ένα web server για να επιτραπεί ένα περιβάλλον παιχνιδιού για πολλούς παίκτες. Εικόνα 3: Travian Τα browser-based παιχνίδια είναι συνήθως δωρεάν, και δεν απαιτούν κάποιο λογισμικό για να εγκατασταθούν, εκτός από έναν web browser. Τα browser παιχνίδια πολλαπλών παικτών έχουν μια πρόσθετη έμφαση στην κοινωνική αλληλεπίδραση, συχνά σε μαζική κλίμακα. Λόγω της προσβασιμότητας των browser παιχνιδιών, συχνά παίζονται σε πιο συχνές, μικρότερες συνεδρίες σε σύγκριση με τα παραδοσιακά παιχνίδια στον υπολογιστή. Τέλος, δεδομένου ότι τα browser παιχνίδια εξαρτώνται από τον web browser και όχι από το υπόλοιπο υλικό του 10

12 υπολογιστή, μπορούν να τρέχουν σε πολλά διαφορετικά λειτουργικά συστήματα χωρίς να χρειάζεται να μεταφέρονται σε κάθε πλατφόρμα. Η ανάπτυξη web-based γραφικών τεχνολογιών, όπως το Flash και το Java, επέτρεψαν στα browser παιχνίδια να γίνουν πιο σύνθετα. Αυτά τα παιχνίδια, γνωστά από την σχετική τεχνολογία τους ως "Flash παιχνίδια" ή "Java παιχνίδια", έγιναν ολοένα και πιο δημοφιλή. Πολλά παιχνίδια που αρχικά είχαν κυκλοφορήσει στη δεκαετία του 1980, όπως το Pac-Man και το Frogger, αναδημιουργήθηκαν ως παιχνίδια που παιζόντουσαν με το Flash plugin (πρόσθετο εργαλείο στον φυλλομετρητή) σε μια ιστοσελίδα. Τα περισσότερα browser παιχνίδια ήταν αρκετά περιορισμένα στο θέμα υποστήριξης πολλών παικτών. Συνήθως ήταν παιχνίδια ενός παίκτη, που είχαν λίστα υψηλής βαθμολογίας μεταξύ όλων των παικτών. Αυτό έχει αλλάξει σημαντικά τα τελευταία χρόνια, με παραδείγματα το «Castle of Heroes», το «Canaan Online» και το «Ikariam». Πιο πρόσφατα browser-based παιχνίδια χρησιμοποιούν διαδικτυακές τεχνολογίες όπως το Ajax για να κάνουν πιο περίπλοκες αλληλεπιδράσεις πολλών παικτών δυνατές και WebGL για να δημιουργήσει hardware-accelerated 3D γραφικά χωρίς την ανάγκη επιπρόσθετων plugin. Τέλος να σημειωθεί πως τα browser παιχνίδια χρησιμοποιούν ελάχιστο bandwidth, δεν είναι απαιτητικά, δεν απαιτούν να διαθέτει ο χρήστης μια πολύ γρήγορη σύνδεση [4]. 1.4 Τι είναι τα passive παιχνίδια Συνοψίζοντας τα είδη βιντεοπαιχνιδιών που δημιουργήθηκαν με την πάροδο του χρόνου, χάρη στην συνεχή και γοργά αναπτυσσόμενη εξέλιξη της τεχνολογίας, θα ήταν συνετό να αναφερθούμε σε μια υποκατηγορία των browser-based αλλά και text-based παιχνιδιών, που ονομάζονται passive παιχνίδια. Χαρακτηριστικό των passive παιχνιδιών είναι ότι αποσπούν τον χρήστη για πολύ μικρά διαστήματα της ώρας μέσα στην μέρα για να παιχτούν, δεν είναι σαν οποιαδήποτε άλλα βιντεοπαιχνίδια που μπορεί να τα παίξει ο χρήστης για πολλές ώρες συνεχόμενα. Αυτό συμβαίνει γιατί το παιχνίδι μπορεί παραδείγματος χάριν να περιορίζει τον χρήστη στις κινήσεις του, ή κάθε session (εγγραφή) που έχει ο χρήστης στο παιχνίδι, να ολοκληρώνει έναν μικρό στόχο, και να τον αφήνει σε αναμονή μέχρι να μπορεί να προσπαθήσει τον επόμενο. Συμπεραίνουμε λοιπόν πως τα passive παιχνίδια θέλουν τον χρόνο τους για να παιχτούν, δεν μπορούν να φτάσουν στον τερματισμό τους μονομιάς. Όπως είπε και ένας blogger σχολιάζοντας τα passive παιχνίδια, τα passive web-based παιχνίδια είναι εξαίσια, καθώς κολλάνε στην ζωή σου όπως το να τσεκάρεις το σου, ή να τσεκάρεις το σκορ ενός αγώνα [5]. 11

13 Κεφάλαιο 2ο : Παρουσίαση παρεμφερών παιχνιδιών 2.1 Mousehunt Ένα παράδειγμα που να περιλαμβάνει όλες τις κατηγορίες παιχνιδιών που αναφέραμε στο προηγούμενο κεφάλαιο, δηλαδή ένα browser-based passive text game, είναι το Mousehunt. Εικόνα 4: Mousehunt Στο Mousehunt, ο παίκτης καλείται να αναλάβει τον ρόλο ενός κυνηγού ποντικιών σε ένα φανταστικό βασίλειο. Υπάρχουν πολλές διαφορετικές περιοχές, και σε καθεμία τα ποντίκια έχουν διαφορετικές αδυναμίες. Ο παίκτης πρέπει να αλλάξει παγίδες, βάσεις και τυράκια «δολώματα» αν θέλει να πιάσει το ποντίκι που κυνηγάει. Το ίδιο το παιχνίδι παίζεται από οποιονδήποτε browser της αρεσκείας του παίκτη, Internet Explorer, Chrome, Firefox, Safari, Opera και λοιπά. Το παιχνίδι κρατάει τον text χαρακτήρα του καθώς βασίζεται κατά ένα μεγάλο κομμάτι σε κείμενο. Μέσω κειμένου γνωρίζει ο παίκτης εάν το κυνήγι του ήταν επιτυχημένο η όχι. Όσο άφορα το passive στοιχείο, υλοποιείται με το γεγονός ότι ο παίκτης μπορεί να κυνηγήσει ένα ποντίκι κάνοντας κλικ σε μια «κόρνα», η οποία εμφανίζεται κάθε 15 λεπτά. Ουσιαστικά εφόσον ο παίκτης είναι στην σωστή περιοχή, με την σωστή βάση, παγίδα και δόλωμα, η ενέργεια που πρέπει να εκτελέσει εμφανίζεται μόνο κάθε τέταρτο της ώρας. Οι χρήστες που παίζουν το παιχνίδι αυξάνονται συνεχώς, κάτι στο οποίο βοηθάει και ο social χαρακτήρας του παιχνιδιού, με τους χρήστες να 12

14 μπορούν να ανταλλάξουν αντικείμενα ή να προβούν σε αγοραπωλησίες αυτών. Τέλος κατά περιόδους οι δημιουργοί του Mousehunt δίνουν σε κυκλοφορία νέο υλικό, σε όλους τους τομείς του παιχνιδιού, κρατώντας το ενδιαφέρον των χρηστών αμείωτο [6]. 2.2 Mafia Wars Η ποικιλία των σεναρίων τέτοιου τύπου παιχνιδιών όμως δεν σταματάει εδώ. Πολλά παιχνίδια έχουν το αστυνομικό στοιχείο να κυριαρχεί, με αποστολές, μαφία, εγκλήματα, όπλα και ληστείες. Κρίνοντας από τον αριθμό των χρηστών που είναι ενεργοί σε τέτοια είδη παιχνιδιών, μπορούμε να συμπεράνουμε πως τέτοιου σεναρίου browser games είναι αρκετά δημοφιλή. Παραδείγματα τέτοιων παιχνιδιών είναι και το Mafia Wars. Εικόνα 5: Mafia Wars Το Mafia Wars είναι ένα από τα διασημότερα παιχνίδια του Facebook, το οποίο επισκέπτονται σε μηνιαία βάση πάνω από 14 εκατομμύρια χρήστες. Η λογική του Mafia Wars είναι απλή. Στόχος σας είναι να χτίσετε μία δυνατή συμμορία, να την εξοπλίσετε με όσο το δυνατόν καλύτερα όπλα και πολεμώντας να ανεβείτε επίπεδο (level). Όλα τα games του Facebook έχουν την λογική της αλληλεπίδρασης με τους φίλους σας και το Mafia Wars στηρίζεται όσο κανένα άλλο σε αυτή τη λογική. Κοινώς, όσο περισσότερους φίλους έχετε στο Facebook, τόσο πιο πολλές πιθανότητες έχετε να χτίσετε μια δυνατή συμμορία, άρα και να κυριαρχήσετε. 13

15 Ξεκινώτας την καριέρα σας ως μαφιόζος της νύχτας, σας δίνονται από 5 πόντοι στα χαρακτηριστικά: Attack, Defence, Energy και Stamina, καθώς και 100 πόντοι στο Health. Το Attack σχετίζεται με την επίθεση που κάνετε στους αντιπάλους σας και αφορά μόνο τις μάχες με τα αφεντικά του παιχνιδιού ή με άλλους χρήστες. Το Defence είναι οι πόντοι άμυνας που έχετε ώστε να αντικρούετε τις επιθέσεις των μεγάλων αφεντικών ή άλλων χρηστών. Το Energy είναι η ενέργεια που έχετε για να συμμετέχετε σε αποστολές και το Stamina η αντίστοιχη αντοχή που έχετε για να συμμετέχετε σε μάχες με άλλους χρήστες. Τέλος, το Health υποδηλώνει την υγεία σας και αφαιρείται όταν μάχεστε με τα δυνατά αφεντικά και άλλους χρήστες. Στην πράξη όμως, ακόμα κι αν σας αφαιρεθούν όλοι οι πόντοι, δεν πεθαίνετε, απλά χάνετε τη μάχη που δίνατε εκείνη τη στιγμή (μαζί με κάποια χρήματα). Οποιαδήποτε στιγμή επιθυμείτε μπορείτε να αναπληρώσετε το health σας πληρώνοντας έναν γιατρό σε νοσοκομείο για να σας θεραπεύσει στο 100%. Για να μπορέσετε να ξανά θεραπευτείτε όμως θα πρέπει να περάσουν τουλάχιστον 1-2 λεπτά. Για να αναπτύξετε τον χαρακτήρα σας θα πρέπει να κερδίσετε εμπειρία (experience) κι αυτό γίνεται κατά κύριο λόγο ολοκληρώνοντας δουλειές που σας ανατίθενται. Τις βρομοδουλειές αυτές τις επιλέγετε εσείς οι ίδιοι μέσα από μία λίστα που αφορά βαθμό του επιπέδου το οποίο βρίσκεστε. Δεν χάνετε ποτέ health, αλλά αντιθέτως σας αφαιρείται energy το οποίο αναπληρώνεται με αργό ρυθμό (ένας πόντος κάθε λίγα λεπτά). Όταν καταφέρετε να κερδίσετε το απαιτούμενο experience τότε ανεβαίνετε επίπεδο, άρα από ένα επίπεδο και μετά ξεκλειδώνετε τις πιο δύσκολες δουλειές οι οποίες δίνουν περισσότερα χρήματα και περισσότερο experience [7]. 2.3 Torn City Το Torn City είναι χωρίς αμφιβολία ένα από τα μεγαλύτερα text-based RPG παιχνίδια όσον αφορά το περιεχόμενο και τη βάση των παικτών στο διαδίκτυο. Κατά την εγγραφή σας, θα ξεκινήσετε σχεδόν αδύναμος, αλλά μπορείτε να επιλέξετε εσείς το πως θα προχωρήσετε, κάθε χαρακτήρας είναι μοναδικός. Έχει ως θέμα μια πόλη (Torn City) γεμάτη εγκληματίες κάθε είδους και πολλούς διαφορετικούς τρόπους να αντιμετωπίσετε το παιχνίδι. Μπορείτε να γίνετε επιχειρηματίες ανοίγοντας δική σας εταιρία (από κατάστημα με κεριά μέχρι Πετρελαϊκή), να γίνεται εσείς ο ίδιος υπάλληλος σε μία εταιρία (ιδιωτική ή δημόσια) και να απολαμβάνετε προνόμια (περισσότερη ενέργεια, χρήματα, καλύτερο χειρισμό όπλων και πολλά άλλα...) καθημερινά ανάλογα με την εταιρία. 14

16 Μπορείτε να γίνετε έμποροι κάθε είδους (από σαπούνια και Vicodin μέχρι όπλα και λουλούδια). Υπάρχει αληθινό χρηματιστήριο, φυλακή, νοσοκομείο και Καζίνο με πολλά ενδιαφέροντα παιχνίδια (για τους φίλους του Black Jack, του Poker και του στοιχηματισμού. Ταξιδέψτε σε άλλες πόλεις, διαβάστε την εφημερίδα σας, χρησιμοποιείστε το γυμναστήριο, παρακολουθήστε Πανεπιστημιακού επιπέδου μαθήματα(φυσική, Μαθηματικά, Προγραμματισμό κλπ) για να δυναμώσετε το χαρακτήρα σας, κερδίστε δημοπρασίες, πάρτε δάνειο από τους τοκογλύφους και τρέξτε μαζί με χιλιάδες ακόμα παίκτες σε αγώνες ταχύτητας με τα καλύτερα αμάξια. Αυτά είναι μόνο μερικά από τα πράγματα που μπορεί να σας προσφέρει η Torn City [8]. Εικόνα 6: Torn City 2.4 «One Step Ahead», η δική μας προσπάθεια Βάζοντας σε χρήση την δική μας φαντασία αλλά και δημιουργικότητα, και παίρνοντας και ιδέες βέβαια από άλλα παιχνίδια, δημιουργήσαμε το δικό μας παιχνίδι, με τίτλο «One Step Ahead». Είναι ένα παιχνίδι που εντάσσεται στους τύπους παιχνιδιών που αναλύσαμε παραπάνω. Είναι δηλαδή ένα browser-based, passive text game με κάποιες φρέσκιες και πρωτότυπες ιδέες φυσικά. Η ανάπτυξη του διήρκησε περίπου 6 μήνες, παρόλα αυτά είναι η φύση του παιχνιδιού τέτοια, που δεν θα σταματήσει πότε να αναπτύσσεται και να αναβαθμίζεται, καθώς επιθυμούμε να το συντηρούμε και μετά το πέρας της εκπόνησης της πτυχιακής μας εργασίας. Περισσότερα όμως για το παιχνίδι στο 4 ο κεφάλαιο. 15

17 Κεφάλαιο 3ο : Τεχνολογία που χρησιμοποιήθηκε 3.1 Ξεκινώντας Ξεκινώντας την εκπόνηση της πτυχιακής μας εργασίας, δεν γνωρίζαμε σχεδόν τίποτα σχετικά με το πώς αυτή θα αναπτυχτεί. Ούτε σε ποια γλώσσα προγραμματισμού θα γράφαμε, ούτε με τι εργαλεία θα δουλεύαμε. Την λύση στις απορίες μας κλήθηκε να δώσει κατά ένα μεγάλο βαθμό η μηχανή αναζήτησης Google, κάτι συνηθισμένο στην εποχή μας. 3.2 Διαλέγοντας την σωστή γλώσσα Παρατηρήσαμε ότι η πτυχιακή μας εργασία μπορούσε να εκπονηθεί με μια πληθώρα γλωσσών προγραμματισμού. Συμβουλευόμενοι το Google και φίλους, περιορίσαμε τις επιλογές μας σε δυο: θα δουλεύαμε είτε με PHP, είτε με ASP.NET. Παρακάτω κάνουμε μια μικρή αναφορά στις δυο γλώσσες αυτές, και εντέλει αναφέρουμε ποια διαλέξαμε. Αναλυτικότερα περί των γλωσσών προγραμματισμού και των εργαλείων που χρησιμοποιήθηκαν αναφερόμαστε στο Παράρτημα 1 του βιβλίου αυτού Τι είναι η PHP Η PHP είναι μια γλώσσα προγραμματισμού που σχεδιάστηκε για τη δημιουργία δυναμικών σελίδων στο διαδίκτυο και είναι επισήμως γνωστή ως: HyperText preprocessor. Είναι μια server-side (εκτελείτε στον διακομιστή) scripting γλώσσα που γράφεται συνήθως πλαισιωμένη από HTML, για μορφοποίηση των αποτελεσμάτων. Αντίθετα από μια συνηθισμένη HTML σελίδα η σελίδα PHP δεν στέλνεται άμεσα σε έναν πελάτη (client), αντί αυτού πρώτα αναλύεται και μετά αποστέλλεται το παραγόμενο αποτέλεσμα. Τα στοιχεία HTML στον πηγαίο κώδικα μένουν ως έχουν, αλλά ο PHP κώδικας ερμηνεύεται και εκτελείται [9]. 16

18 3.2.2 Τι είναι η ASP.NET Η ASP.NET (ή αλλιώς ASP+) είναι μια web πλατφόρμα η οποία παρέχει όλες τις λειτουργίες που απαιτούνται για τη δημιουργία δυναμικών διαδικτυακών εφαρμογών. Η πλατφόρμα αυτή είναι βασισμένη στο.net Framework, επομένως όλα τα χαρακτηριστικά αυτού είναι διαθέσιμα στις ASP.NET εφαρμογές. Οι εφαρμογές αυτές μπορούν να προγραμματιστούν με οποιαδήποτε από τις υποστηριζόμενες, από το CLR (Common Language Runtime) γλώσσες με πιο διαδεδομένες την Visual Basic και τη C# [10] Η επιλογή μας Διαλέξαμε να χρησιμοποιήσουμε την PHP για δική μας και μόνο ευχαρίστηση. Από παραδείγματα στο internet παρατηρήσαμε πως είναι μια εύκολα συντασσόμενη γλώσσα προγραμματισμού, και έχει μεγάλη κοινότητα χρηστών, κάτι που είναι πολύ θετικό ειδικά για εμάς που κάναμε τα πρώτα βήματα με αυτή την γλώσσα. Η εργασία θα μπορούσε παρόλα αυτά να υλοποιηθεί και με την ASP.NET, με ένα εξίσου λειτουργικό αποτέλεσμα. Επίσης, διαλέξαμε την γλώσσα προγραμματισμού PHP γιατί ήταν και μια καλή ευκαιρία να την μάθουμε μέχρι την ολοκλήρωση της πτυχιακής, και να χρησιμοποιήσουμε την γνώση αυτή ολοκληρώνοντας την σχολή και αναζητώντας κάποια δουλεία στην αγορά εργασίας. 3.3 Διαλέγοντας πακέτο εργαλείων Αφού αποφασίσαμε ότι θα δουλεύαμε σε PHP, η αμέσως επομένη «ανακάλυψη» που κάναμε ήταν ότι κυκλοφορούσαν στο internet κάποια πακέτα εργαλείων, που περιέχουν ότι εργαλεία μπορεί να χρειαστεί ένας χρήστης για να αναπτύξει, να τεστάρει, και να ολοκληρώσει την εργασία του. Διαλέγοντας ένα τέτοιο πακέτο θα ήταν προτιμότερο από το να κατεβάζαμε από μόνοι μας τα εργαλεία που ίσως να χρειαζόμασταν, αν όχι μονόδρομος. Διότι όχι μόνο δεν θα γνωρίζαμε λόγω της απειρίας μας ποια εργαλεία μπορεί στο μέλλον να χρειαστούμε, αλλά και επειδή τα εργαλεία αυτά χρειάζονται κάποια παραμετροποίηση για να λειτουργούν στο σύστημα του καθενός, άλλα μικρή παραμετροποίηση και άλλα μεγαλύτερη, παραμετροποίηση την οποία δεν είχαμε την γνώση να πραγματοποιήσουμε. Η έρευνα που κάναμε μας αποκάλυψε ότι υπήρχαν πολλές επιλογές για να διαλέγαμε. Αναλύοντας τις επιλογές μας, καταφέραμε και τις ελαχιστοποιήσαμε σύμφωνα με τις ανάγκες μας ανάμεσα σε δυο. Και οι δυο προσέφεραν ουσιαστικά το ίδιο, οπότε διαλέξαμε το πακέτο εργαλείων που μας κέντραρε το ενδιαφέρον παραπάνω, λαμβάνοντας υπ όψιν βέβαια και τον παράγοντα «κοινότητα, κάτι πολύ σημαντικό. 17

19 3.3.1 Το πακέτο εργαλείων XAMPP Το XAMPP είναι ένα πρόγραμμα ελεύθερου λογισμικού με μηδενικό κόστος. Αποτελείται κυρίως από τον Apache HTTP Server, MySQL βάση δεδομένων και μεταγλωττιστές σεναρίων γραμμένους στις γλώσσες προγραμματισμού PHP και Perl. Το όνομα XAMPP είναι αρκτικόλεξο (ακρωνύμιο) και σημαίνει: Χ (αναφέρεται στο "cross-platform" που σημαίνει λογισμικό ανεξάρτητο πλατφόρμας) Apache HTTP Server MySQL PHP Perl Το πρόγραμμα έχει δημιουργηθεί κάτω από την άδεια χρήσης GNU (General Public License) και συμπεριφέρεται σαν ένας web server χωρίς κόστος ικανός να φιλοξενεί πολλές δυναμικές ιστοσελίδες. Είναι διαθέσιμο στα Microsoft Windows, Linux, Solaris, και Mac OS X, και είναι κυρίως χρήσιμο για ανάπτυξη web projects [11] Το πακέτο εργαλείων EASYPHP Το πακέτο εργαλείων EASYPHP είναι σχεδόν ολόιδιο με το XAMPP. Προσφέρει τα ίδια εργαλεία, και είναι επίσης έτοιμο για χρήση, χωρίς την ανάγκη κάποιου ιδιαίτερου configuration. Η μόνη ίσως διαφορά του EASYPHP με το XAMPP είναι η ύπαρξη του Xdebug στο EASYPHP, χωρίς όμως αυτό να σημαίνει ότι δεν μπορεί να μπει χειροκίνητα στο σύστημα του χρήστη εφόσον αυτός το θελήσει [12] Η επιλογή του πακέτου εργαλείων μας Όπως αναφέραμε και παραπάνω, τα πακέτα εργαλείων αυτά (που ονομάζονται όλα γενικά WAMP, καθώς είναι για λειτουργικό Windows και περιέχουν σίγουρα Apache, MySQL και PHP) είναι σχεδόν πανομοιότυπα. Η επιλογή μας δεν θα είχε μεγάλη διαφορά σε σχέση με κάποιο άλλο πακέτο, οπότε διαλέξαμε το XAMPP που μας είχε κάνει εντύπωση η απίστευτα μεγάλη κοινότητα του, αλλά και η ευχρηστία της εγκατάστασης του από ένα συμπιεσμένο αρχείο μέχρι έναν πλήρως λειτουργικό server στημένο στον υπολογιστή μας. 18

20 3.4 Τα λοιπά εργαλεία του XAMPP Επιλέγοντας το XAMPP, είχαμε πλέον στην διάθεση μας μια πληθώρα εργαλείων. Είχαμε τη γλώσσα προγραμματισμού PHP, όπου αναφέραμε ήδη, τον web server Apache, την MySQL και το phpmyadmin, εκτός άλλων. Ας παρουσιάσουμε τα εργαλεία αυτά, χωρίς να μπούμε σε λεπτομέρειες: Ο Apache Web Server Ο Apache Web Server είναι αυτό ακριβώς που δηλώνει το όνομά του. Πρόκειται δηλαδή για έναν εξυπηρετητή (server) του παγκόσμιου Ιστού (Web). Με τον όρο server το μυαλό μας πηγαίνει ίσως σε ηλεκτρονικούς υπολογιστές που φιλοξενούν ιστοσελίδες και όχι άδικα. Ο όρος αυτός χρησιμοποιείται και για το μηχάνημα εξυπηρετητή (hardware) αλλά και για το πρόγραμμα (software). Στο άρθρο αυτό θα ασχοληθούμε μόνο με το software και συγκεκριμένα με τον Apache. Ο Apache εγκαθίσταται σε έναν υπολογιστή ο οποίος μπορεί να χρησιμοποιεί διάφορα λειτουργικά συστήματα όπως Linux, Unix, Microsoft Windows, GNU, FreeBSD, Solaris, Novell NetWare, Mac OS X, OS/2, TPF. Ο ρόλος του Apache είναι να αναμένει αιτήσεις από διάφορα προγράμματα χρήστες (clients) όπως είναι ένας ο φυλλομετρητής (browser) ενός χρήστη και στη συνέχεια να εξυπηρετεί αυτές τις αιτήσεις σερβίροντας τις σελίδες που ζητούν είτε απευθείας μέσω μιας ηλεκτρονικής διεύθυνσης (URL), είτε μέσω ενός συνδέσμου (link). Ένα από τα βασικότερα χαρακτηριστικά του όμως, το οποίο και του δίνει μεγάλες δυνατότητες, είναι ότι μπορεί να προσαρμόσει επάνω του πολλές προσθήκες προγραμμάτων (modules), τα οποία με τη σειρά τους παρέχουν διαφορετικές λειτουργίες. Το πρόγραμμα είναι ανοιχτού κώδικα (open source), κάτι που σημαίνει ότι σύμφωνα με την άδεια χρήσης του (license), διατίθεται δωρεάν και μπορούν να γίνουν ελεύθερα από το χρήστη προσθήκες και τροποποιήσεις στον κώδικα του. Τέλος, ο Apache HTTP υποστηρίζει επίσης αρκετές διάσημες εφαρμογές και γλώσσες προγραμματισμού όπως MySQL, PHP, Perl, Python κ.λπ [13]. 19

21 3.4.2 Η MySQL Η MySQL είναι ένα σύστημα διαχείρισης σχεσιακής βάση ανοικτού κώδικα όπως λέγεται (relational database management system - RDBMS) που χρησιμοποιεί την SQL. Επειδή είναι ανοικτού κώδικα (open source), οποιοσδήποτε μπορεί να κατεβάσει την MySQL και να την διαμορφώσει σύμφωνα με τις ανάγκες του, σύμφωνα πάντα με την γενική άδεια που υπάρχει. Η MySQL είναι γνωστή κυρίως για την ταχύτητα, την αξιοπιστία, και την ευελιξία που παρέχει. Οι περισσότεροι συμφωνούν ωστόσο ότι δουλεύει καλύτερα όταν διαχειρίζεται περιεχόμενο και όχι όταν εκτελεί συναλλαγές. Η MySQL αυτή τη στιγμή μπορεί να λειτουργήσει σε περιβάλλον Linux, Unix, και Windows [14] Το phpmyadmin Το phpmyadmin είναι ένα σύνολο από php scripts με το οποίο διαχειριζόμαστε τις βάσεις δεδομένων που έχουμε μέσο web. Το phpmyadmin μπορεί να διαχειριστεί ένα ολόκληρο mysql server ή ακόμα και απλές βάσεις δεδομένων όπου ο κάθε χρήστης έχει ένα λογαριασμό και μπορεί να δημιουργήσει και να διαχειριστεί τις δικές του βάσεις δεδομένων. Αυτή η εφαρμογή είναι πολύ χρήσιμη ειδικά σε νέους χρήστες οι οποίοι δεν έχουν ακόμα εξοικειωθεί με τη διαχείριση του mysql server μέσο κονσόλας [15]. 3.5 Εναλλακτικές των εργαλείων αυτών Παρατηρούμε λοιπόν πως το XAMPP περιέχει ένα σύνολο πολύ καλών εργαλείων για όλες τις χρήσεις. Συγκεκριμένα, με την PHP προγραμματίσαμε όλη την πτυχιακή μας. Τον Apache server τον χρησιμοποιούσαμε καθώς βλέπαμε ζωντανά την πρόοδο της πτυχιακής μας σε κάποιον browser, πως απεικονίζονταν τα πάντα, τόσο σε τοπικό επίπεδο όσο και online, μέσω της IP μας. Με το phpmyadmin διαχειριστήκαμε την βάση δεδομένων μας με τους πίνακες που είχε μέσα, ένα από τα σημαντικότερα αν όχι το σημαντικότερο κομμάτι της πτυχιακής μας. Τέλος κάνοντας χρήση MySQL εντολών μέσα από το PHP κομμάτι κάθε σελίδας μας πραγματοποιούσαμε αλλαγές στην βάση δεδομένων μας. Τι εναλλακτικές όμως θα μπορούσαμε να έχουμε, σε περίπτωση που διαλέγαμε να μην χρησιμοποιήσουμε τα εργαλεία αυτά που υπήρχαν στο πακέτο του XAMPP; Κάνοντας την επιλογή να χρησιμοποιήσουμε το XAMPP, δεν επαναπαυτήκαμε στα εργαλεία που αυτό περιέχει, και ερευνήσαμε τις επιλογές μας για να έχουμε μια πιο εμπεριστατωμένη άποψη. 20

22 3.5.1 Η PostgreSQL Η PostgreSQL αποτελεί μια ανοιχτού κώδικα σχεσιακή βάση δεδομένων με πολλές δυνατότητες. Η ανάπτυξη της ήδη διαρκεί πάνω από 20 χρόνια και βασίζεται σε μια αποδεδειγμένα καλή αρχιτεκτονική η οποία έχει δημιουργήσει μια ισχυρή αντίληψη των χρηστών της γύρω από την αξιοπιστία, την ακεραιότητα δεδομένων και την ορθή λειτουργία. Η PostgreSQL τρέχει σε όλα τα βασικά λειτουργικά συστήματα, περιλαμβάνοντας Linux, UNIX (AIX, BSD, HP-UX, SGI IRIX, Mac OS X, Solaris, Tru64), και Windows. Είναι ACID συμβατή (ACID compliant), έχει ολοκληρωμένη υποστήριξη για foreign keys, joins, views, triggers, και stored procedures (σε διάφορες γλώσσες προγραμματισμού). Συμπεριλαμβάνει τα περισσότερα SQL92 και SQL99 data types, συμπεριλαμβανομένων INTEGER, NUMERIC, BOOLEAN, CHAR, VARCHAR, DATE, INTERVAL, και TIMESTAMP. επίσης υποστηρίζει αποθήκευση binary large objects, όπως εικόνες, ήχοι ή video. Διαθέτει native programming interfaces για C/C++, Java,.Net, Perl, Python, Ruby, Tcl, ODBC, κ.α. καθώς και Τεκμηρίωση. Παρατηρούμε λοιπόν πως αντί για την MySQL θα μπορούσαμε να χρησιμοποιήσουμε κάλλιστα την PostgreSQL. Το αποτέλεσμα θα ήταν ίδιο με αυτό που έχουμε τώρα, οπότε παραμείναμε στην MySQL που υπήρχε μαζί με το πακέτο XAMPP και δεν ήθελε έτσι καθόλου παραμετροποίηση [16] Το cpanel Το cpanel είναι ένας πίνακας ελέγχου για web hosting βασισμένος σε Unix, που παρέχει μια γραφική διεπαφή και εργαλεία αυτοματισμού, και έχει σχεδιαστεί για να απλοποιήσει τη διαδικασία της φιλοξενίας ενός δικτυακού τόπου. Το cpanel υλοποιεί μια δομή τριών βαθμίδων που παρέχει λειτουργικότητα για τους διαχειριστές, τους μεταπωλητές και ιδιοκτήτες ιστοχώρου για να ελέγχει τις διάφορες πτυχές της ιστοσελίδας και διαχείρισης διακομιστή μέσω ενός τυπικού web browser. Εκτός από τη διεπαφή GUI, το cpanel έχει επίσης πρόσβαση μέσω γραμμής εντολών αλλά και API, που επιτρέπει σε προμηθευτές λογισμικού third-party, σε web hosting οργανώσεις, και προγραμματιστές να αυτοματοποιήσουν στάνταρτ διαδικασίες διαχείρισης συστήματος. Σκεφτήκαμε την χρήση του πίνακα ελέγχου cpanel για την υλοποίηση της πτυχιακής μας. Ενημερωθήκαμε επίσης, ότι τα περισσότερα websites κάνουν χρήση του cpanel ως το εργαλείο μέσω του οποίου ο χρήστης έχει πρόσβαση σε, και αλληλεπίδραση με, την βάση δεδομένων του. Παρόλα αυτά χρησιμοποιήσαμε το 21

23 phpmyadmin, καθώς είναι εξίσου διαδεδομένο, αν όχι παραπάνω, από το cpanel και έκανε και με το παραπάνω όσα ζητούσαμε από αυτό [17]. 3.6 Επιλέγοντας το λογισμικό προγραμματισμού Αφού καταλήξαμε στην χρήση της γλώσσας PHP ως την γλώσσα με την οποία θα υλοποιήσουμε την πτυχιακή μας, και κατόπιν διαλέξαμε το πακέτο εργαλείων XAMPP που περιείχε όλα τα απαραίτητα εργαλεία για να την υλοποιήσουμε, έμενε μόνο μια παράμετρος, αρκετά βασική: να διαλέξουμε το πρόγραμμα με το οποίο θα προγραμματίζαμε τον κώδικα μας. Αναζητώντας πληροφορίες στο internet ανακαλύψαμε πως υπήρχε απίστευτα μεγάλη ποικιλία σε PHP editors για να διαλέξουμε. Κοιτώντας τους δημοφιλέστερους, καταλήξαμε στον phpdesigner ανάμεσα από άλλους Το πρόγραμμα phpdesigner Το phpdesigner είναι ίσως ο πιο γρήγορος και με τεράστιες δυνατότητες PHP EDITOR και PHP IDE με ενσωματωμένους editors και άλλων γλωσσών όπως HTML, CSS και JavaScript. Η έκδοση που χρησιμοποιήθηκε αρχικά από εμάς ήταν η 7η. Αργότερα την αντικαταστήσαμε, με την έλευση της νεότερης έως αυτήν την στιγμή, την 8 η [18]. Η έκδοση αυτή υποστηρίζει: PHP5 (και οι δύο εκδόσεις 4 και 5 είναι πλήρως υποστηριζόμενες) SQL (MySQL, MSSQL 2000, MSSQL 7, Ingres, Interbase 6, Oracle, Sybase) HTML5 XHTML CSS3 (οι εκδόσεις 1 και 2.1 είναι πλήρως υποστηριζόμενες) JavaScript VBScript Java C#, Perl, Python, Ruby, Smarty Εναλλακτικά προγράμματα Αντί για το Phpdesigner, θα μπορούσαμε να χρησιμοποιήσουμε μια μεγάλη ποικιλία προγραμμάτων που θα μας έδιναν το ίδιο αποτέλεσμα. Τελικά όμως διαλέξαμε το phpdesigner, όχι για κάποιο ιδιαίτερο λόγο, απλά από προσωπική άποψη. Από την τεράστια λίστα διαθέσιμων προγραμμάτων, υποψήφια θεωρούνταν και τα παρακάτω: 22

24 Adobe Dreamweaver Το Adobe Dreamweaver είναι ένα εργαλείο ανάπτυξης ιστοσελίδων της Macromedia. Υποστηρίζει CSS, JavaScript, και μια σειρά άλλων παρόμοιων τεχνολογιών. Το πρόγραμμα Dreamweaver βοηθά τους μη-προγραμματιστές (και αρχάριους) στην κατασκευή ιστοσελίδων καθώς έχει ενσωματωμένες πολλές τεχνικές σχεδιασμού. Παράδειγμα αποτελούν οι συναρτήσεις javascript οι οποίες είναι πολύ χρήσιμες σε κάθε εργασία παραγωγής web σελίδων. Ο κώδικας που παράγεται είναι βελτιστοποιημένος έτσι ώστε να προσφέρει το καλύτερο αποτέλεσμα. Ο λόγος που δεν χρησιμοποιήσαμε το DreamWeaver είναι γιατί προτιμούσαμε ένα πρόγραμμα που να μην σου δημιουργεί έτοιμο κώδικα. Θέλαμε να γράφαμε και την παραμικρή σειρά, εντολή μόνοι μας για να μάθουμε, όχι να έχουμε «έτοιμη τροφή». Στο μέλλον ένα τέτοιο εργαλείο ίσως και να μας λύσει τα χέρια, στην παρούσα φάση όμως που θέλαμε να μάθουμε το phpdesigner ήταν προτιμότερο [19] NetBeans Tο NetBeans IDE είναι ένα περιβαλλοντικό ανάπτυγμα IDE - ένα εργαλείο στους προγραμματιστές για να γράψουν, να κάνουν compile, debug και να αναπτύξουν προγράμματα. Είναι γραμμένο σε Java - αλλά μπορεί να υποστηρίξει όλες τις γλώσσες προγραμματισμού. Υπάρχει επίσης ένας μεγάλος αριθμός υπομονάδων (modules) που βοηθάνε στην επέκταση της λειτουργικότητας του NetBeans IDE. To NetBeans IDE είναι ένα ελεύθερο προϊόν δίχως περιορισμούς στον τρόπο χρησιμοποίησής του [20] Notepad++ Το Notepad++ είναι ένα ελαφρύ πρόγραμμα προβολής και επεξεργασίας κειμένου, με υποστήριξη Ελληνικών, το οποίο μπορεί εύκολα να χαρακτηριστεί ως αντικαταστάτης του κλασικού σημειωματάριο των Windows, περιλαμβάνει μια πληθώρα προηγμένων χαρακτηριστικών και υποστηρίζει πολλές δημοφιλείς γλώσσες προγραμματισμού. Σας προσφέρει προσαρμόσιμο τονισμό σύνταξης, macro εγγραφής και αναπαραγωγής, αναζήτηση / αντικατάσταση (με υποστήριξη για κανονικές εκφράσεις), σύνθετες προβολές επεξεργασίας, ετικέτες, και πολλά άλλα. Το Notepad++ μπορεί να επεκταθεί περαιτέρω με τη χρήση δωρεάν προσθέτων όπως, ορθογραφικό έλεγχο, εκσφαλμάτωση και πολλές άλλες δυνατότητες [21]. 23

25 Κεφάλαιο 4ο : Περιεχόμενο Παιχνιδιού Στο κεφάλαιο αυτό θα γίνει εκτενής αναφορά και περιγραφή, του παιχνιδιού που έχουμε σκεφτεί και υλοποιήσει. Θα χρησιμοποιηθούν και κάποιες εικόνες μέσα από αυτό, ώστε να καταστεί ευχάριστο και απόλυτα κατανοητό για τον αναγνώστηπαίχτη. 4.1 Είδος παιχνιδιού Όπως αναφερθήκαμε και στο 1 ο κεφάλαιο, το στυλ και ο τρόπος του παιχνιδιού το κατατάσσει στην κατηγορία των passive παιχνιδιών. Δεν είναι κάποιο παιχνίδι flash, με κινούμενο γραφικό περιβάλλον, όπως αυτά που είναι διαδεδομένα ευρέως το τελευταίο διάστημα. Δεν μπορεί δηλαδή ο χρήστης να κάτσει και να παίζει μαζί του συνεχόμενα μέχρι να το ολοκληρώσει. Απαιτεί κάποιο χρονικό διάστημα, μετά το πέρας του οποίου θα έχει φτάσει αισίως στο τελείωμά του. Αυτό το χρονικό διάστημα ποικίλει από χρήστη σε χρήστη, διότι έχει να κάνει με και με την τύχη του καθενός. 4.2 Ρόλος και σκοπός του χρήστη Ο χρήστης παίρνει τον ρόλο ενός αστυνομικού ντετέκτιβ (επιθεωρητή) και προσπαθεί, συλλέγοντας κάποια αποδεικτικά στοιχεία, να λύσει το εκάστοτε μυστήριο που του παρουσιάζεται. Καλείται λοιπόν να υπερασπιστεί την πόλη την οποία έχει αναλάβει, και να φέρει εις πέρας τις όποιες υποθέσεις του ανατεθούν. Υποθέσεις μπορούν να προκύψουν σε διάφορα μέρη του χάρτη της πόλης. Στον τρόπο με τον οποίο θα επιτευχθεί αυτό γίνεται εκτενής αναφορά παρακάτω. 4.3 Πως παίζεται - Περιβάλλον Απαραίτητα εργαλεία για την συμμετοχή μας στο παιχνίδι, είναι φυσικά ένας ηλεκτρονικός υπολογιστής ο οποίος έχει πρόσβαση στο διαδίκτυο. Από εκεί και πέρα όλα αφήνονται στην διάθεση και στην τύχη του χρήστη Ξεκινώντας Ανοίγοντας έναν φυλλομετρητή (browser) της αρεσκείας μας, πηγαίνουμε επάνω στην μπάρα διευθύνσεων και πληκτρολογούμε την ηλεκτρονική διεύθυνση 24

26 του παιχνιδιού ( Μπαίνοντας, βρισκόμαστε στην αρχική σελίδα του και θα παρατηρήσουμε ότι για να μπορέσουμε να συμμετάσχουμε σε αυτό, θα πρέπει να δημιουργήσουμε έναν νέο χρήστη Εγγραφή νέου χρήστη Σαν πρώτη φορά που επισκεπτόμαστε την σελίδα του παιχνιδιού, βασική προϋπόθεση για να συνεχίσουμε με το παίξιμο αυτού, είναι να δημιουργήσουμε ένα νέο λογαριασμό χρήστη. Κάνοντας κλικ στο κουμπί μεταφερόμαστε στη σελίδα η οποία περιέχει μια φόρμα εγγραφής ζητώντας τα εξής στοιχεία: Όνομα χρήστη (username), Κωδικό πρόσβασης (password), Επιβεβαίωση κωδικού πρόσβασης (repeat password), Διεύθυνση ηλεκτρονικού ταχυδρομείου ( ) Αφού συμπληρώσουμε υποχρεωτικά όλα τα πεδία της φόρμας, η εγγραφή ολοκληρώνεται κάνοντας κλικ στο κουμπί Register. Μετά το πέρας της εγγραφής μας, στην διεύθυνση του ηλεκτρονικού ταχυδρομείου που έχουμε ορίσει, καταφθάνει ένα νέο ηλεκτρονικό μήνυμα. Ανοίγοντάς το, υπάρχει ένας σύνδεσμος (link) στον οποίο κάνουμε κλικ ούτως ώστε να ενεργοποιηθεί ο λογαριασμός που δημιουργήσαμε Είσοδος εγγεγραμμένου χρήστη Εφόσον έχουμε δημιουργήσει και ενεργοποιήσει κάποιο λογαριασμό, είμαστε πλέον έτοιμοι, με τα στοιχειά που δηλώσαμε, να εισέλθουμε στο παιχνίδι. Τα πληκτρολογούμε συνεπώς στα αντίστοιχα πεδία και κάνουμε κλικ στο κουμπί Log In (εικόνα 9). Εικόνα 7: φόρμα εισαγωγής Εκκίνηση από τα κεντρικά γραφεία Καθώς έχουμε πραγματοποιήσει την εισαγωγή του χρήστη μας στο παιχνίδι, για πρώτη φορά μετά την δημιουργία του, η πρώτη εικόνα που βλέπουμε είναι ο επιθεωρητής μας στο γραφείο του. Κι αυτό γιατί ξεκινάμε από την περιοχή όπου 25

27 στεγάζεται το αρχηγείο της αστυνομίας. Εδώ ξεκινάει και η πρώτη μας επαφή και γνωριμία με το παιχνίδι. Στα αριστερό μέρος τις ιστοσελίδας μας βρίσκεται ένα μενού επιλογών (υποενότητα 3.3.6) στο οποίο συναντάμε τα κουμπιά Detective και πιο κάτω το How to play Πατώντας το δεύτερο κουμπί μεταφερόμαστε στη σελίδα που περιέχει οδηγίες για το πώς παίζεται το παιχνίδι, ενώ πατώντας το πρώτο έχουμε τις εξής 3 επιλογές: Profile, (βλέπουμε κάποιες πληροφορίες χρήστη) Change Password, (αλλάζουμε τον τρέχον κωδικό πρόσβασης) Log Out (έξοδος χρήστη από το παιχνίδι) Επόμενο μας βήμα είναι να πατήσουμε το κουμπί Map, που βρίσκεται κάτω από την εικόνα που δείχνει τον ντετέκτιβ στο γραφείο του, ώστε να μεταβούμε στον χάρτη της πόλης. Εκεί πλέον είμαστε έτοιμοι να επιλέξουμε την τοποθεσία της πρώτης μας αποστολής, την Κεντρική Τράπεζα Χάρτης και Υποθέσεις προς εξιχνίαση Κάνοντας κλικ, όπως είπαμε στην προηγούμενη ενότητα, στο κουμπί Map έχουμε μπροστά μας πλέον τον χάρτη της πόλης (εικόνα 10), όπου θα εμφανίζονται οι διάφορες εγκληματικές υποθέσεις. Εμείς καλούμαστε λοιπόν με την ιδιότητα του αστυνομικού ντετέκτιβ, να λύσουμε το οποιοδήποτε μυστήριο μας παρουσιαστεί. Στα πλαίσια της πτυχιακής μας εργασίας, η υπόθεση που προκύπτει και επιλύεται από τον χρήστη είναι αυτή στην Κεντρική Τράπεζα. Η προσπάθειά μας όμως δεν σταματά εδώ. Μετά το πέρας της εργασίας, έχουμε σκοπό να συνεχίσουμε την προσπάθεια την οποία ξεκινήσαμε προσθέτοντας παραπάνω υποθέσεις προς επίλυση (όπως στο Πρατήριο Φυσικού Αερίου και στο Ξενοδοχείο). Σημείωση ότι για να μεταβείς στην επομένη υπόθεση θα πρέπει να έχει εξιχνιαστεί η τρέχουσα. Εικόνα 8: χάρτης της πόλης 26

28 Πρώτη υπόθεση Περιγραφή σεναρίου Η πρώτη αποστολή προς εξιχνίαση βρίσκεται στα δυτικά της πόλης, στην Κεντρική Τράπεζα. Εκεί όπου διαδραματίζεται μια ένοπλη ληστεία. Εικόνα 9: η Κεντρική Τράπεζα «Ο ντετέκτιβ μας μετά από τηλεφώνημα που δέχτηκε δεν έχασε χρόνο, πήρε γρήγορα το παλτό του, το σήμα και την κάρτα του τμήματος, το όπλο του και το σημειωματάριο του και ξεκίνησε. Φτάνοντας εκεί, αντικρίζει το μεγαλεπήβολο κτίριο της κεντρικής τράπεζας. Μόνο που αυτή την φορά, επικρατούσε ένα χάος. Ο κόσμος όλος ήταν εκτός του κτηρίου, ενώ άλλες φορές θα ήταν γεμάτο από άτομα που έμπαιναν και έβγαιναν από το κτήριο. Άλλοι ήταν πιο ψύχραιμοι, ενώ ορισμένα άτομα, εργαζόμενοι στην τράπεζα αλλά και απλοί πολίτες, είχαν σοκαριστεί. Η περιοχή είχε γεμίσει με αστυνομικά αυτοκίνητα, ενώ οι πρώτοι ένστολοι ήδη άπλωναν την κλασσική ταινία που απαγορεύει αναρμοδίους από το να πλησιάσουν την περιοχή. Ο ντετέκτιβ μας γρήγορα μπήκε μέσα στο κτήριο και έφτασε κοντά στα ταμεία. Εκεί παρατήρησε αυτό που γρήγορα θα γινόταν το 1 ο στοιχείο: η κάμερα του κλειστού κυκλώματος. Όπως φαίνεται οι δράστες ήταν πολύ βιαστικοί ή αρχάριοι για να την παρατηρήσουν. Ζήτησε από τον διευθυντή να τον οδηγήσει στο δωμάτιο που θα μπορούσαν να δουν τι είχε καταγράψει η κάμερα. Παρατηρώντας το βίντεο, ο ντετέκτιβ μας ξεκίνησε να συλλέγει τις πρώτες του πληροφορίες. Οι δράστες ήταν δυο έδειχνε η κάμερα, μετρίου αναστήματος ο ένας, αρκετά ψηλός ο άλλος. Και οι δυο ληστές είχαν καλυμμένα τα πρόσωπα τους με μάσκες, και φορούσαν γάντια για να μην αφήσουν δακτυλικά αποτυπώματα. Σε κάποιο σημείου του βίντεο ο ντετέκτιβ παρατήρησε πως ο ένας από τους δυο ληστές είχε συνεπλάκη με τον υπάλληλο security της τράπεζας. Ίσως να μπορέσει να μάθει κάτι από αυτόν 27

29 Στην συνεχεία ο ντετέκτιβ μας συνομιλεί με μια αυτόπτη μαρτύρα που ήταν παρών σε όλη την ληστεία. Ο υπάλληλος security είναι στο νοσοκομείο, με ευτυχώς απλά μια διάσειση. Η μάρτυρας αφού συνέρχεται από το σοκ πληροφορεί τον ντετέκτιβ πως διέφυγαν με ένα μαύρο αμάξι, και κυρίως για κάτι σημαντικό: είδε πως όταν πιάστηκαν στα χέρια ο ένας δράστης με τον υπάλληλο security, ο δράστης πριν τον αφήσει λιπόθυμο με ένα χτύπημα στο κεφάλι, ο υπάλληλος κατάφερε να του σκίσει το ένα γάντι. Χάρη σε αυτήν την πληροφορία ο ντετέκτιβ μπόρεσε να συνεχίσει το έργο του. Πήγε στο χρηματοκιβώτιο από το οποίο οι ληστές πήραν ένα μεγάλο ποσό χρημάτων, και κατάφερε να βρει ένα δακτυλικό αποτύπωμα. Όσο χρήσιμο και αν ήταν αυτό το στοιχείο, επιστρέφοντας στο τμήμα διαπίστωσε ότι δεν αντιστοιχούσε σε κάποιον κακοποιό στην βάση δεδομένων της αστυνομίας, βάζοντας την λύση της υπόθεσης σε μια μικρή παύση. Η συνέχεια της επίλυσης του εγκλήματος ήρθε δυο μέρες μετά, όταν ο ντετέκτιβ ειδοποιήθηκε ότι στα περίχωρα της πόλης είχε εντοπιστεί ένα παρατημένο όχημα. Ο ντετέκτιβ κατέφθασε γρήγορα στην περιοχή. Εκεί έκανε δυο σημαντικές αποκαλύψεις. Η μια ήταν ότι το αμάξι ήταν ακριβώς όπως το είχε περιγράψει η αυτόπτης μάρτυρας δυο ημέρες πριν έξω από την κεντρική τράπεζα. Η επιβεβαίωση ήρθε αμέσως μετά, όταν ο ντετέκτιβ βρήκε ένα δακτυλικό αποτύπωμα στο χερούλι της πόρτας του αμαξιού, που ήταν το ίδιο με αυτό του χρηματοκιβωτίου. Το τελευταίο και σημαντικότερο στοιχείο που ανακάλυψε ο ντετέκτιβ ήταν δυο αποδείξεις πληρωμής ξενοδοχείου μέσα στο ντουλαπάκι του συνοδηγού. Αυτά αποδείκνυαν ότι οι ληστές είχαν κάνει check-in στο ξενοδοχείο της πόλης λίγες ημέρες πριν. Ο ντετέκτιβ χωρίς να χάνει χρόνο, συγκεντρώνοντας μια ομάδα αστυνομικών έτρεξε στο ξενοδοχείο, όπου αφού πληροφορήθηκε πως οι δυο δράστες βρισκόντουσαν ακόμα μέσα στο διαμέρισμα που είχαν κλείσει, έκανε έφοδο στο διαμέρισμα και συνέλαβε τους ληστές, οι όποιοι δεν είχαν προλάβει να ξοδέψουν τα χρήματα που είχαν ληστέψει Υπόλοιπες υποθέσεις Όπως αναφέρθηκε και ποιο πάνω, η υπόθεση που θα κληθεί να φέρει εις πέρας ο χρήστης είναι στην Κεντρική Τράπεζα. Κι αυτό στα πλαίσια της εργασίας μας μόνο. Μετά από αυτήν θα υπάρξουν επιπλέον τοποθεσίες και αποστολές όπως, η έκρηξη στο πρατήριο φυσικού αερίου και η δολοφονία σε μια από της πολυτελής σουίτες του ξενοδοχείου (εικόνες 12,13). 28

30 Εικόνα 10: Πρατήριο φυσικού αερίου Εικόνα 11: Ξενοδοχείο Πως παίζω Ο στόχος του χρήστη, σε κάθε υπόθεση που παρουσιάζεται, είναι να συλλέξει τα 5 αποδεικτικά στοιχεία που απαιτούνται ώστε να εξιχνιάσει το έγκλημα. Ας το δούμε λίγο βαθύτερα.. Ο χρήστης λοιπόν, χρησιμοποιώντας τον χάρτη της πόλης, μεταφέρεται κάθε φορά στην οποιαδήποτε τοποθεσία βρίσκεται το μυστήριο που καλείται να λύσει. Θα δούμε την υπόθεση της ληστείας στην κεντρική τράπεζα. Για να μεταβούμε εκεί, κάνουμε κλικ στο κουμπί Map και έπειτα κλικ στην τράπεζα που βρίσκεται στα νοτιοανατολικά του χάρτη. Βλέπουμε και στην οθόνη μας μετά το πάτημα του κουμπιού ότι βρισκόμαστε πράγματι στο μέρος εκείνο. Τώρα πλέον είμαστε θέση να ξεκινήσουμε την συλλογή των αποδεικτικών στοιχείων. Πως το καταφέρνουμε αυτό; Πηγαίνοντας στο μενού αριστερά, κάνουμε κλικ στο κουμπί Notebook. Εκεί βλέπουμε το σημειωματάριο (εικόνα 15) μας στο οποίο και θα εμφανίζονται τα αποτελέσματα της κάθε αναζήτησης στοιχείου. Για να αναζητήσουμε πληροφορίες ή στοιχεία, κάνουμε κλικ κάθε φορά στον μεγεθυντικό φακό (εικόνα 14) που βρίσκεται πάνω από το σημειωματάριο μας. Για παράδειγμα, με το πάτημα του φακού μπορεί να μας εμφανιστεί στο σημειωματάριο πως «Βρέθηκε ένα ύποπτο δακτυλικό αποτύπωμα!». Ο φακός είναι διαθέσιμος για πάτημα κάθε 15 λεπτά της ώρας (15 δευτερόλεπτα για την παρουσίαση της εργασίας). Συνεπώς, δεν μπορεί ο χρήστης να τον χρησιμοποιεί συνεχεία, παίζει και ο παράγοντας χρόνος το ρόλο του. Κάνοντας κλικ στο μεγεθυντικό φακό λοιπόν, περιμένουμε να δούμε στο σημειωματάριο αν ο ντετέκτιβ μας έχει γράψει κάποια σημείωση. Αυτή η σημείωση σημαίνει ταυτόχρονα ότι έχει ανακαλύψει κάποιο σημαντικό στοιχείο. Προσοχή! Δεν είναι καθόλου σίγουρο ότι με το πάτημα του θα ανακαλύψουμε και κάτι. Και εδώ έρχεται να παίξει το ρόλο του και ο παράγοντας τύχη. Μπορεί δηλαδή με το πρώτο πάτημα στα 15 λεπτά να βρει κάποιο στοιχείο αλλά μπορεί να το βρει και σε τρία 15λεπτα (σε τρεις προσπάθειες δηλαδή). Οπότε 29

31 δεν είναι σίγουρο σε πόσο χρονικό διάστημα θα ολοκληρώσει την συλλογή των 5 στοιχείων που απαιτούνται! Σημείωση, τα 5 στοιχεία που θα εμφανιστούν είναι προκαθορισμένα από εμάς και με συγκεκριμένη σειρά, γιατί το ένα στοιχείο εξαρτιέται από το άλλο. Ακολουθείται δηλαδή η ροη του σεναρίου της υπόθεσης. Εικόνα 12: μεγεθυντικός φακός Εικόνα 13: σημειωματάριο Πως λύνεται η υπόθεση Μόλις ο χρήστης συγκεντρώσει και τα 5 στοιχεία (εικόνα 16), με την διαδικασία που περιγράψαμε στην προηγούμενη υποενότητα, τότε εμφανίζεται και το σχετικό μήνυμα στο σημειωματάριο, Νομίζω πως είναι έτοιμος πλέον να λύσω το μυστήριο!. Εικόνα 14: το σημειωματάριο όταν έχουμε βρει και τα 5 στοιχεία Επόμενο βήμα του χρήστη είναι να κάνει αυτό ακριβώς που λέει και το μήνυμα. Στην σελίδα που θα γίνει αυτό μεταφερόμαστε με 2 τρόπους. Είτε 30

32 κάνοντας κλικ το μήνυμα που είναι και σύνδεσμος, είτε κλικ στο κουμπί Inventory από το μενού πλοήγησης (υποενότητα 3.3.6) στα αριστερά. Μέσα στο Inventory μπορούμε να δούμε συγκεντρωμένα και με μικρές εικόνες (εικόνα 17) τα στοιχεία που βρέθηκαν. Κάτω από αυτές υπάρχει ένα νέο κουμπί μέσω του οποίου θα οδηγείτε ο χρήστης στην λύση της υπόθεσης. Πατώντας το εμφανίζεται ένα μίνι παιχνίδι μνήμης, το οποίο στην ουσία με την λύση του θα σημαίνει πως ο χρήστης έχει λύσει ολοκληρωτικά και την υπόθεση στην περιοχή που βρίσκεται. Η αποστολή μας μετά και από αυτό έχει ολοκληρωθεί επιτυχώς, κάτι που μας δίνει την δυνατότητα να προχωρήσουμε στην επόμενη, πάντα βέβαια χρησιμοποιώντας τον χάρτη. Εικόνα 15: τα 5 στοιχεία στο Inventory Μενού πλοήγησης Ας δούμε συγκεντρωτικά και αναλυτικά το που μας οδηγεί το κάθε κουμπί που χρησιμοποιούμε κατά την πλοήγηση μας στο παιχνίδι. Εικόνα 16: κουμπιά του μενού πλοήγησης 31

33 Το Detective user (όπου στη θέση του user μπαίνει το όνομα του χρήστη) πατώντας το μας ανοίγει κάποια επιπλέον κουμπιά (εικόνα 18) για να επιλέξουμε την ενέργεια που επιθυμούμε. Η επιλογή Profile περιέχει κάποιες πληροφορίες του χρήστη. Όπως το όνομα χρήστη, τον αριθμό μητρώου χρήστη, το πότε έγινε μέλος και τον χρόνο που αναζήτησε τελευταία φορά αντικείμενο. Στο Change Password όπως είναι εμφανές μπορεί ο χρήστης αν επιθυμεί να αλλάξει των κωδικό πρόσβασης του. Πατώντας το κουμπί Log Out κάνει έξοδο από το παιχνίδι. Το κουμπί Notebook μας οδηγεί στην σελίδα όπου εμφανίζεται το σημειωματάριο και ο μεγεθυντικός φακός. Στην ουσία είναι η πιο σημαντική μας σελίδα. Εκεί όπου παίζεται το παιχνίδι και γίνεται η αναζήτηση στοιχείων. Στην σελίδα που μεταφερόμαστε κάνοντας κλικ στο Inventory, μπορούμε να δούμε τα αντικείμενα-στοιχεία που έχουμε ανακαλύψει για την υπόθεση. Πατώντας και αυτά μεταβαίνουμε σε μια σελίδα με περεταίρω πληροφορίες για το εκάστοτε αντικείμενο. Το κουμπί Map μας μεταφέρει στον χάρτη της πόλης, και μπορούμε να μετακινηθούμε σε οποιαδήποτε τοποθεσία υπάρχει υπόθεση προς εξιχνίαση. Πατώντας το Area Information οδηγούμαστε στη σελίδα όπου διαβάζουμε επιπλέον πληροφορίες όσον αφορά την περιοχή που βρισκόμαστε. Στην ουσία και είναι μια μικρή εισαγωγή της υπόθεσης. Ίσα ίσα να μπει ο χρήστης στο κλίμα. Στο Case Solved μπορούμε να διαβάσουμε την ιστορία του πως λύθηκε η υπόθεση που είχαμε αναλάβει και φέραμε εις πέρας. Τέλος, το πώς παίζεται το παιχνίδι και πως πρέπει να κινηθούμε περιγράφονται στη σελίδα που μεταφερόμαστε κάνοντας κλικ στο κουμπί How To Play. 32

34 Κεφάλαιο 5ο : Σχεδιασμός μηχανισμού παιχνιδιού Στο κεφάλαιο αυτό αποτυπώνουμε τον μηχανισμό του παιχνιδιού, σε μορφή διαγράμματος ροής. Χωρίσαμε τα διαγράμματα σε τρεις ενότητες. 5.1 Διάγραμμα Ροής Log in / Register Το πρώτο αναλύει τις περιπτώσεις από την εμφάνιση της πρώτης σελίδας του παιχνιδιού στην οθόνη μέχρι και την στιγμή που ο χρήστης έχοντας δημιουργήσει λογαριασμό κάνει Log in στο παιχνίδι. 33

35 5.2 Διάγραμμα Ροής κεντρικού παιχνιδιού Το δεύτερο αναλύει τον μηχανισμού του κεντρικού παιχνιδιού, από την άφιξη του χρήστη στην δεύτερη περιοχή που έχει πραγματοποιηθεί το πρώτο έγκλημα, όλα τα βήματα μέχρι αυτό να διαλευκανθεί, μέχρι την λύση του. 34

36 5.3 Διάγραμμα Ροής ολοκλήρωσης παιχνιδιού Το τρίτο διάγραμμα περιέχει τις τελικές κινήσεις του παιχνιδιού, τι μπορεί να κάνει ο χρήστης από την στιγμή που έλυσε το έγκλημα. 35

37 Κεφάλαιο 6ο : Γενικά συμπεράσματα και βελτιώσεις Στο κεφάλαιο αυτό θα γίνει μια αναφορά σε ότι συμπεράσματα έχουμε καταλήξει, εμείς και άλλοι χρήστες που έχουν παίξει το παιχνίδι, καθώς και τυχόν βελτιώσεις που μπορούν να υλοποιηθούν μελλοντικά. Επίσης δεν παραλείπουμε να αναφέρουμε τα συμπεράσματα μας και τα κέρδη που αποκομίσαμε εκπονώντας την εργασία αυτή. 6.1 Εξαγωγή συμπερασμάτων Μετά από μια διαδικασία που περιλάμβανε το παίξιμο ορισμένων παρτίδων παιχνιδιού από εμάς τους ίδιους, αλλά και των ατόμων που θέλανε να συμμετάσχουνε σε αυτό, οδηγηθήκαμε σε κάποια συμπεράσματα. Όσον αφορά το παιχνίδι, δεν είναι γνωστό το πότε ο χρήστης θα καταφέρει να το ολοκληρώσει καθώς αυτό εξαρτιέται από 2 παράγοντες. Τον χρόνο που θα χρειαστεί ο παίχτης ώστε να λύσει την εκάστοτε αστυνομική υπόθεση αλλά και το πόσο τυχερός θα σταθεί με την ανεύρεση ή όχι των αποδεικτικών στοιχείων (βλέπε υποενότητες & 4.3.5). Μια υπόθεση μπορεί να λυθεί από 75 της ώρας μέχρι το διπλάσιο ή και το τριπλάσιο! Μπορεί να μην είναι όπως τα κλασσικά παιχνίδια σε flash περιβάλλον, που είναι πολύ διαδεδομένα τελευταία, δεν παύει όμως να είναι μια διαφορετική και συνάμα ενδιαφέρουσα κατηγορία. Τα γενικά συμπεράσματα στα οποία καταλήξαμε, όλο αυτό το χρονικό διάστημα που ασχοληθήκαμε με την εργασία, είναι πάμπολλα. Ξεκινήσαμε χωρίς κάποια ουσιαστική γνώση περί PHP, CSS, Javascript, jquery και καταλήξαμε με το να τα γνωρίσουμε σε αρκετά ικανοποιητικό βαθμό. Ανακαλύψαμε ότι είναι σημαντικό να κάτσει κάποιος μόνος του από την αρχή, χρησιμοποιώντας βιβλία ή το διαδίκτυο, και από το μηδέν να «χτίσει» το προϊόν που έχει αναλάβει. Καταλήξαμε πως οι γλώσσες προγραμματισμού καθώς και τα εργαλεία που χρησιμοποιήθηκαν αποτελούν το μέλλον αυτού του κλάδου που ονομάζεται Web Design (δημιουργία ιστοσελίδας). Αν κάποιος από εμάς θελήσει να ακολουθήσει τον δρόμο αυτό επαγγελματικά, κρίνεται απαραίτητο να ενημερώνεται συνεχώς για τυχόν νέες τεχνολογίες ώστε να βρίσκεται πάντα στην επικαιρότητα. 36

38 6.2 Τυχών βελτιώσεις Κάποιες βελτιώσεις που είναι καλό να γίνουν όσον αφορά το λογισμικό και προγραμματιστικό κομμάτι θα ήταν η ολική χρήση της HTML5 και CSS3 που είναι και τα πιο πρόσφατα εργαλεία που μπορούμε να χρησιμοποιήσουμε. Μελλοντικά όμως αυτό διότι η HTML5 έχει ακόμα δρόμο μπροστά της μέχρι να καθιερωθεί ως πρότυπο. Έχουμε επίσης σκεφτεί ορισμένες ιδέες και μελλοντικά πλάνα τα οποία μπορούνε να πάνε ένα βήμα παραπάνω το παιχνίδι που δημιουργήσαμε. Όσον αφορά το οπτικοακουστικό κομμάτι θα ήταν ευχάριστο να προστεθούν κάποιοι midi ήχοι στα σημεία του παιχνιδιού όπου υπάρχει σασπένς. Μια σκέψη που θα εμπλούτιζε το όλο περιεχόμενο ήταν η δυνατότητα αλληλεπίδρασης μεταξύ των χρηστών. Να μπορούν δηλαδή οι χρήστες να γίνονται «φίλοι» μεταξύ τους, να μπορούν να επικοινωνούν αλλά και να μπορούν να ανταλλάζουν αντικείμενα ο ένας με τον άλλο. Η ύπαρξη επίσης κάποιου High score, που στην ουσία στο παιχνίδι μας θα ισοδυναμούσε όχι με πόντους, αλλά επειδή έχουμε να κάνουμε με τον χρόνο θα μπορούσε για παράδειγμα να υπολογίζεται σε πόση ώρα κατάφερε να ολοκληρώσει την τάδε υπόθεση ο παίχτης. Μια άλλη μελλοντική μας σκέψη θα μπορούσε να ήταν, να μην τελειώνει ποτέ το παιχνίδι εφόσον αποφασίζαμε να προσθέτουμε συνεχώς νέες υποθέσεις στον χάρτη καθώς και νέους χάρτες. Τέλος, εάν όλα τα παραπάνω γινόντουσαν πράξη θα σήμαινε ταυτόχρονα πως θα δημιουργούταν μια μεγάλη κοινότητα χρηστών-παιχτών, που λογικό θα ήταν να έχουν κάποια ερωτήματα να θέσουν ή τυχών κάποιες απορίες. Την λύση στο ζήτημα αυτό θα μπορούσε να δώσει η δημιουργία ενός φόρουμ μεταξύ χρηστών αλλά και των δημιουργών. 37

39 Παράρτημα 1ο : Αναλυτικότερα περί γλωσσών προγραμματισμού Στην ενότητα αυτή θα κάνουμε μια εκτενέστερη αναφορά στα εργαλεία που χρησιμοποιήθηκαν καθώς και στην τεχνολογία που αναπτύχθηκε. Ένα προγραμματιστικό εργαλείο λοιπόν, είναι ένα πρόγραμμα υπολογιστή ή μια εφαρμογή που χρησιμοποιούν οι προγραμματιστές για να δημιουργήσουν, αποσφαλματώσουν ή να συντηρήσουν άλλα προγράμματα και εφαρμογές. Ο όρος αναφέρεται συνήθως σε σχετικά απλά προγράμματα που μπορούν να συνδυαστούν μαζί για την επίτευξη κάποιου αποτελέσματος, όπως ανάλογα κάποιος τεχνίτης θα χρησιμοποιούσε πολλά εργαλεία για να δημιουργήσει ένα φυσικό αντικείμενο. Κάθε σελίδα που εμφανίζεται στο Internet είναι ένα αρχείο γραμμένο με τη γλώσσα HTML (Γλώσσα Χαρακτηρισμού Υπερ-Κειμένου), που περιλαμβάνει το κείμενο της σελίδας, τη δομή της και τους συνδέσμους προς άλλα έγγραφα, εικόνες ή άλλα μέσα. Ο φυλλομετρητής (Web browser) παίρνει τις πληροφορίες από τον Web server, τις μορφοποιεί και τις εμφανίζει κατάλληλα για το σύστημά μας. Μια Web σελίδα ή ιστοσελίδα (Web page) είναι ένα μεμονωμένο στοιχείο μιας παρουσίασης για το Web και περιέχεται σ ένα αρχείο στον δίσκο, το οποίο ανακτάται από έναν Web server και μορφοποιείται μέσω ενός φυλλομετρητή. 1.1 Τι είναι η HTML Είναι η πρώτη γλώσσα που χρησιμοποιήθηκε στο διαδίκτυο και συνεχίζει να χρησιμοποιείται ακόμη. Τα αρχικά HTML προέρχονται από τις λέξεις HyperText Markup Language. Η html δεν είναι μια γλώσσα προγραμματισμού. Είναι μια περιγραφική γλώσσα, δηλαδή ένας ειδικός τρόπος γραφής κειμένου. Ο καθένας μπορεί να δημιουργήσει ένα αρχείο HTML χρησιμοποιώντας απλώς έναν επεξεργαστή κειμένου. Η HTML ορίζει ένα σύνολο κοινών στυλ για τις Web σελίδες, όπως τίτλοι (titles), επικεφαλίδες (headings), παράγραφοι (paragraphs), λίστες (lists) και πίνακες (tables). Ορίζει επίσης στυλ χαρακτήρων, όπως η έντονη γραφή (boldface) και οι ενότητες κώδικα. Κάθε στοιχείο έχει ένα όνομα και περιέχεται μέσα στα σύμβολα <>, που αποκαλούνται tags (ετικέτες). Όταν γράφουμε μια Web σελίδα με την HTML, στην ουσία δίνουμε τίτλους στα διάφορα στοιχεία της σελίδας μ αυτά τα tags. Οι φυλλομετρητές, μαζί με τη δυνατότητά τους να ανακτούν σελίδες από το Web, λειτουργούν επίσης και σαν μορφοποιητές για την HTML. Όταν διαβάζουμε μια σελίδα γραμμένη με την HTML σ έναν φυλλομετρητή, ο φυλλομετρητής διαβάζει (διερμηνεύει) τα tags της HTML και μορφοποιεί το κείμενο και τις εικόνες στην οθόνη. Διαφορετικοί φυλλομετρητές, οι οποίοι τρέχουν σε διαφορετικούς υπολογιστές, μπορεί να αντιστοιχίζουν διαφορετικά στυλ σε κάθε στοιχείο μιας 38

40 σελίδας. Αυτό σημαίνει ότι οι σελίδες που δημιουργούμε με την HTML μπορεί να δείχνουν εντελώς διαφορετικές από σύστημα σε σύστημα και από φυλλομετρητή σε φυλλομετρητή. Δηλαδή, οι πραγματικές πληροφορίες και οι σύνδεσμοι που περιέχουν οι σελίδες μας θα είναι πάντα εκεί, αλλά η εμφάνιση των σελίδων στην οθόνη θα είναι διαφορετική [22] Εκδόσεις HTML Το 1990 ο Tim Berners-Lee από το Cern, το εργαστήριο φυσικής της Γενεύης, δημιούργησε ένα νέο πρωτόκολλο με το οποίο θα μπορούσαν να μεταφέρονται κάθε είδος αρχείων και αντικειμένων μέσα από το Internet. Το πρωτόκολλο αυτό ονομάστηκε HTTP (HyperText Transfer Protocol) και σηματοδότησε την αρχή του WWW όπως το ξέρουμε σήμερα. Οι σελίδες που ήταν η βάση του WWW ήταν γραμμένες στην πρώτη έκδοση της γλώσσα HTML. Το 1994 αναπτύσσεται το πρότυπο HTML 2.0 από ένα διεθνή οργανισμό (Internet Engineering Task Forse). H επόμενη έκδοση η 3.0 δεν έγινε αποδεκτή από τις Microsoft και Netscape οπότε γρήγορα αντικαταστάθηκε από την έκδοση 3.2 (1996). Η τελευταία περιελάμβανε πολλές από τις σημάνσεις (tags) που είχαν εισάγει οι δύο εταιρίες. Η έκδοση 4.0 παρουσιάστηκε τον Ιούνιο του Φτάνοντας στο σήμερα, η HTML5 είναι το νέο standard πρότυπο για την HTML, την XHTML και την HTML DOM. Η ανάπτυξη της HTML5 έγινε με την συνεργασία της World Wide Web Consortium (W3C) και της Web Hypertext Application Technology Working Group (WHATWG). Η WHATWG εργαζόταν επάνω στις web φόρμες και τις web εφαρμογές, ενώ η W3C, η οποία δημιούργησε και διαχειρίζεται τα πρότυπα της HTML και της XHTML, ασχολήθηκε με την ανάπτυξη του νέου προτύπου XHTML 2.0. Το 2006 αποφάσισαν να συνεργαστούν για να δημιουργήσουν την HTML5 [23] Η HTML στις μέρες μας Νεώτερες γλώσσες είτε αυτόνομες είτε εξαρτώμενες από την HTML (όπως η Java, η XML, η PHP ή η ASP) προχωρούν παραπέρα και επιτρέπουν πιο σύνθετη δομή, διαχείριση βάσεων δεδομένων και πολλά άλλα. Σήμερα πολλοί είναι εκείνοι που δημιουργούν μια ιστοσελίδα σε κάποιο πρόγραμμα που επιτρέπει την δημιουργία χωρίς την συγγραφή κώδικα. Η κοινή άποψη πάνω στο θέμα όμως είναι ότι κάτι τέτοιο είναι αρνητικό επειδή ο δημιουργός δεν έχει τον απόλυτο έλεγχο του κώδικα με αποτέλεσμα πολλές φόρες να υπάρχει οπτικό χάος στην προσπάθεια των browser να εμφανίσουν την ιστοσελίδα [24]. 39

41 1.1.3 Παράδειγμα HTML Θα γράψουμε το πιο απλό πρόγραμμα για να εμφανίσουμε στην οθόνη το μήνυμα: Γεια σου κόσμε!. Δημιουργούμε ένα νέο έγγραφο χρησιμοποιώντας έναν κειμενογράφο και αντιγράφουμε μέσα του το παρακάτω κείμενο: <html> <head> <title> Πρώτη μου σελίδα HTML </title> </head> <body> Γεια σου κόσμε! </body> </html> Στην συνέχεια το αποθηκεύουμε με το όνομα myfirst.html. Ανοίγουμε τώρα το αρχείο αυτό με τον αγαπημένο μας browser (πχ. Mozilla Firefox, Safari). Η πρώτη γραμμή περιέχει - γράφει <html>. Αυτό βοηθάει τον browser να καταλάβει ότι πρόκειται για html σελίδα. Αν παρατηρήσετε και η τελευταία γραμμή γράφει </html> όπου και αυτό με την σειρά του βοηθάει τον browser να καταλάβει ότι εκεί βρίσκεται το τέλος σελίδας html. Από τα παραπάνω προκύπτει ότι στις εντολές υπάρχει μια αρχή και ένα τέλος που συνήθως έχουν την δομή <αρχή εντολής> περιεχόμενο </τέλος εντολής>. Μέσα στο <head> υπάρχει το σημασμένο κείμενο '<title> Πρώτη μου σελίδα HTML </title>' που καθορίζει τον τίτλο που θα εμφανίζεται στην μπάρα τίτλου του browser. Ακριβώς από κάτω από το <head> γράφει <body> που σημαίνει ότι εκεί αρχίζει το περιεχόμενο της σελίδας. Φυσικά στο τέλος του περιεχομένου υπάρχει το </body> που με την σειρά του δηλώνει το τέλος του περιεχομένου της σελίδας. 1.2 CSS Τα CSS (Cascading Style Sheets, Διαδοχικά Φύλλα Στυλ) αποτελούν ένα πολύ καλό εργαλείο για να μπορούμε να αλλάζουμε την εμφάνιση και τη διάταξη (layout) των ιστοσελίδων μας. Για παράδειγμα, τα CSS έχουν να κάνουν με γραμματοσειρές (fonts), με χρώματα (colors), με περιθώρια (margins), με εικόνες φόντου (background images) και με πολλά άλλα. Μπορούν να μας γλυτώσουν από πολύ χρόνο και κόπο και μας δίνουν τη δυνατότητα να σχεδιάζουμε τις ιστοσελίδες μας με μια εντελώς καινούργια φιλοσοφία. Η κατανόηση των CSS απαιτεί να υπάρχει κάποια βασική εμπειρία με την HTML [25]. 40

42 1.2.1 Τα CSS στην χρήση Για να δημιουργήσουμε, να επεξεργαστούμε έγγραφα και να δουλέψουμε με τα CSS δεν χρειάζεται να χρησιμοποιήσουμε κάποιο πρόγραμμα δημιουργίας ιστοσελίδων, όπως είναι τα γνωστά FrontPage, DreamWeaver ή και το Word, καθώς θα σταθούν εμπόδιο στην κατανόηση των CSS. Αυτό που χρειαζόμαστε είναι ένας απλός επεξεργαστής κειμένου, όπως είναι το Σημειωματάριο (Notepad) των Windows. Μπορούμε να χρησιμοποιήσουμε όποιον φυλλομετρητή (browser) επιθυμούμε για να βλέπουμε πώς θα εμφανίζονται οι ιστοσελίδες που θα δημιουργούμε. Συνεπώς αυτό που χρειαζόμαστε είναι ένας φυλλομετρητής (browser) και ένας απλός επεξεργαστής κειμένου (text editor) [26]. Για τον έλεγχο της εγκυρότητας ενός CSS εγγράφου, με βάση τα web standards, μπορεί να χρησιμοποιηθεί ενός CSS validator (επικυρωτής) που τον βρίσκουμε στην ιστοσελίδα: Πλεονεκτήματα των CSS Στο ερώτημα τι έχουν να μου προσφέρουν τα CSS, μπορούμε να πούμε ότι τα CSS αποτέλεσαν μια επανάσταση στον κόσμο του Web design και τα μεγάλα πλεονεκτήματά τους είναι τα εξής [26] : Πολύ μεγαλύτερη ευελιξία. Το CSS κατέστησε εφικτές μορφοποιήσεις οι οποίες ήταν αδύνατες ή πολύ δύσκολες με την κλασσική HTML. Μικρότερο μέγεθος αρχείου, δεδομένου ότι ο κάθε κανόνας μορφοποίησης γράφεται μόνο μια φορά και όχι σε κάθε σημείο που εφαρμόζεται. Ευκολότερη συντήρηση των ιστοσελίδων. Η εμφάνιση ενός ολόκληρου site μπορεί να ελέγχεται από ένα μόνο εξωτερικό αρχείο CSS. Έτσι, κάθε αλλαγή στο στυλ της ιστοσελίδας μπορεί να γίνεται με μια μοναδική αλλαγή σε αυτό το αρχείο, αντί για την επεξεργασία πολλών σημείων σε κάθε σελίδα που υπάρχει στο site. Καλύτερο SEO (Search Engine Optimization). Οι μηχανές αναζήτησης δεν «μπερδεύονται» ανάμεσα σε περιεχόμενο και τη μορφοποίηση του, αλλά έχουν πρόσβαση στο περιεχόμενο σκέτο, οπότε είναι πολύ ευκολότερο να το καταγράψουν και να το αρχειοθετήσουν (indexing). Γρηγορότερες σελίδες. Όταν χρησιμοποιούμε εξωτερικά το αρχείο CSS (δηλαδή έχουμε δημιουργήσει ένα αρχείο πχ. Style.css και απλά το καλούμε στο κυρίως HTML αρχείο), ο browser την πρώτη φορά που θα φορτώσει κάποια σελίδα του site μας το αποθηκεύει στην cache, οπότε δεν χρειάζεται να το κατεβάσει ξανά κάθε φορά που κατεβάζει ο χρήστης του κάποια άλλη σελίδα του site μας. 41

43 1.3 Javascript Η JavaScript είναι μια γλώσσα συγγραφής σεναρίων (scripting language) που χρησιμοποιείται για να προσθέσει εφέ και διαλογικότητα (αλληλεπίδραση, διαδραστικότητα, interactivity) στις ιστοσελίδες μας και είναι ανταγωνιστική της γλώσσας προγραμματισμού VBScript. Δημιουργήθηκε αρχικά από τον Brendan Eich της εταιρείας Netscape με την επωνυμία Mocha. Αργότερα, Mocha μετονομάστηκε σε LiveScript, και τελικά σε JavaScript. Ο κώδικας της JavaScript γράφεται σε καθαρό κείμενο (ASCII μορφή) και ενσωματώνεται μέσα στον κώδικα της HTML, μπορεί δε να εκτελεστεί αμέσως ή όταν λαμβάνει χώρα ένα συμβάν (event). Δεν γίνεται μεταγλώττιση (compilation) του κώδικα της JavaScript, αρκεί μόνο ο φυλλομετρητής (browser) να υποστηρίζει την JavaScript [27] Τι μπορείτε να κάνετε με Javascript Ενδεικτικά κάποιες λειτουργιές που μπορείτε να γίνουν πράξη κάνοντας χρήση της γλώσσας JavaScript [28] : Δημιουργεί έγγραφα που διαιρούν το παράθυρο του φυλλομετρητή σε επιμέρους κομμάτια. Δημιουργεί έγγραφα με αλληλεπίδραση Περισσότερος έλεγχος στην αλληλεπίδραση με το χρήστη Έγγραφα με μνήμη Ζωντανά έγγραφα Μηνύματα που ολισθαίνουν Ρολόγια Χρονικός μηχανισμός αντίστροφης μέτρησης Έγγραφα με αυτόματη ενημέρωση Παράδειγμα Javascript Ο κώδικας Javascript μιας σελίδας περικλείεται από τις ετικέτες της HTML <script type="text/javascript"> και </script>. Για παράδειγμα, ο ακόλουθος κώδικας Javascript εμφανίζει ένα πλαίσιο διαλόγου με το κείμενο "Γεια σου κόσμε!": <script type="text/javascript"> alert(' Γεια σου κόσμε'); </script> 42

44 1.4 Η ιστορία της PHP Η ιστορία της PHP ξεκινά από το 1994, όταν ένας φοιτητής, ο Rasmus Lerdorf δημιούργησε χρησιμοποιώντας τη γλώσσα προγραμματισμού Perl ένα απλό script με όνομα php.cgi, για προσωπική χρήση. Το script αυτό είχε σαν σκοπό να διατηρεί μια λίστα στατιστικών για τα άτομα που έβλεπαν το online βιογραφικό του σημείωμα. Αργότερα αυτό το script το διέθεσε και σε φίλους του, οι οποίοι άρχισαν να του ζητούν να προσθέσει περισσότερες δυνατότητες. Η γλώσσα τότε ονομαζόταν PHP/FI από τα αρχικά Personal Home Page/Form Interpreter. Το 1997 η PHP/FI έφθασε στην έκδοση 2.0, βασιζόμενη αυτή τη φορά στη γλώσσα C και αριθμώντας περισσότερους από ιστότοπους που τη χρησιμοποιούσαν, ενώ αργότερα την ίδια χρονιά οι Andi Gutmans και Zeev Suraski ξαναέγραψαν τη γλώσσα από την αρχή, βασιζόμενοι όμως αρκετά στην PHP/FI 2.0. Έτσι η PHP έφθασε στην έκδοση 3.0 η οποία θύμιζε περισσότερο τη σημερινή μορφή της. Στη συνέχεια, οι Zeev και Andi δημιούργησαν την εταιρεία Zend (από τα αρχικά των ονομάτων τους), η οποία συνεχίζει μέχρι και σήμερα την ανάπτυξη και εξέλιξη της γλώσσας PHP. Ακολούθησε το 1998 η έκδοση 4 της PHP, τον Ιούλιο του 2004 διατέθηκε η έκδοση 5, ενώ αυτή τη στιγμή έχουν ήδη διατεθεί και οι πρώτες δοκιμαστικές εκδόσεις της επερχόμενης PHP 6, για οποιονδήποτε προγραμματιστή θέλει να τη χρησιμοποιήσει.οι περισσότεροι ιστότοποι επί του παρόντος χρησιμοποιούν κυρίως τις εκδόσεις 4 και 5 της PHP [29] Τι μπορεί να κάνει η PHP Ο κώδικας PHP μπορεί να θέσει ερωτήματα σε βάσεις δεδομένων, να δημιουργήσει εικόνες, να διαβάσει και να γράψει αρχεία, να συνδεθεί με απομακρυσμένους υπολογιστές, κ.ο.κ. Στο πιο βασικό επίπεδο, η PHP μπορεί να κάνει ότι και τα άλλα προγράμματα της τεχνολογίας CGI, όπως επεξεργασία των δεδομένων μιας φόρμας, δημιουργία δυναμικού περιεχομένου ιστοσελίδων ή αποστολή και λήψη cookies. Ίσως το δυνατότερο και πιο σημαντικό χαρακτηριστικό της PHP είναι η υποστήριξη που παρέχει σε μια ευρεία γκάμα από βάσεις δεδομένων. Έτσι, το να δημιουργήσουμε μια ιστοσελίδα που να παρέχει υποστήριξη σε βάσεις δεδομένων, είναι απίστευτα απλό. Σε γενικές γραμμές οι δυνατότητες που μας δίνει είναι απεριόριστες [30] Παράδειγμα PHP Ας δούμε ένα μικρό και απλό παράδειγμα κάνοντας χρήση της γλώσσας PHP. Δημιουργούμε ένα νέο text αρχείο με το notepad (ή όποιο άλλο πρόγραμμα επιθυμούμε) και το ονομάζουμε example.php. Μέσα σε αυτό το αρχείο γράφουμε: 43

45 <?PHP?> echo Γεια σου κόσμε! ; και κλείνοντας το αποθηκεύουμε. Με το ετικέτα <?PHP λέμε στον διακομιστή μας ότι από εκεί αρχίζει το PHP script μας και ότι υπάρχει μετά από αυτό θα πρέπει να περάσει από τον μεταφραστή της PHP πριν στείλει κάτι στον browser του πελάτη. Η μετάφραση σταματάει έως να βρει την ετικέτα τέλους κώδικα η οποία είναι η?> Ανάμεσα τοποθετήσαμε την εντολή Γεια σου κόσμε! ; όπου το μόνο που λέει στον μεταφραστή είναι να εμφανίσει στην έξοδο την φράση Γεια σου κόσμε! 1.5 Βάση Δεδομένων, SQL και MySQL Τι είναι μια Βάση Δεδομένων (ΒΔ) Μια Βάση Δεδομένων (DataBase) είναι ένας οργανωμένος τρόπος αποθήκευσης πληροφοριών και πρόσβασής τους με πολλούς τρόπους με διάφορα προγράμματα. Μια βάση δεδομένων είναι κάτι παραπάνω από μια απλή συλλογή αποθηκευμένων στοιχείων. Ένας άλλος ορισμός είναι ότι μια βάση δεδομένων είναι ένα ολοκληρωμένο σύστημα που αποτελείται από δεδομένα (data) και από το κατάλληλο λογισμικό (software), τα οποία χρησιμοποιώντας το υλικό (hardware) βοηθούν στην ενημέρωση και πληροφόρηση των χρηστών (users). Ένα πρόγραμμα που διαχειρίζεται βάσεις δεδομένων αποκαλείται Σύστημα Διαχείρισης Βάσεων Δεδομένων (DBMS, DataBase Management System) και με την βοήθειά του μπορούμε να αποθηκεύσουμε, προσθέσουμε, τροποποιήσουμε, εμφανίσουμε ή και διαγράψουμε τα αποθηκευμένα δεδομένα [31]. Τα δεδομένα που υπάρχουν στις βάσεις δεδομένων πρέπει να είναι : Ολοκληρωμένα (Integrated), δηλ. τα δεδομένα πρέπει να είναι αποθηκευμένα σε ομοιόμορφα οργανωμένα σύνολα αρχείων όπου δεν πρέπει να υπάρχει επανάληψη ή πλεονασμός (redundancy) των ίδιων στοιχείων. Καταμερισμένα (Shared), δηλ. να μπορούν περισσότεροι του ενός χρήστες να βλέπουν και να μοιράζονται τα ίδια δεδομένα την ίδια χρονική στιγμή Τι είναι η SQL Η SQL αποκαλείται Δομημένη Γλώσσα Ερωτημάτων (Structured Query Language) και αποτελεί την standard γλώσσα για αλληλεπίδραση με τις περισσότερες βάσεις δεδομένων. Είναι η πιο γνωστή γλώσσα για την προσθήκη, την πρόσβαση και την επεξεργασία δεδομένων σε μία Βάση Δεδομένων. Τις εντολές της 44

46 SQL μπορούμε επίσης να τις αποκαλέσουμε και ερωτήματα (queries). Η αρχική έκδοση της γλώσσας ονομάστηκε SEQUEL (Structured English Query Language) και σχεδιάσθηκε από ερευνητική ομάδα της IBM στα πλαίσια του System R (1974). Η εταιρεία Oracle χρησιμοποίησε για πρώτη φορά τη γλώσσα σε εμπορικό ΣΔΒΔ το 1979 [31] Σημαντικότερα πλεονεκτήματα της SQL Η γλώσσα SQL έχει σημαντικά πλεονεκτήματα με βασικότερα τα εξής: Υποστηρίζεται από κάθε σχεσιακό σύστημα, οπότε η διατύπωση των ερωτημάτων είναι ανεξάρτητη του ΣΔΒΔ. Πολλές γλώσσες προγραμματισμού έχουν επεκταθεί ώστε να υποστηρίζουν διατύπωση ερωτημάτων σε SQL. Έχει απλή σύνταξη και αποδεσμεύει το χρήστη από λεπτομέρειες υλοποίησης Βασικά χαρακτηριστικά της MySQL Η MySQL λειτουργεί με το μοντέλο Πελάτη / Εξυπηρετητή (Client/Server). Ο εξυπηρετητής δέχεται αιτήματα από τους πελάτες σχετικά με τη διαχείριση μίας ή περισσότερων βάσεων δεδομένων και προβαίνει στις απαιτούμενες ενέργειες όπως φαίνεται στο παρακάτω σχήμα. Εικόνα 17: Μοντέλο Πελάτη/Εξυπηρετητή της MySQL 45

47 Διαφορά SQL και MySQL Δεν πρέπει να συγχέουμε την SQL με την MySQL. Η MySQL είναι το λογισμικό του διακομιστή βάσεων δεδομένων (database server software) που χρησιμοποιούμε, ενώ η SQL είναι η γλώσσα που χρησιμοποιούμε για να αλληλεπιδράσουμε με την βάση δεδομένων. 1.6 Γνωριμία με το περιβάλλον του phpmyadmin Ανοίγουμε τον web browser και γράφουμε (ή αλλιώς πατάμε το κουμπί «Admin» δίπλα στην MySQL, που βρίσκεται στο κεντρικό πάνελ του XAMPP, βλέπε παρακάτω). Βάζουμε τα στοιχεία μας Username και Password που έχουμε επιλέξει και μπαίνουμε στο πάνελ διαχείρισης. Εκεί μπορούμε εύκολα να δημιουργήσουμε, να διαγράψουμε και να διαχειριστούμε εύκολα οποιοιδήποτε βάση δεδομένων (ΒΔ) επιθυμούμε. Εικόνα 18: Περιβάλλον phpmyadmin 46

48 Παράρτημα 2ο : Εγχειρίδιο Εγκατάστασης Το παρόν παράρτημα σκοπό έχει να οδηγήσει βήμα-βήμα, οποιονδήποτε χρήστη θελήσει να εγκαταστήσει το «One Step Ahead» στον υπολογιστή του. Όλα τα βήματα είναι αναλυτικά με εικόνες και επεξηγηματικό κείμενο, και περιέχουν όλες τις κινήσεις και αλλαγές που πρέπει να κάνει ο χρήστης προκειμένου να έχει με την ολοκλήρωση του τελευταίου βήματος το παιχνίδι, λειτουργικό στον υπολογιστή του. Σημείωση, το εγχειρίδιο εγκατάστασης που παρουσιάζεται αναφέρεται σε υπολογιστές που τρέχουν λειτουργικό σύστημα των Windows. Βήμα 1 ο : Ανοίγουμε τα περιεχόμενα του CD και αντιγράφουμε τα 3 αρχεία που εμφανίζονται στην εικόνα, στον υπολογιστή μας. Αποσυμπιέζουμε με WinZip, WinRAR, 7zip ή το πρόγραμμα αποσυμπίεσης της αρεσκείας μας τα περιεχόμενα των δυο αρχείων.rar, το καθένα στον δικό του φάκελο. Το αρχείο onestepahead.rar περιέχει όλο τον κώδικα και τις εικόνες της πτυχιακής μας. Το αρχείο osa.sql είναι η βάση μας σε συμπιεσμένη μορφή, που σε επόμενο βήμα θα εισάγουμε στο σύστημα μας. Το αρχείο xampp-win beta4-vc9.rar περιέχει το πακέτο εργαλείων XAMPP, που με την σειρά του περιέχει τον web server Αpache, την MySQL, το phpmyadmin, την PHP, και άλλα εργαλεία. Βήμα 2 ο : Μπαίνουμε μέσα στον φάκελο xampp-win beta4-vc9 που έχει δημιουργηθεί, και κάνουμε αποκοπή τον φάκελο xampp, που είναι και ο μόνος φάκελος που βρίσκεται μέσα. Ανοίγουμε τον «Υπολογιστή Μου» και έπειτα τον C: και κάνουμε επικόλληση εκεί. Θα έχουμε ένα αποτέλεσμα όπως αυτό της εικόνας: 47

49 Βήμα 3 ο : Έπειτα μπαίνουμε μέσα στον δεύτερο φάκελο που δημιουργήθηκε μετά την αποσυμπίεση, τον φάκελο onestepahead. Εκεί μέσα υπάρχει ακόμα ένας φάκελος onestepahead. Τον κάνουμε αποκοπή, και τον κάνουμε επικόλληση στη διαδρομή (path) «C:\xampp\htdocs». Το αποτέλεσμα πρέπει να μοιάζει με αυτό της εικόνας: 48

50 Βήμα 4 ο : Πηγαίνουμε στη διαδρομή «C:\xampp\php» και ανοίγουμε το αρχείο php.ini. Αυτό είναι το αρχείο που περιέχει όλες τις ρυθμίσεις για την PHP. Κάνουμε αναζήτηση για την σειρά «date.timezone = Europe/Berlin». Αλλάζουμε το «Berlin» με «Athens». Αυτό το κάνουμε για να μπορεί να απεικονίζεται η σωστή τρέχουσα ώρα αν τυχόν την καλέσουμε σε μια σελίδα php. Βήμα 5 ο : Έπειτα κάνουμε ακόμα μια αναζήτηση, αυτή τη φορά για «SMTP». Εδώ βάζουμε την SMTP διεύθυνση του ISP μας. Μια λίστα με τις SMTP διευθύνσεις των ελληνικών ISP υπάρχει στο παρακάτω link: Λίγες σειρές πιο κάτω στο «;sendmail_from» γράφουμε το ολοκληρωμένο username της internet σύνδεσης μας. Στην φωτογραφία αποτυπώνονται και οι δυο αλλαγές: 49

51 Σώζουμε το αρχείο php.ini και το κλείνουμε. Βήμα 6 ο : Πηγαίνουμε στη διαδρομή «C:\xampp» και ανοίγουμε το πρόγραμμα «xampp-control». Πατάμε το start button στις δυο πρώτες διαδικασίες, δηλαδή του Apache και του MySQL. Βήμα 7 ο : Ανοίγουμε τον browser της αρεσκείας μας και πλοηγούμαστε στην διεύθυνση Διαλέγουμε «English», και έπειτα πλοηγούμαστε στο Εκεί εισάγουμε το password που επιθυμούμε να έχει η βάση δεδομένων μας, και το εισάγουμε και μια δεύτερη φορά για επιβεβαίωση. Σώζουμε τις επιλογές μας με το κουμπί «password changing». 50

52 Έπειτα στο πρόγραμμα «xampp-control» πατάμε «stop» στον MySQL και το ξανά ενεργοποιούμε με «start», όπως στο προηγούμενο βήμα. Βήμα 8 ο : Πλοηγούμαστε στην διεύθυνση Αφού κάνουμε log in με το username που αφήσαμε στο προηγούμενο βήμα, συνήθως «root», και το password που εισάγαμε, βρισκόμαστε μέσα στο παράθυρο του εργαλείου phpmyadmin. Πατάμε το button «βάσεις δεδομένων» τέρμα πάνω. Στην σελίδα που ανοίγει, στο «Δημιουργία βάσης δεδομένων» γράφουμε «osa» και πατάμε το button με όνομα «Δημιουργία». Παρατηρούμε πως πλέον η βάση μας, αν και άδεια, έχει δημιουργηθεί. 51

53 Βήμα 9 ο : Διαλέγουμε την βάση που μόλις δημιουργήσαμε από το μενού αριστερά. Στο νέο παράθυρο που ανοίγει πατάμε το button με όνομα «Εισαγωγή». Στο νέο παράθυρο, πατάμε «επιλογή αρχείου» και έπειτα πλοηγούμαστε ώστε να βρούμε το αρχείο osa.sql που είχαμε αντιγράψει στο βήμα 1. Πατάμε «Άνοιγμα», και έπειτα τέρμα κάτω «εκτέλεση». Μόλις δημιουργήσαμε την βάση του παιχνιδιού μας, και την γεμίσαμε με τους πίνακες του. Βήμα 10 ο : Πηγαίνουμε στο «C:\xampp\htdocs\onestepahead» που είναι και ο φάκελος που περιέχει τον κώδικα μας και με το πρόγραμμα τις αρεσκείας μας ανοίγουμε το αρχείο «register.php». Κάνουμε αναζήτηση για «$headers», και δεξιά από το «From:» εισάγουμε το ολοκληρωμένο username της internet σύνδεσης μας όπως εισάγαμε και στο 5 ο βήμα. Αλλάζουμε επίσης τρείς γραμμές πιο κάτω, δεξιά από το « εισάγουμε την IP ή το link του site μας αν πρόκειται να την προβάλουμε σε online επίπεδο, ή εισάγουμε «localhost» αν πρόκειται να την προβάλλουμε σε τοπικό. Αυτή την αλλαγή την κάνουμε γιατί αυτές οι δυο διευθύνσεις είναι «hardcoded» στο αρχείο και πρέπει να αλλαχτούν με αυτές της σύνδεσης μας και του site μας αντίστοιχα, προκειμένου να λειτουργήσει η ενεργοποίηση του λογαριασμού. Σώζουμε το αρχείο register.php και το κλείνουμε. 52

54 Βήμα 11 ο : Με τον ίδιο τρόπο που ανοίξαμε το αρχείο «register.php», ανοίγουμε το αρχείο «global.php». Στη σειρά 6, όπως φαίνεται και στην εικόνα, αλλάζουμε το πεδίο δεξιά από το «root» με το password που εισάγαμε στο βήμα 7. Αυτό το κάνουμε για να μπορεί να συνδεθεί το παιχνίδι με την βάση μας, για να κάνει όποια ενέργεια χρειαστεί. Σώζουμε το αρχείο global.php και το κλείνουμε. Βήμα 12 ο : Πλοηγούμαστε στην διεύθυνση Αν η σελίδα φορτώσει και εμφανίσει το παιχνίδι μας, η εγκατάσταση του server, της βάσης δεδομένων, του παιχνιδιού μέσα σε αυτά, και η παραμετροποίηση όλων αυτών ολοκληρώθηκε με επιτυχία. 53