Tili-Toli játék Felhasználói dokumentáció Feladat: JavaScript és CSS segítségével tili-toli játék készítése. Futtatási környezet: A http://10.0.0.101/~szabby/ 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 Java alkalmazás. Kezelési útmutató: Indító képernyő A kever gombra kattintva megkeveri a képeket és így kell kirakni az eredeti képet. A kép alatt az óra számolja az időt és a kattintások számát. A képeket egérkattintással és billentyűlenyomással is lehet cserélni. Készítette: Popovics Szabolcs 2/14/Aw. Bármilyen probléma esetén jelezzen a szabby48@gmail.com e-mail címen.
Fejlesztői dokumentáció Feladat: Java Script és CSS segítségével tili-toli játék készítése Környezet: Intel(R) Core(TM) 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/~szabby/ linkre kattintva megjelenik az oldal. Az oldal megtekintéséhez bármilyen grafikus böngésző alkalmazható. Programfejlesztői környezet: A tili-toli nevű játék JavaScript programnyelven lett írva és HTML kód segítségével lett beágyazva majd CSS segítségével lett megformázva. Fájl lista: -index.html -style.css kép mappa: -k1.png -k2.png -k3.png -k4.png -k5.png -k6.png -k7.png -k8.png -k9.png Tömbök: -ora -perc -sec -szamlal Függvények: -init -ellenoriz -keveres -katt -szam_csere -csere -ido -KeyCheck Forráskódok: - index.html <html> <head> <script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" href="style.css"> <title> Tili-Toli</title> </head> <body onload="init()"> <div id="header"> <center> <b id="s1">tili-toli játék</b> <div id="container"> <div id="kepek"> <script> konyvtar="kepek/"; kep= new Array("k1.png","k2.png","k3.png","k4.png","k5.png","k6.png","k7.png","k8.png","k9.png"); kepek=[]; for (i=0;i<3;i++) kepek[i]=[]; var k=-1; for (i=0;i<3;i++) for (j=0;j<3;j++) k++; s='g'+k; z=konyvtar+kep[k]; matrix_index=i+' '+j; document.write("<img src="+z+" id="+matrix_index+" border=1 onclick=csere(id)>"); kepek[i][j]=document.getelementbyid(matrix_index); if (((i==0) && (j==2)) ((i==1) &&(j==2))) document.write("<br>"); ures=kepek[2][2].src; </script> </div> <div id="jobb"> <form name="tick"> <input type="text" name="clock" id="clock"> <input type="button" id="kever" value="kever" onclick="keveres()"><br> <input type="text" id="szam"> </form> </div> <div id="clear"></div>
<div id="footer"></div> <div id="ujjatek"><input type="button" value="új Játék" id="jatek" onclick="javascript: window.location.reload()"></div> </div> </body> </html> script.js: function init() document.tick.szam.value=0; document.tick.clock.value='0:0:0'; katt_indul=false; //document.getelementbyid('kever').enabled; ell=0; kesz=0; var ora=0; var perc=0; var sec=0; var szamlal=0; idokesz=true; var lehet=0; var jo=false; var ell=0; var kesz=0; function ellenoriz() jo=true; k=-1; for (c=0;c<3;c++) for (d=0;d<3;d++) k++ s=kepek[c][d].src; myarray=s.split('/'); // alert(kep[k]); if (myarray[10]!=kep[k]) jo=false; //alert(jo); if (jo) idokesz=false; document.getelementbyid('footer').style.display="block"; document.getelementbyid('ujjatek').style.display="block";
document.getelementbyid('footer').innerhtml=("<font size=4 color=red>gratulálok!</font>; Mozgatások: <font color=#18bcc2>"+szamlal+"</font> Ido: <font color=#18bcc2>" +ora+":"+perc+":"+sec+"</font"); kesz=1; function keveres() // alert('kev'); if (lehet==0) for (h=1;h<1000;h++) vel1=math.round(math.random()*2); vel2=math.round(math.random()*2); xy=vel1+' '+vel2; csere(xy); //settimeout("kever()",5); for (c=0;c<3;c++) for (d=0;d<3;d++) if (kepek[c][d].src==ures) kepek[c][d].focus(); // alert(c+' '+d); katt_indul=true; ido(idokesz); // document.getelementbyid('kever').disabled="disabled"; lehet=1; ell=1; function katt() szamlal++; document.tick.szam.value=szamlal;
if (ell==1) ellenoriz(); // alert(jo); function szam_csere(l,m,n,o) sv=kepek[l][m].src; kepek[l][m].src=kepek[n][o].src; kepek[n][o].src=sv; function csere(x) if (kesz==0) //alert(x); mi=x.split(' ',3); p=parseint(mi[0]); //oszlop q=parseint(mi[1]); //alert(p); aktualis=kepek[p][q].src; // alert(kepek[p+1][q].src); if (aktualis!=ures) if (p+1<3) if (kepek[p+1][q].src==ures) //fel sv=kepek[p][q].src; kepek[p][q].src=kepek[p+1][q].src; kepek[p+1][q].src=sv; kepek[p][q].style.bordercolor='black'; kepek[p+1][q].style.bordercolor='white'; if (p-1>-1) if (kepek[p-1][q].src==ures) //le sv=kepek[p][q].src; kepek[p][q].src=kepek[p-1][q].src; kepek[p-1][q].src=sv; kepek[p][q].style.bordercolor='black'; kepek[p-1][q].style.bordercolor='white'; if (q-1>-1) if (kepek[p][q-1].src==ures) //jobbra sv=kepek[p][q].src; kepek[p][q].src=kepek[p][q-1].src; kepek[p][q-1].src=sv; kepek[p][q].style.bordercolor='black'; kepek[p][q-1].style.bordercolor='white';
if (q+1<3) if (kepek[p][q+1].src==ures) //balra sv=kepek[p][q].src; kepek[p][q].src=kepek[p][q+1].src; kepek[p][q+1].src=sv; kepek[p][q].style.bordercolor='black'; kepek[p][q+1].style.bordercolor='white'; if (ell==1) katt(); 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) //----------billkez----------- document.onkeypress = KeyCheck; function KeyCheck(e) //alert('bill'); v=0;w=0; // kepek[v][w].focus(); for (a=0;a<3;a++) for (b=0;b<3;b++)
if (kepek[a][b].src==ures) v=a;w=b; //alert(v+' '+w); if (kesz==0) var KeyID = (window.event)? event.keycode : e.keycode; switch(keyid) case 37: //alert("bal"); if (w-1>-1) szam_csere(v,w,v,w-1); break; case 38: //alert("fel"); if (v-1>-1) szam_csere(v,w,v-1,w); break; case 39: //alert("jobb"); if (w+1<3) szam_csere(v,w,v,w+1); break; case 40: //alert("le"); if (v+1<3) szam_csere(v,w,v+1,w); break; for (c=0;c<3;c++) for (d=0;d<3;d++) if (kepek[c][d].src==ures) kepek[c][d].focus(); kepek[c][d].style.bordercolor='black'; //alert(c+' '+d); else kepek[c][d].style.bordercolor='white'; katt(); style.ccs: body background-image: url('kozep.png');
#s1 color: yellow; font-size:20px; #clock position: absolute; left: 400px; top: 300px; background-color: green; color: yellow; width: 100px; text-align: center; font-size: 30px; #szam position: absolute; top: 300px; left: 520px; background-color: green; color: yellow; width: 100px; text-align: center; font-size: 30px; #kever position: absolute; top: 370px; left: 470px; a color: #ff0000; text-decoration: none; font-size: 13px; a:hover text-decoration: underline; #jobb width: 200px; height: 260px; background: url(img/jobbg.png); float:left;
#clear clear: both; #footer position:absolute; top: 400px; left: 300px; font-size: 30px; color: white; #ujjatek position: absolute; top: 460px; left: 450px; input.btn width: 20px; height: 30px; font-size: 30px; font-weight: bold; color: #555; #jatek width: 100px; height: 50px; background: none; font-weight: bold; font-size: 17px; color: #fff;
Készítette: Popovics Szabolcs 2/14/Aw. Bármilyen probléma esetén jelezzen a szabby48@gmail.com e-mail címen.