<!
doctype html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<script type="text/ecmascript" src="common/[Link]"></script>
<script type="text/ecmascript" src="[Link]"></script>
<link type="text/css" rel="stylesheet" href="css/[Link]" />
<link type="text/css" rel="stylesheet" href="skins/[Link]" />
<title>2D/3D Javascript Chess</title>
<script type="text/javascript">
var nVwPressed = false;
function pressVwBtn(nBtnId) {
if (nVwPressed) { [Link]("viewBtn" + nVwPressed).className =
""; }
[Link]("viewBtn" + nBtnId).className = "pressedBtn";
nVwPressed = nBtnId;
}
// Firefox only
function onPGNLoaded(frEvnt) {
var sFBody = [Link];
[Link](sFBody, document.chessCtrl3.plyerClr2[1].checked);
}
// Firefox only
function loadPGNFile() {
var oFile = [Link]("PGNFileData").files[0];
if (oFile) {
var oFReader = new FileReader();
[Link] = onPGNLoaded;
[Link](oFile);
}
}
function initChess() {
[Link]([Link]);
[Link]([Link]);
[Link]([Link](Number([Link]))
|| 1000);
[Link]([Link]);
[Link]([Link]);
[Link]("chessDesk");
[Link] = "0";
[Link](1);
pressVwBtn(1);
}
</script>
<style type="text/css">
hr {
width: 30%;
margin-top: 32px;
margin-bottom: 24px;
}
[Link] {
cursor: pointer;
margin: 1px 3px 1px 3px;
}
#pgnTable {
width: auto;
height: auto;
margin-left: auto;
margin-right: auto;
border-collapse: collapse;
border: 0;
}
#pgnTable tr td { padding: 2px; }
#chessDesk {
clear: both;
width: auto;
height: auto;
margin-top: 32px;
margin-bottom: 32px;
}
#chessToolBar {
width: 550px;
height: auto;
margin: 12px auto;
background-color: #969696;
-moz-box-shadow: inset 0 25px 27px -10px #BDBDBD;
-webkit-box-shadow: inset 0 25px 27px -10px #BDBDBD;
box-shadow: inset 0 25px 27px -10px #BDBDBD;
border-bottom: 1px solid #424242;
text-align:center;
padding: 6px 3px 2px 3px;
}
#setViewBtns {
width: auto;
float: left;
}
#setViewBtns span {
margin: 0 3px;
display: inline-block;
font: 12px / 13px "Lucida Grande", sans-serif;
text-shadow: rgba(255, 255, 255, 0.4) 0 1px;
padding: 3px 6px;
border: 1px solid rgba(0, 0, 0, 0.6);
background-color: #969696;
cursor: default;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: rgba(255, 255, 255, 0.4) 0 1px, inset 0 20px 20px -10px
white;
-webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 1px, inset 0 20px 20px -10px
white;
box-shadow: rgba(255, 255, 255, 0.4) 0 1px, inset 0 20px 20px -10px white;
}
#setViewBtns [Link] {
background: #B5B5B5;
-moz-box-shadow: inset rgba(0, 0, 0, 0.4) 0 -5px 12px, inset rgba(0, 0, 0, 1)
0 1px 3px, rgba(255, 255, 255, 0.4) 0 1px;
-webkit-box-shadow: inset rgba(0, 0, 0, 0.4) 0 -5px 12px, inset rgba(0, 0, 0,
1) 0 1px 3px, rgba(255, 255, 255, 0.4) 0 1px;
box-shadow: inset rgba(0, 0, 0, 0.4) 0 -5px 12px, inset rgba(0, 0, 0, 1) 0
1px 3px, rgba(255, 255, 255, 0.4) 0 1px;
}
</style>
</head>
<body onload="initChess();">
<h1>HTML5 Chess Game Example</h1>
<p>Only for 3D view: use the "+" and "-" keys to zoom; use the numpad to play with
keyboard.</p>
<form name="chessCtrl1" onsubmit="return(false);">
<p style="text-align:center;">[ <input id="useAIAsk" name="useAI"
type="checkbox" onclick="[Link]([Link]);" checked /> <label
for="useAIAsk">Against machine</label> | Promotion to: <select
onchange="[Link]([Link]);"
name="selPromo"><option>Queen</option><option>Rook</option><option>Bishop</option><
option>Knight</option></select> | <input type="button" name="strtBtn" value="New
game" onclick="[Link]([Link].plyerClr1[1].checked);" /> (Human: <input
type="radio" name="plyerClr1" id="white1" checked /> <label
for="white1">white</label> <input type="radio" name="plyerClr1" id="black1" />
<label for="black1">black</label>) | Machine meditation level (press return to
save): <input type="text" name="plyDepthCtrl" value="0" size="2"
onkeypress=";if([Link]===13&&[Link]([Link])){alert('Ply depth
setted.' + (Number([Link]) > 2 ? '\nAttention! The game could be very slow.' :
' Good game :)'));}" /> ]</p>
<div id="chessToolBar"><div id="setViewBtns"><span id="viewBtn2"
onclick="[Link](2);pressVwBtn(2);" onmousedown="return(false);">3D
view</span><span id="viewBtn1" onclick="[Link](1);pressVwBtn(1);"
onmousedown="return(false);">2D view</span><span id="viewBtn3"
onclick="[Link](3);pressVwBtn(3);"
onmousedown="return(false);">Both</span></div>
<img class="tbBtn" src="icons/[Link]" title=""
onclick="[Link]();" />
<img class="tbBtn" src="icons/[Link]" title="" onclick="[Link](-10,
true);" />
<img class="tbBtn" src="icons/[Link]" title="" onclick="[Link](-
1, true);" />
<img class="tbBtn" src="icons/[Link]" title="" onclick="[Link]();" />
<img class="tbBtn" src="icons/[Link]" title="" onclick="[Link](1, true);"
/>
<img class="tbBtn" src="icons/[Link]" title="" onclick="[Link](10,
true);" />
<img class="tbBtn" src="icons/[Link]" title=""
onclick="[Link]();" />
<img class="tbBtn" src="icons/[Link]" title="" onclick="[Link](-
1);">
<img class="tbBtn" src="icons/[Link]" title="" onclick="[Link](1);" />
<img class="tbBtn" src="icons/[Link]" title="" onclick="[Link]();" />
</div>
</form>
<div id="chessDesk"></div>
<form name="chessCtrl2" onsubmit="return(false);">
<p style="text-align:center;">[ View side: <select
onchange="[Link]([Link]);"
name="selSide"><option>White</option><option>Black</option><option selected>Human
side</option></select> | <input id="useKeybAsk" name="KeybCtrl" type="checkbox"
onclick="[Link]([Link]);" checked /> <label
for="useKeybAsk">Enable keyboard</label> | Motion frame rate: <input type="text"
name="frameRateCtrl" value="1000" size="5" onchange="var nMs=new
Number([Link]);if(!isNaN(nMs)&&nMs>0){[Link](nMs);}" />
ms ]</p>
</form>
<hr />
<h3 style="text-align:center;">Portable Game Notation reader</h3>
<form name="chessCtrl3" onsubmit="return(false);">
<table id="pgnTable">
<tbody>
<tr><td colspan="2" style="text-align:center;">Human is: <input type="radio"
name="plyerClr2" id="white2" checked /> <label for="white2">white</label> <input
type="radio" name="plyerClr2" id="black2" /> <label for="black2">black</label></td>
<tr>
<td>Select a PGN file (Firefox only):</td>
<td><input type="file" id="PGNFileData" /> <a href="#" onclick="loadPGNFile();
return(false);">Load</a></td>
</tr>
<tr>
<td>or paste your PGN file's body here:</td>
<td><textarea rows="10" cols="50" id="PGNBodyArea"></textarea> <a href="#"
onclick="[Link]([Link]('PGNBodyArea').value,[Link]
trl3.plyerClr2[1].checked);return(false);">Load</a><br />
(you can try with <a href="[Link]">this</a> example PGN file)</td>
</tr>
</tbody>
</table>
</form>
<hr />
<p style="text-align:center;">[ <a href="[Link]
title="Go to Home Page" target="_blank">Home</a> | <a
href="[Link] title="Go to Forums"
target="_blank">Forums</a> | <a
href="[Link]
" title="Send a comment" target="_blank">Send a comment</a> ]</p>
<div><iframe src="[Link]
%[Link]%2Fdemo
%[Link]&layout=button_count&show_faces=false&width=700&acti
on=like&font=arial&colorscheme=light&height=21" scrolling="no"
frameborder="0" style="border:none; overflow:hidden; width:700px; height:21px;"
allowTransparency="true"></iframe></div>
<!--
<hr />
<h3 style="text-align:center;">Running code within the "chess" object.</h3>
<p style="text-align:center;">Please uncomment the function
[Link](<em>sCode</em>) to execute your code.<br />
<textarea rows="10" cols="55" id="debugArea"
onkeyup="if([Link]&&[Link]&&[Link]===32)
{[Link]([Link]);}">
/**
* Javascript Console.
* Press Ctrl+Shift+Space to run code
* within the "chess" object.
*/
var sRappr = "";
for (nBoardX = 0; nBoardX < 12; nBoardX++) {
var nBoardY = 0;
for (nBoardY = 0; nBoardY < 10; nBoardY++) { sRappr += ([Link][nBoardX
* 10 + nBoardY]) + ", "; }
sRappr = [Link](0, [Link] - 2) + "\n";
}
alert("This is the numeric rappresentation of the chessboard:\n\n" + sRappr);
</textarea></p>
-->
</body>
</html>