Παιχνίδι μνήμης

Περιγραφή

Εδώ θα σας δείξω με ποιο τρόπο μπορείτε να φτιάξετε ένα παιχνίδι μνήμης μέσα σε ελάχιστο χρόνο. Υπάρχουν δύο παραλλαγές. Στην 1η έχουμε  8 ίδια ζευγάρια εικόνων (πλέγμα 4Χ4) και στη 2η 18 ίδια ζευγάρια εικόνων (πλέγμα 6Χ6). Οι μαθητές μας προσπαθούν να ταιριάξουν τα ζευγάρια των εικόνων κάνοντας διαδοχικά κλικ επάνω τους. Υπάρχει και χρονομέτρηση.

Χρησιμοποιώ κώδικα javascript. Στο τέλος αποθηκεύουμε το αρχείο ως ιστοσελίδα (html). Όπως αντιλαμβάνεστε μπορούμε να ενσωματώσουμε τέτοιου είδους παιχνίδια σε  web-based δραστηριότητες.

ΟΔΗΓΙΕΣ

Τι θα χρειαστείτε:

Κάποιο πρόγραμμα επεξεργασίας ιστοσελίδων (π.χ. το MS FrontPage) ή το Σημειωματάριο [Notepad] των Windows.
Τα αρχεία code_gr.txt και code_big_gr.txt (που περιέχουν τον κώδικα javascript για το παιχνίδι μνήμης των 8 και 18 εικόνων αντίστοιχα) Μια σειρά από 9 και 19 εικόνες αντίστοιχα (μία θα είναι κενό πλακίδιο) (κάντε κλικ στο εικονίδιο δίπλα, για να κατεβάσετε όλα τα απαιτούμενα αρχεία, αποσυμπιέστε το φάκελο και χρησιμοποιήστε τα αρχεία σύμφωνα με τις παρακάτω οδηγίες)

Δυσκολία

Απαιτούμενος χρόνος

10 λεπτά (εφόσον έχετε έτοιμες τις εικόνες)

Τι πρέπει να κάνετε;

