<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> bzChess example - FEN </title>
<meta name="author" content="Gábor Martini" />
<meta name="keywords" content="chess fen pgn puzzle" />
<meta name="description" content="Javascript chess object to display positions" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<SCRIPT type="text/javascript" LANGUAGE=javascript src="bzchess.js"></script>
<LINK rel="stylesheet" type="text/css" media="screen" href="chess.css" />
<script type="text/javascript">
<!--
function bza_init_chesstable(el) {
el.chessgame = new bzChess(el, "r4kr1/1b2R1n1/pq4p1/4Q3/1p4P1/5P2/PPP4P/1K2R3 w - - 0 1");
}
function startEdit() {
mybrd.chessgame.startSetUpBoard();
castling.value=mybrd.chessgame.mv.castling;
entpassant.value=mybrd.chessgame.mv.ept;
halfmove.value= mybrd.chessgame.mv.hmc;
fullmove.value= mybrd.chessgame.mv.fmn;
}
function stopEdit() {
mybrd.chessgame.mv.castling=castling.value;
mybrd.chessgame.mv.ept=entpassant.value;
mybrd.chessgame.mv.hmc=halfmove.value;
mybrd.chessgame.mv.fmn=fullmove.value;
mybrd.chessgame.endSetupBoard();
fen_text.value=mybrd.chessgame.mv.getFEN();
}
function getFEN() {
fen_text.value=mybrd.chessgame.mv.getFEN();
}
function setFEN(FEN) {
mybrd.chessgame.loadPosition(FEN)
castling.value=mybrd.chessgame.mv.castling;
entpassant.value=mybrd.chessgame.mv.ept;
halfmove.value= mybrd.chessgame.mv.hmc;
fullmove.value= mybrd.chessgame.mv.fmn;
}
//-->
</script>
</head>
<body onload="bza_init_chesstable(mybrd)">
<h1>Example: Handling FEN - Forsyth-Edwards Notation</h1>
<p style="margin: 0px;">The board is initialized with a FEN string.</p>
<p style="margin: 0px;">Right is listed 6 predefined FEN position. With a click on it the board will display the position. In the text box you can fill your own FEN position and set it with the "Set FEN" button.</p>
<p style="margin: 0px;">The board can set in edit mode. The selection can move with the cursor keys. Piece can set with KQBNRP keys. Space removes the selected pieces. Lower case letter are for black pieces, uppercase letters for White pieces.</p>
<p style="padding: 0px; margin: 0px; ">If the board border is red the board is invalid.</p>
<p style="margin: 0px;">The FEN string can be read with the "get FEN" button.</p>
<table width="100%">
<tr>
<td style="vertical-align: top;">
<div id="mytbl" class="chtbl"><div id="mybrd" class="chbrd"></div></div>
<input type="button" value="Make editable" title="Edit position" onclick="startEdit()" /><input type="button" value="Stop editing" title="Stop edit position" onclick="stopEdit()" /><br />
<div style="width: 120px; display: inline-block;">Castling:</div><input type="text" id="castling" /><br />
<div style="width: 120px; display: inline-block;">Ent passant target:</div><input type="text" id="entpassant" value="-"/><br />
<div style="width: 120px; display: inline-block;">Half move clock:</div><input type="text" id="halfmove" value="0"/><br />
<div style="width: 120px; display: inline-block;">Full move number:</div><input type="text" id="fullmove" value=""/><br />
</td>
<td style="vertical-align: top;"><br />
<div style="border: 1px solid green; width: 600px; margin-bottom: 10px;">
To set click on the FEN String:
<ul style="font-family: monospace; font-size: small; cursor: pointer;">
<li onclick="setFEN(this.innerHTML)">r2qkbnr/p4ppp/2pPp3/2p4b/8/5N1P/PPPP1PP1/RNBQ1RK1 b kq - 0 8</li>
<li onclick="setFEN(this.innerHTML)">r2qr1k1/p4ppp/2pbp3/2pn3b/8/3P1NNP/PPP2PP1/R1BQR1K1 b - 8 13</li>
<li onclick="setFEN(this.innerHTML)">r2qr1k1/p1b2ppp/2p1p1b1/2pn4/4N3/3P1N1P/PPP2PP1/R1BQR1K1 w - 11 15</li>
<li onclick="setFEN(this.innerHTML)">r2qr1k1/p1b3pp/2p3b1/2Nnpp2/8/P2P1N1P/1PP2PP1/R1BQR1K1 w f6 0 17</li>
<li onclick="setFEN(this.innerHTML)">r2qr1k1/p1b3pp/2p2nb1/2N1pp2/2PP4/P4N1P/1P3PP1/R1BQR1K1 b - 0 18</li>
<li onclick="setFEN(this.innerHTML)">3r2k1/p1b3pp/2pq1n2/2N1rp1b/2PPp3/P1Q1B2P/1P3PP1/R3R1K1 w - 0 23</li>
</ul>
<input type="text" id="fen_text" name="fen_text" size=80/><br />
<input type="button" onClick="setFEN(fen_text.value)" value="Set FEN"/>
<input type="button" onClick="getFEN()" value="Get FEN"/>
</div>
</td>
</tr>
</table>
</body>
</html>
|
Download
