
Admin
Well-Known Member
Staff member
Administrator
Demo
http://wapkahay.tk/site_caro.xhtml
http://wapkahay.tk/site_caro.xhtml
HTML:
<p> <style> td { font-family: Arial; font-weight: bold; height: 2em; margin: 0; text-align: center; width: 2em; vertical-align: middle; } #leftTop { border-bottom: 1px #000000; border-left: 0; border-right: 1px #000000; border-top: 0; } #midTop { border-bottom: 1px #000000; border-left: 1px #000000; border-right: 1px #000000; border-top: 0; } #rightTop { border-bottom: 1px #000000; border-left: 1px #000000; border-right: 0; border-top: 0; } #leftMid { border-bottom: 1px #000000; border-left: 0; border-right: 1px #000000; border-top: 1px #000000; } #midMid { border-bottom: 1px #000000; border-left: 1px #000000; border-right: 1px #000000; border-top: 1px #000000; } #rightMid { border-bottom: 1px #000000; border-left: 1px #000000; border-right: 0; border-top: 1px #000000; } #leftBot { border-bottom: 0; border-left: 0; border-right: 1px #000000; border-top: 1px #000000; } #midBot { border-bottom: 0; border-left: 1px #000000; border-right: 1px #000000; border-top: 1px #000000; } #rightBot { border-bottom: 0; border-left: 1px #000000; border-right: 0; border-top: 1px #000000; } </style> <script language=javascript> var XO = 'z'; function placeXO(cellRef) { if ('X' == XO) XO = 'O'; else XO = 'X'; cellRef.innerHTML = XO; } function resetGame() { location.reload(); } </script> <table border="1" width="240" height="240"> <tr> <td id="leftTop" onclick="placeXO(this);"> </td> <td id="midTop" onclick="placeXO(this);"> </td> <td id="midTop" onclick="placeXO(this);"> </td> <td id="midTop" onclick="placeXO(this);"> </td> <td id="midTop" onclick="placeXO(this);"> </td> <td id="midTop" onclick="placeXO(this);"> </td> <td id="rightTop" onclick="placeXO(this);"> </td> </tr> <tr> <td id="leftMid" onclick="placeXO(this);"> </td> <td id="midMid" onclick="placeXO(this);"> </td> <td id="midMid" onclick="placeXO(this);"> </td> <td id="midMid" onclick="placeXO(this);"> </td> <td id="midMid" onclick="placeXO(this);"> </td> <td id="midMid" onclick="placeXO(this);"> </td> <td id="rightMid" onclick="placeXO(this);"> </td> </tr> <tr> <td id="leftMid" onclick="placeXO(this);"> </td> <td id="midMid" onclick="placeXO(this);"> </td> <td id="midMid" onclick="placeXO(this);"> </td> <td id="midMid" onclick="placeXO(this);"> </td> <td id="midMid" onclick="placeXO(this);"> </td> <td id="midMid" onclick="placeXO(this);"> </td> <td id="rightMid" onclick="placeXO(this);"> </td> </tr> <tr> <td id="leftMid" onclick="placeXO(this);"> </td> <td id="midMid" onclick="placeXO(this);"> </td> <td id="midMid" onclick="placeXO(this);"> </td> <td id="midMid" onclick="placeXO(this);"> </td> <td id="midMid" onclick="placeXO(this);"> </td> <td id="midMid" onclick="placeXO(this);"> </td> <td id="rightMid" onclick="placeXO(this);"> </td> </tr> <tr> <td id="leftMid" onclick="placeXO(this);"> </td> <td id="midMid" onclick="placeXO(this);"> </td> <td id="midMid" onclick="placeXO(this);"> </td> <td id="midMid" onclick="placeXO(this);"> </td> <td id="midMid" onclick="placeXO(this);"> </td> <td id="midMid" onclick="placeXO(this);"> </td> <td id="rightMid" onclick="placeXO(this);"> </td> </tr> <tr> <td id="leftMid" onclick="placeXO(this);"> </td> <td id="midMid" onclick="placeXO(this);"> </td> <td id="midMid" onclick="placeXO(this);"> </td> <td id="midMid" onclick="placeXO(this);"> </td> <td id="midMid" onclick="placeXO(this);"> </td> <td id="midMid" onclick="placeXO(this);"> </td> <td id="rightMid" onclick="placeXO(this);"> </td> </tr> <tr> <td id="leftBot" onclick="placeXO(this);"> </td> <td id="midBot" onclick="placeXO(this);"> </td> <td id="midBot" onclick="placeXO(this);"> </td> <td id="midBot" onclick="placeXO(this);"> </td> <td id="midBot" onclick="placeXO(this);"> </td> <td id="midBot" onclick="placeXO(this);"> </td> <td id="rightBot" onclick="placeXO(this);"> </td> </tr> </table> <form><input type="hidden" name="PHPSESSID" value="7308bb2a7d1592ca7c9fabba3e5362" /> <input type="button" value="reset game" onclick="resetGame();" /> </form></p>