Sakk játék Felhasználói dokumentáció Feladat: JavaScript segítségével olyan programot kell írni, ami egy sakktáblát szimulál. Kiválasztásra változtatják a helyüket. Futtatási környezet: A http://10.0.0.101/~hgy/sakk/ 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 Készítette: Hollósy György 2/14/Aw. 1
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 kell írni, amely szimulál egy sakktáblát. Kiválasztásra változtatják a helyüket. 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/~sakk/ linkre kattintva megjelenik az oldal. Az oldal megtekintéséhez bármilyen grafikus böngésző alkalmazható. Programfejlesztői környezet: A Sakk nevű játék JavaScript programnyelven lett írva és HTML kód segítségével lett beágyazva oldalszerkezetbe. CSS-el formázva. Tömbök: -kepek -tomb_id Függvények: -betolt -csere Fájl lista: -index.html -sakk.js -zsolti.css kep mappa: bg.jpg sb.png sf.png sgy.png sh.png sk.png sv.png ures.png vb.png vf.png vgy.png vh.png vk.png vv.png Forráskódok: -index.html <html> 3
<head> <script type="text/javascript" src="sakk.js"></script> <link rel="stylesheet" type="text/css" href="zsolti.css"> <title>sakk játék</title> </head> <body onload="betolt();"> <table id="tabla"> <td colspan="10"> <h2>sakk</h2> </td> <td> </td> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> <td>f</td> <td>g</td> <td>h</td> <td> </td> <td>8</td> <td colspan="8" rowspan="8"> <table> <script> szin="#333333"; document.write(''); if (((i+j) % 2)==0) szin="#ffffff" else szin="#333333" document.write("<td bgcolor="+szin+" <img id="+tomb_id[i][j]+" width=45 height=45 src=kep/ures.png></td>"); document.write(""); </script> </table> </td> <td>8</td> <td>7</td> <td>7</td> <td>6</td> <td>6</td> <td>5</td> <td>5</td> 4
<td>4</td> <td>4</td> <td>3</td> <td>3</td> <td>2</td> <td>2</td> <td>1</td> <td>1</td> <td></td> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> <td>f</td> <td>g</td> <td>h</td> <td></td> <td colspan="10"> Honnan: <select id="e1"> <option value="0">a</option> <option value="1">b</option> <option value="2">c</option> <option value="3">d</option> <option value="4">e</option> <option value="5">f</option> <option value="6">g</option> <option value="7">h</option> <select id="e2"> <option value="7">1</option> <option value="6">2</option> <option value="5">3</option> <option value="4">4</option> <option value="3">5</option> <option value="2">6</option> <option value="1">7</option> <option value="0">8</option> Hova: <select id="m1"> <option value="0">a</option> <option value="1">b</option> <option value="2">c</option> <option value="3">d</option> <option value="4">e</option> <option value="5">f</option> <option value="6">g</option> 5
<option value="7">h</option> <select id="m2"> <option value="7">1</option> <option value="6">2</option> <option value="5">3</option> <option value="4">4</option> <option value="3">5</option> <option value="2">6</option> <option value="1">7</option> <option value="0">8</option> <input type="button" value="világos" onclick="csere()" id="lep"> </td> </table> </body> </html> -zsolti.css body background: url(kep/bg.jpg); #tabla background: #000; color: #FFF; text-align: center; font-weight: bold; margin: 0 auto; input border:0; background-color:white; -sakk.js kepek = new Array(8); kepek[i]=new Array(8); kepek[0][0]="kep/sb.png"; kepek[0][1]="kep/sh.png"; kepek[0][2]="kep/sf.png"; kepek[0][3]="kep/sv.png"; kepek[0][4]="kep/sk.png"; kepek[0][5]="kep/sf.png"; kepek[0][6]="kep/sh.png"; kepek[0][7]="kep/sb.png"; kepek[1][i]="kep/sgy.png"; for (i=2;i<6;i++) kepek[i][j]="kep/ures.png"; kepek[6][i]="kep/vgy.png"; 6
kepek[7][0]="kep/vb.png"; kepek[7][1]="kep/vh.png"; kepek[7][2]="kep/vf.png"; kepek[7][3]="kep/vv.png"; kepek[7][4]="kep/vk.png"; kepek[7][5]="kep/vf.png"; kepek[7][6]="kep/vh.png"; kepek[7][7]="kep/vb.png"; tomb_id=new Array(8); tomb_id[i]=new Array(8); x='k'+i+j; tomb_id[i][j]=x; function betolt() document.getelementbyid(tomb_id[i][j]).src=kepek[i][j]; function csere() p=document.getelementbyid("e1").value; o=document.getelementbyid("e2").value; r=document.getelementbyid("m1").value; q=document.getelementbyid("m2").value; if (kepek[q][r]=="kep/ures.png") sv=kepek[o][p]; kepek[o][p]=kepek[q][r]; kepek[q][r]=sv; else if (kepek[o][p]!="kep/ures.png") kepek[q][r]=kepek[o][p]; kepek[o][p]="kep/ures.png"; betolt(); 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