Memória játék Felhasználói dokumentáció Feladat: JavaScript segítségével, olyan programot írni, mely összekeveri a lapokat, majd a felhasználónak kell párosítani. HTML oldalba ágyazva és CSS-el formázva. Futtatási környezet: A http://10.0.0.101/~hgy/memoria/ linkre kattintva megjelenik az oldal. Az oldal megtekintéséhez bármilyen grafikus böngésző alkalmazható. Gépigény: Bármilyen számítógépen működik, amin található böngésző és Internet elérés. Kezelési útmutató: Az oldal kinézete Gombok és funkciók A lépéseket számolja: Játék kezdete óta eltelt idő: Ha új játékot szeretnénk kezdeni: 1
Készítette: Hollósy György 2/14/Aw. Bármilyen probléma esetén jelezzen a hollosygyorgy@gmail.com e-mail címen. 2
Fejlesztői dokumentáció Feladat: JavaScript segítségével, olyan programot írni, mely összekeveri a lapokat, majd a felhasználónak kell párosítani. HTML oldalba ágyazva és CSS-el formázva. Környezet: Intel Core 2 Duo CPU E8400 @ 3.00 GHz 3.01 GHz/ 3,50 GB RAM/512 MB ATI Radeon HD 4670/160GB HDD/ Windows XP/ Mozilla Firefox. Futtatási környezet: A http://10.0.0.101/~hgy/memoria/ linkre kattintva megjelenik az oldal. Az oldal megtekintéséhez bármilyen grafikus böngésző alkalmazható. Programfejlesztői környezet: A Memórai nevű program JavaScript programnyelven lett írva és HTML kód segítségével lett beágyazva majd CSS segítségével lett megformázva. Változók: Idokesz=logikai Ora, perc, sec, r = egész Tömbök: -kiskep -tarto Függvények: -kever -mutat -ido Fájl lista: -index.html -memoria.css -memoria.js kep mappa: -bg.jpg -1.png -2.png -3.png -4.png -5.png -6.png -7.png -ido.png -tablebg.png -szurke.png 3
Forráskódok: -index.html <html> <head> <title>memória Játék</title> <script type="text/javascript" src="memory.js"></script> <link rel="stylesheet" type="text/css" href="memory.css"> </head> <body onload="kever();"> <table align="center"> <td> <table> <td><img src="kep/0.png" id="a1" onclick="mutat(1)"></td> <td><img src="kep/0.png" id="a2" onclick="mutat(2)"></td> <td><img src="kep/0.png" id="a3" onclick="mutat(3)"></td> <td><img src="kep/0.png" id="a4" onclick="mutat(4)"></td> <td><img src="kep/0.png" id="a5" onclick="mutat(5)"></td> <td><img src="kep/0.png" id="a6" onclick="mutat(6)"></td> <td><img src="kep/0.png" id="a7" onclick="mutat(7)"></td> <td><img src="kep/0.png" id="a8" onclick="mutat(8)"></td> <td><img src="kep/0.png" id="a9" onclick="mutat(9)"></td> <td><img src="kep/0.png" id="a10" onclick="mutat(10)"></td> <td><img src="kep/0.png" id="a11" onclick="mutat(11)"></td> <td><img src="kep/0.png" id="a12" onclick="mutat(12)"></td> <td><img src="kep/0.png" id="a13" onclick="mutat(13)"></td> <td><img src="kep/0.png" id="a14" onclick="mutat(14)"></td> <td><img src="kep/0.png" id="a15" onclick="mutat(15)"></td> <td><img src="kep/0.png" id="a16" onclick="mutat(16)"></td> <td><img src="kep/0.png" id="a17" onclick="mutat(17)"></td> <td><img src="kep/0.png" id="a18" onclick="mutat(18)"></td> </table> </td> <td> <form name="tick" action="index.html" method="post"> <table id="jatek"> <td height="30" colspan="2" align="center"><b>memória játék</b><hr></td> <td width="120" height="26">lépések száma</td> <td width="68" align="center"><input type="text" id="szam"></td> <td height="26">idő</td> <td align="center"><input type="text" id="clock" size="2"></td> <td colspan="2"><div id="show"></div> </td> 4
<td colspan="2" align="right" valign="bottom"><input name="submit" type="submit" id="kuld" value="új játék"></td> </table> </form> </td> </table> </body> </html> -memoria.css body input img margin-top: 50px; background: url("kep/bg.jpg"); color: #FFF; font-family: Verdana, Arial, Helvetica, sans-serif; background: #000; border: none; color: #FFF; color: #66CC00; border: 2px solid #666; #jatek padding: 5px; width: 200px; height: 200px; background: url('kep/tablebg.png'); font-size: 12px; font-weight: bold; color: #66CC00; #szam background: url('kep/szurke.png'); border: none; width: 31px; height: 24px; text-align: center; #clock background: url('kep/ido.png'); border: none; width: 65px; height: 24px; text-align: center; b 5
font-size: 14px; #show text-align: center; font-weight: normal; color: red; -memoria.js kepek=new Array("kep/0.png","kep/1.png","kep/1.png","kep/2.png","kep/2.png","kep/3.png","kep/3.png","kep/4.png","kep/4.png","kep/5.png","kep/5.png","kep/6.png","kep/6.png","kep/7.png","kep/ 7.png","kep/8.png","kep/8.png","kep/9.png","kep/9.png"); var tarto=new Array(); var ora=0; var perc=0; var sec=0; r=0; idokesz=true; function kever() for (i=1;i<1000;i++) x=math.round(math.random()*17)+1; y=math.round(math.random()*17)+1; sv=kepek[x]; kepek[x]=kepek[y]; kepek[y]=sv; ido(idokesz); function mutat(x) //alert(x); p=document.getelementbyid('a'+x).src.split("/"); if (p[p.length-1]=='0.png') //alert(document.all.item('a'+x).src); document.getelementbyid("szam").value++; document.getelementbyid('a'+x).src=kepek[x]; r++; tarto[r]=x; if ((r==3) && (kepek[tarto[1]]!=kepek[tarto[2]])) for (i=1;i<3;i++) document.getelementbyid('a'+tarto[i]).src=kepek[0]; 6
tarto[1]=tarto[3]; r=1; if ((r==3) && (kepek[tarto[1]]==kepek[tarto[2]])) tarto[1]=tarto[3]; r=1; kesz=true; for (i=1;i<19;i++) p=document.getelementbyid('a'+i).src.split("/"); if (p[p.length-1]=='0.png') kesz=false; if(kesz) document.getelementbyid("show").innerhtml=("<b>gratulálok!</b><br> Kiraktad "+document.getelementbyid("szam").value+" lépésbõl.<br>idõd: "+document.tick.clock.value); idokesz=false; function ido(ilog) if (ilog) sec++ if ((sec % 60)==0) perc++; sec=0; if (((perc!=0) && ((perc % 60)==0))) ora++; minutes=0; seconds=0; document.tick.clock.value=ora+":"+perc+":"+sec; settimeout("ido(idokesz)",1000) Készítette: Hollósy György 2/14/Aw. Bármilyen probléma esetén jelezzen a hollosygyorgy@gmail.com e-mail címen. 7
8