Professional Documents
Culture Documents
doctype html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<script type="text/ecmascript" src="common/xhr.js"></script>
<script type="text/ecmascript" src="chess.js"></script>
<link type="text/css" rel="stylesheet" href="css/chess.css" />
<link type="text/css" rel="stylesheet" href="skins/gnomechess.css" />
<title>2D/3D Javascript Chess</title>
<script type="text/javascript">
var nVwPressed = false;
function pressVwBtn(nBtnId) {
if (nVwPressed) { document.getElementById("viewBtn" + nVwPressed).className =
""; }
document.getElementById("viewBtn" + nBtnId).className = "pressedBtn";
nVwPressed = nBtnId;
}
// Firefox only
function onPGNLoaded(frEvnt) {
var sFBody = frEvnt.target.result;
chess.readPGN(sFBody, document.chessCtrl3.plyerClr2[1].checked);
}
// Firefox only
function loadPGNFile() {
var oFile = document.getElementById("PGNFileData").files[0];
if (oFile) {
var oFReader = new FileReader();
oFReader.onload = onPGNLoaded;
oFReader.readAsText(oFile);
}
}
function initChess() {
chess.useAI(document.chessCtrl1.useAI.checked);
chess.setPromotion(document.chessCtrl1.selPromo.selectedIndex);
chess.setFrameRate(Math.abs(Number(document.chessCtrl2.frameRateCtrl.value))
|| 1000);
chess.setSide(document.chessCtrl2.selSide.selectedIndex);
chess.useKeyboard(document.chessCtrl2.KeybCtrl.checked);
chess.placeById("chessDesk");
document.chessCtrl1.plyDepthCtrl.value = "0";
chess.setView(1);
pressVwBtn(1);
}
</script>
<style type="text/css">
hr {
width: 30%;
margin-top: 32px;
margin-bottom: 24px;
}
img.tbBtn {
cursor: pointer;
margin: 1px 3px 1px 3px;
}
#pgnTable {
width: auto;
height: auto;
margin-left: auto;
margin-right: auto;
border-collapse: collapse;
border: 0;
}
#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 span.pressedBtn {
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="chess.useAI(this.checked);" checked /> <label
for="useAIAsk">Against machine</label> | Promotion to: <select
onchange="chess.setPromotion(this.selectedIndex);"
name="selPromo"><option>Queen</option><option>Rook</option><option>Bishop</option><
option>Knight</option></select> | <input type="button" name="strtBtn" value="New
game" onclick="chess.organize(this.form.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(event.keyCode===13&&chess.setPlyDepth(this.value)){alert('Ply depth
setted.' + (Number(this.value) > 2 ? '\nAttention! The game could be very slow.' :
' Good game :)'));}" /> ]</p>
<div id="chessDesk"></div>