• Δημιουργήστε έναν φάκελο με όνομα π.χ. memorygame και τοποθετήστε μέσα όλες τις εικόνες.
• Ανοίξτε το MS FrontPage και δημιουργήστε μια νέα σελίδα html με όνομα π.χ. memorygame.htm
• Στο επάνω μέρος της σελίδας γράψτε τον τίτλο και τις οδηγίες για το παιχνίδι.
• Μόλις τελειώσετε με τις οδηγίες, ανοίξτε το αρχείο code_gr.txt , επιλέξτε ολόκληρο τον κώδικα και αντιγράψτε το περιεχόμενό του (Ctrl+C).
• Επιστρέψτε στην ιστοσελίδα memorygame.htm. Πατήστε το κουμπί Κείμενο HTML [Code] στο MS FrontPage ώστε να μεταφερθείτε στην προβολή κώδικα html.
• Επικολλήστε το κείμενο του αρχείου code_gr.txt (που αντιγράψατε προηγουμένως) ακριβώς κάτω από τις οδηγίες (πριν από την ετικέτα [tag] </body>
• Αποθηκεύστε τη σελίδα html στο φάκελο memorygame.
• Ανοίξτε το αρχείο που μόλις φτιάξατε με κάποιο πρόγραμμα πλοήγησης [browser] π.χ. ΙΕ, Firefox για δοκιμή.
• Τελειώσατε!

Σημείωση: Για να φτιάξετε το παιχνίδι μνήμης των 18 εικόνων (πλέγμα 6Χ6) ακολουθήστε τις παραπάνω οδηγίες. Θα χρησιμοποιήσετε τον κώδικα του αρχείου code_big_gr.txt (και φυσικά τις 19 εικόνες που απαιτούνται)

…Σχεδόν τελειώσατε… 😆

Υπάρχουν δύο ζητήματα που σίγουρα θα σας απασχολήσουν.

1ο: Θέλω να αλλάξω τις εικόνες με άλλες δικές μου ή θέλω οι εικόνες μου να είναι μεγαλύτερες ή μικρότερες.

2ο: Θέλω να αλλάξω τα μηνύματα που εμφανίζονται

Για να αλλάξετε τις εικόνες του παιχνιδιού με άλλες δικές σας

• Τοποθετήστε μέσα στο φάκελο memorygame 9 εικόνες με όνομα imagex (όπου Χ οι αριθμοί 0,1,2,3,4,5,6,7,8).
• Η εικόνα με όνομα image0 είναι η εικόνα του κενού πλακιδίου. Αυτή μπορεί να έχει όποιες διαστάσεις και χρώμα θέλετε (καλό είναι όμως να μην ξεπερνάει τα 100Χ100 pixels)
• Εφόσον η εικόνα image0 έχει διαστάσεις π.χ. 50Χ50 πίξελς, τότε και όλες οι άλλες εικόνες σας πρέπει να έχουν αυτές τις διαστάσεις.

Για να αλλάξετε τα μηνύματα που εμφανίζονται

Θα πρέπει να επέμβετε σε 2-3 σημεία του κώδικα.

Κώδικας αρχείου code_gr.txt
[μπορείτε να αλλάξετε ό,τι είναι με κόκκινο χρώμα]

<script language=”javascript”>
var pics=new Array();
for(i=0;i<=8;i++){
pics[i]=new Image(); pics[i].src=’image’+i+’.gif’;
}

var map=new Array(1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8)
var user=new Array();
var temparray=new Array();
var clickarray=new Array(0,0);
var ticker, sec, min, ctr, id=0, oktoclick, finished;

function init(){
clearTimeout(id);
for(i=0;i<=15;i++)user[i]=0;
ticker=0; min=0; sec=0; ctr=0; finished=0;
oktoclick=true;
document.forms[“f”].b.value=”Από την αρχή…“;
scramble();
id=setInterval(‘runclk()’, 995);
for(i=0;i<=15;i++){
document.images[(‘img’+i)].src=”image0.gif”;
document.images[(‘img’+i)].alt=””;
}}

function runclk(){
min=Math.floor(ticker/60);
sec=(ticker-(min*60))+”;
if(sec.length==1){sec=”0″+sec};
ticker++;
document.forms[“f”].b.value=”    “+min+”:”+sec+”    “;
}

function scramble(){
for(z=0;z<5;z++){
for(x=0;x<=15;x++){
temparray[0]=Math.floor(Math.random()*16);
temparray[1]=map[temparray[0]];
temparray[2]=map[x];
map[x]=temparray[1];
map[temparray[0]]=temparray[2];
}}}

function showimage(but){
if(oktoclick){
oktoclick=false;
document.images[(‘img’+but)].src=’image’+map[but]+’.gif’;
document.images[(‘img’+but)].alt=’Image ‘+map[but];
if(ctr==0){
ctr++;
clickarray[0]=but;
oktoclick=true;
}else{
clickarray[1]=but;
ctr=0;
setTimeout(‘returntoold()’, 600);
}}}

function returntoold(){
if((clickarray[0]==clickarray[1])&&(!user[clickarray[0]])){
document.images[(‘img’+clickarray[0])].src=”image0.gif”;
document.images[(‘img’+clickarray[0])].alt=””;
oktoclick=true;
}else{
if(map[clickarray[0]]!=map[clickarray[1]]){
if(user[clickarray[0]]==0){
document.images[(‘img’+clickarray[0])].src=”image0.gif”;
document.images[(‘img’+clickarray[0])].alt=””;
}
if(user[clickarray[1]]==0){
document.images[(‘img’+clickarray[1])].src=”image0.gif”;
document.images[(‘img’+clickarray[1])].alt=””;
}}
if(map[clickarray[0]]==map[clickarray[1]]){
if(user[clickarray[0]]==0&&user[clickarray[1]]==0)finished++;
user[clickarray[0]]=1;
user[clickarray[1]]=1;
}
if(finished>=8){
alert(‘Μπράβο! Τα κατάφερες σε ‘+document.forms[“f”].b.value+’ !’);
init();
}else{
oktoclick=true;
}}}

var t='<table cellpadding=”0″ cellspacing=”0″ border=”0″>’;
for(r=0;r<=3;r++){
t+='<tr>’;
for(c=0;c<=3;c++)t+='<td align=”center”><a href=”javascript:showimage(‘+((4*r)+c)+’)” onClick=”this.blur()”><img src=”image0.gif” name=”img’+((4*r)+c)+'” alt=”” border=”0″></a></td>’;
t+='</tr>’;
}
t+='</table><br><br><form name=”f”><input type=”button” value=”Φορτώνονται οι εικόνες….” name=”b” onClick=”init()”></form>’;
document.write(t);

window.onload=init;
</script>

Παραδείγματα

1. Παιχνίδι μνήμης 8 εικόνων
2. Παιχνίδι μνήμης 18 εικόνων