目前已经实现的：动态棋盘，页面按钮或者键盘前后键控制行棋、退后；保存当前棋局；从数据库中读出对局并且动态显示。下面是JS：board_main.jsvar str_backup_record = strrecord;
$(document).ready(
function (){
$("#board_main .row div").click(
function (){
if ($(this).attr("class") == 'blank')
{
$(this).html(istone);
$(this).attr("class",icolor);
strrecord += $(this).attr("id");
str_backup_record = strrecord;
if (icolor == "black")
{
icolor = "white";
}
else if (icolor == "white")
{
icolor = "black";
}
istone ++;
}
}
);
//后退按钮
$("#take_back").click(function () {
if (istone>=1)
{
current_stone_id = strrecord.substr(strrecord.length-2,2);
strrecord = strrecord.substr(0,strrecord.length-2);
$("#"+current_stone_id).html('');
$("#"+current_stone_id).attr("class","blank");
istone --;
if (icolor == "black")
{
icolor = "white";
}
else if (icolor == "white")
{
icolor = "black";
}
}
});
//前进按钮
$("#next").click(function (){
l_main = strrecord.length;
l_backup = str_backup_record.length;
if (l_main != l_backup)
{
currnet_id = str_backup_record.substr(l_main,2);
$("#"+currnet_id).attr("class",icolor);
$("#"+currnet_id).html(istone);
strrecord += $("#"+currnet_id).attr("id");
if (icolor == "black")
{
icolor = "white";
}
else if (icolor == "white")
{
icolor = "black";
}
istone ++;
}
});
document.onkeydown = function(e) {
if (window.event != null) {
e = event;
}
var kc = e.keyCode;
if (kc == 37) {
$("#take_back").click();
} else if (kc == 39) {
$("#next").click();
}
};
});
查看页面：View.php<?php
include_once("includes/View.class.php");
include_once("includes/db.inc.php");
include_once("includes/functions.php");
if (!preg_match('/[0-9]+/',$_GET['id']))
{
echo "<h1>您要查看的页面出错了，请返回主页面。</h1>";
exit -1;
}
$game_id = $_GET['id'];
$game_detail = getGameDetail($game_id);
if (!$game_detail)
{
echo "<h1>您要查看的页面不存在，请返回主页面。</h1>";
exit -1;
}
?>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?echo $game_detail['bname']."-".$game_detail['wname'];?></title>
<link type="text/css" href="css/board.css" rel="stylesheet" />
<link type="text/css" href="css/viewgame.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<?php
$str = $game_detail['record'];
$matrix = BoardView::string2Board($str);
$output = BoardView::displayActiveBoard($matrix);
echo $output;
?>
<script type="text/javascript">
var istone = <? echo (strlen($str)/2)+1 ?>;
var icolor = '<? if((strlen($str)/2)%2 == 0) echo "black";else echo "white"; ?>';
var strrecord = "<?echo $str;?>";
</script>
<script type="text/javascript" src="js/board_main.js"></script>
<div id="info">
<div class="info_line">
种类：<?echo $game_detail['kind']; ?></div>
<div class="info_line">
黑方：<? echo $game_detail['bname'];?>
</div>
<div class="info_line">
白方：<? echo $game_detail['wname'];?>
</div>
<div class="info_line">
<? if($game_detail['swap']) echo "交换"; else echo "不交换";?>
</div>
<div class="info_line">
黑方用时：<? echo $game_detail['btime'];?>
</div>
<div class="info_line">
白方用时：<? echo $game_detail['wtime'];?>
</div>
<div class="info_line">
规则：<? echo $game_detail['rule'];?>
</div>
<div class="info_line">
打点：<? echo $game_detail['5a'];?>
</div>
<div class="info_line">
比赛日期：<? echo date("Y年m月d日",strtotime($game_detail['date']));?>
</div>
<div class="info_line">
比赛地点：<? echo $game_detail['position'];?>
</div>
<div class="info_line">
结果：<? echo $game_detail['result'];?>
</div>
<div class="comment">
备注：
<p>
<? echo $game_detail['comment'];?>
</p>
</div>
<button onclick="window.location.href='Edit.php?id=<?echo $game_id; ?>'">编辑</button>
<button onclick="window.location.href='index.php'">返回首页</button>
<div class="info_line">
<button id='take_back'><-</button>
<button id='next'>-></button>
</div>
</div></div>
</body>
</html>
$(document).ready(
function (){
$("#board_main .row div").click(
function (){
if ($(this).attr("class") == 'blank')
{
$(this).html(istone);
$(this).attr("class",icolor);
strrecord += $(this).attr("id");
str_backup_record = strrecord;
if (icolor == "black")
{
icolor = "white";
}
else if (icolor == "white")
{
icolor = "black";
}
istone ++;
}
}
);
//后退按钮
$("#take_back").click(function () {
if (istone>=1)
{
current_stone_id = strrecord.substr(strrecord.length-2,2);
strrecord = strrecord.substr(0,strrecord.length-2);
$("#"+current_stone_id).html('');
$("#"+current_stone_id).attr("class","blank");
istone --;
if (icolor == "black")
{
icolor = "white";
}
else if (icolor == "white")
{
icolor = "black";
}
}
});
//前进按钮
$("#next").click(function (){
l_main = strrecord.length;
l_backup = str_backup_record.length;
if (l_main != l_backup)
{
currnet_id = str_backup_record.substr(l_main,2);
$("#"+currnet_id).attr("class",icolor);
$("#"+currnet_id).html(istone);
strrecord += $("#"+currnet_id).attr("id");
if (icolor == "black")
{
icolor = "white";
}
else if (icolor == "white")
{
icolor = "black";
}
istone ++;
}
});
document.onkeydown = function(e) {
if (window.event != null) {
e = event;
}
var kc = e.keyCode;
if (kc == 37) {
$("#take_back").click();
} else if (kc == 39) {
$("#next").click();
}
};
});
查看页面：View.php<?php
include_once("includes/View.class.php");
include_once("includes/db.inc.php");
include_once("includes/functions.php");
if (!preg_match('/[0-9]+/',$_GET['id']))
{
echo "<h1>您要查看的页面出错了，请返回主页面。</h1>";
exit -1;
}
$game_id = $_GET['id'];
$game_detail = getGameDetail($game_id);
if (!$game_detail)
{
echo "<h1>您要查看的页面不存在，请返回主页面。</h1>";
exit -1;
}
?>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?echo $game_detail['bname']."-".$game_detail['wname'];?></title>
<link type="text/css" href="css/board.css" rel="stylesheet" />
<link type="text/css" href="css/viewgame.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<?php
$str = $game_detail['record'];
$matrix = BoardView::string2Board($str);
$output = BoardView::displayActiveBoard($matrix);
echo $output;
?>
<script type="text/javascript">
var istone = <? echo (strlen($str)/2)+1 ?>;
var icolor = '<? if((strlen($str)/2)%2 == 0) echo "black";else echo "white"; ?>';
var strrecord = "<?echo $str;?>";
</script>
<script type="text/javascript" src="js/board_main.js"></script>
<div id="info">
<div class="info_line">
种类：<?echo $game_detail['kind']; ?></div>
<div class="info_line">
黑方：<? echo $game_detail['bname'];?>
</div>
<div class="info_line">
白方：<? echo $game_detail['wname'];?>
</div>
<div class="info_line">
<? if($game_detail['swap']) echo "交换"; else echo "不交换";?>
</div>
<div class="info_line">
黑方用时：<? echo $game_detail['btime'];?>
</div>
<div class="info_line">
白方用时：<? echo $game_detail['wtime'];?>
</div>
<div class="info_line">
规则：<? echo $game_detail['rule'];?>
</div>
<div class="info_line">
打点：<? echo $game_detail['5a'];?>
</div>
<div class="info_line">
比赛日期：<? echo date("Y年m月d日",strtotime($game_detail['date']));?>
</div>
<div class="info_line">
比赛地点：<? echo $game_detail['position'];?>
</div>
<div class="info_line">
结果：<? echo $game_detail['result'];?>
</div>
<div class="comment">
备注：
<p>
<? echo $game_detail['comment'];?>
</p>
</div>
<button onclick="window.location.href='Edit.php?id=<?echo $game_id; ?>'">编辑</button>
<button onclick="window.location.href='index.php'">返回首页</button>
<div class="info_line">
<button id='take_back'><-</button>
<button id='next'>-></button>
</div>
</div></div>
</body>
</html>
创建页面：create.html<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>创建</title>
<link type="text/css" href="css/board.css" rel="stylesheet" />
<link type="text/css" href="css/edit.css" rel="stylesheet" />
<link rel="stylesheet" href="css/yellow3.css" type="text/css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input:first").focus();
$(function() {
$("#gamedate").datepicker({
changeMonth: true,
changeYear: true
});
});
});
</script>
</head>
<body>
<div id='container'>
<div id='board_main'><div class='row'>
<div class='blank' id='f1'></div>
<div class='blank' id='f2'></div>
<div class='blank' id='f3'></div>
<div class='blank' id='f4'></div>
<div class='blank' id='f5'></div>
<div class='blank' id='f6'></div>
<div class='blank' id='f7'></div>
<div class='blank' id='f8'></div>
<div class='blank' id='f9'></div>
<div class='blank' id='fa'></div>
<div class='blank' id='fb'></div>
<div class='blank' id='fc'></div>
<div class='blank' id='fd'></div>
<div class='blank' id='fe'></div>
<div class='blank' id='ff'></div>
</div>
<div class='row'>
<div class='blank' id='e1'></div>
<div class='blank' id='e2'></div>
<div class='blank' id='e3'></div>
<div class='blank' id='e4'></div>
<div class='blank' id='e5'></div>
<div class='blank' id='e6'></div>
<div class='blank' id='e7'></div>
<div class='blank' id='e8'></div>
<div class='blank' id='e9'></div>
<div class='blank' id='ea'></div>
<div class='blank' id='eb'></div>
<div class='blank' id='ec'></div>
<div class='blank' id='ed'></div>
<div class='blank' id='ee'></div>
<div class='blank' id='ef'></div>
</div>
<div class='row'>
<div class='blank' id='d1'></div>
<div class='blank' id='d2'></div>
<div class='blank' id='d3'></div>
<div class='blank' id='d4'></div>
<div class='blank' id='d5'></div>
<div class='blank' id='d6'></div>
<div class='blank' id='d7'></div>
<div class='blank' id='d8'></div>
<div class='blank' id='d9'></div>
<div class='blank' id='da'></div>
<div class='blank' id='db'></div>
<div class='blank' id='dc'></div>
<div class='blank' id='dd'></div>
<div class='blank' id='de'></div>
<div class='blank' id='df'></div></div>
<div class='row'>
<div class='blank' id='c1'></div>
<div class='blank' id='c2'></div>
<div class='blank' id='c3'></div>
<div class='blank' id='c4'></div>
<div class='blank' id='c5'></div>
<div class='blank' id='c6'></div>
<div class='blank' id='c7'></div>
<div class='blank' id='c8'></div>
<div class='blank' id='c9'></div>
<div class='blank' id='ca'></div>
<div class='blank' id='cb'></div>
<div class='blank' id='cc'></div>
<div class='blank' id='cd'></div>
<div class='blank' id='ce'></div>
<div class='blank' id='cf'></div>
</div>
<div class='row'>
<div class='blank' id='b1'></div>
<div class='blank' id='b2'></div>
<div class='blank' id='b3'></div>
<div class='blank' id='b4'></div>
<div class='blank' id='b5'></div>
<div class='blank' id='b6'></div>
<div class='blank' id='b7'></div>
<div class='blank' id='b8'></div>
<div class='blank' id='b9'></div>
<div class='blank' id='ba'></div>
<div class='blank' id='bb'></div>
<div class='blank' id='bc'></div>
<div class='blank' id='bd'></div>
<div class='blank' id='be'></div>
<div class='blank' id='bf'></div>
</div>
<div class='row'>
<div class='blank' id='a1'></div>
<div class='blank' id='a2'></div>
<div class='blank' id='a3'></div>
<div class='blank' id='a4'></div>
<div class='blank' id='a5'></div>
<div class='blank' id='a6'></div>
<div class='blank' id='a7'></div>
<div class='blank' id='a8'></div>
<div class='blank' id='a9'></div>
<div class='blank' id='aa'></div>
<div class='blank' id='ab'></div>
<div class='blank' id='ac'></div>
<div class='blank' id='ad'></div>
<div class='blank' id='ae'></div>
<div class='blank' id='af'></div>
</div>
<div class='row'>
<div class='blank' id='91'></div>
<div class='blank' id='92'></div>
<div class='blank' id='93'></div>
<div class='blank' id='94'></div>
<div class='blank' id='95'></div>
<div class='blank' id='96'></div>
<div class='blank' id='97'></div>
<div class='blank' id='98'></div>
<div class='blank' id='99'></div>
<div class='blank' id='9a'></div>
<div class='blank' id='9b'></div>
<div class='blank' id='9c'></div>
<div class='blank' id='9d'></div>
<div class='blank' id='9e'></div>
<div class='blank' id='9f'></div>
</div>
<div class='row'>
<div class='blank' id='81'></div>
<div class='blank' id='82'></div>
<div class='blank' id='83'></div>
<div class='blank' id='84'></div>
<div class='blank' id='85'></div>
<div class='blank' id='86'></div>
<div class='blank' id='87'></div>
<div class='black' id='88'>1</div>
<div class='blank' id='89'></div>
<div class='blank' id='8a'></div>
<div class='blank' id='8b'></div>
<div class='blank' id='8c'></div>
<div class='blank' id='8d'></div>
<div class='blank' id='8e'></div>
<div class='blank' id='8f'></div>
</div>
<div class='row'>
<div class='blank' id='71'></div>
<div class='blank' id='72'></div>
<div class='blank' id='73'></div>
<div class='blank' id='74'></div>
<div class='blank' id='75'></div>
<div class='blank' id='76'></div>
<div class='blank' id='77'></div>
<div class='blank' id='78'></div>
<div class='blank' id='79'></div>
<div class='blank' id='7a'></div>
<div class='blank' id='7b'></div>
<div class='blank' id='7c'></div>
<div class='blank' id='7d'></div>
<div class='blank' id='7e'></div>
<div class='blank' id='7f'></div>
</div>未完待续
<div class='row'>
<div class='blank' id='61'></div>
<div class='blank' id='62'></div>
<div class='blank' id='63'></div>
<div class='blank' id='64'></div>
<div class='blank' id='65'></div>
<div class='blank' id='66'></div>
<div class='blank' id='67'></div>
<div class='blank' id='68'></div>
<div class='blank' id='69'></div>
<div class='blank' id='6a'></div>
<div class='blank' id='6b'></div>
<div class='blank' id='6c'></div>
<div class='blank' id='6d'></div>
<div class='blank' id='6e'></div>
<div class='blank' id='6f'></div>
</div>
<div class='row'>
<div class='blank' id='51'></div>
<div class='blank' id='52'></div>
<div class='blank' id='53'></div>
<div class='blank' id='54'></div>
<div class='blank' id='55'></div>
<div class='blank' id='56'></div>
<div class='blank' id='57'></div>
<div class='blank' id='58'></div>
<div class='blank' id='59'></div>
<div class='blank' id='5a'></div>
<div class='blank' id='5b'></div>
<div class='blank' id='5c'></div>
<div class='blank' id='5d'></div>
<div class='blank' id='5e'></div>
<div class='blank' id='5f'></div>
</div>
<div class='row'>
<div class='blank' id='41'></div>
<div class='blank' id='42'></div>
<div class='blank' id='43'></div>
<div class='blank' id='44'></div>
<div class='blank' id='45'></div>
<div class='blank' id='46'></div>
<div class='blank' id='47'></div>
<div class='blank' id='48'></div>
<div class='blank' id='49'></div>
<div class='blank' id='4a'></div>
<div class='blank' id='4b'></div>
<div class='blank' id='4c'></div>
<div class='blank' id='4d'></div>
<div class='blank' id='4e'></div>
<div class='blank' id='4f'></div>
</div>
<div class='row'>
<div class='blank' id='31'></div>
<div class='blank' id='32'></div>
<div class='blank' id='33'></div>
<div class='blank' id='34'></div>
<div class='blank' id='35'></div>
<div class='blank' id='36'></div>
<div class='blank' id='37'></div>
<div class='blank' id='38'></div>
<div class='blank' id='39'></div>
<div class='blank' id='3a'></div>
<div class='blank' id='3b'></div>
<div class='blank' id='3c'></div>
<div class='blank' id='3d'></div>
<div class='blank' id='3e'></div>
<div class='blank' id='3f'></div>
</div>
<div class='row'>
<div class='blank' id='21'></div>
<div class='blank' id='22'></div>
<div class='blank' id='23'></div>
<div class='blank' id='24'></div>
<div class='blank' id='25'></div>
<div class='blank' id='26'></div>
<div class='blank' id='27'></div>
<div class='blank' id='28'></div>
<div class='blank' id='29'></div>
<div class='blank' id='2a'></div>
<div class='blank' id='2b'></div>
<div class='blank' id='2c'></div>
<div class='blank' id='2d'></div>
<div class='blank' id='2e'></div>
<div class='blank' id='2f'></div>
</div>
<div class='row'>
<div class='blank' id='11'></div>
<div class='blank' id='12'></div>
<div class='blank' id='13'></div>
<div class='blank' id='14'></div>
<div class='blank' id='15'></div>
<div class='blank' id='16'></div>
<div class='blank' id='17'></div>
<div class='blank' id='18'></div>
<div class='blank' id='19'></div>
<div class='blank' id='1a'></div>
<div class='blank' id='1b'></div>
<div class='blank' id='1c'></div>
<div class='blank' id='1d'></div>
<div class='blank' id='1e'></div>
<div class='blank' id='1f'></div>
</div>
</div>
<script type="text/javascript">
var istone = 2;
var icolor = 'white';
var strrecord = "88";
</script>
<script type="text/javascript" src="js/board_main.js"></script>
<button id='take_back'><-</button>
<button id='next'>-></button>
</div>
<form action="add.php" method="POST" name="create_form">
<div id="info">
<div class="inputs">
种类：<select name="gamekind">
<option value="1">对局</option>
<option value="2">习题</option>
<option value="3">研究</option>
<option value="4">其他</option>
</select>
</div>
<div class="inputs">
黑方：<input name="black_name" type="text" />
</div>
<div class="inputs">
白方：<input name="white_name" type="text" />
</div>
<div class="inputs">
<input type="radio" value="0" name="swap" checked="checked" style="float:none;"/>不交换/<input type="radio" value="1" name="swap" style="float:none;"/>交换
</div>
<div class="inputs">
黑方用时：<input name="black_time" type="text" value="01:00:00" />
</div>
<div class="inputs">
白方用时：<input name="white_time" type="text" value="01:00:00" />
</div>
<div class="inputs">
规则：<select name="gamerule">
<option value="1">Yamaguchi</option>
<option value="2">Taranikov</option>
<option value="3">RIF</option>
<option value="4">Sakata</option>
<option value="5">Gomoku</option>
</select>
</div>
<div class="inputs">
打点：<input name="5thmove" type="text" />
</div>
<div class="inputs">
比赛日期：<input name="gamedate" type="text" id="gamedate" />
</div>
<div class="inputs">
比赛地点：<input name="position" type="text" id="position" />
</div>
<div class="inputs">
结果：<select name="result">
<option value="1">黑胜</option>
<option value="2">白胜</option>
<option value="3">和棋</option>
<option value="4">无胜负</option>
<option value="5">重赛</option>
<option value="6" selected>其他</option>
</select>
</div>
<input type="hidden" id="game_record" name="game_record" />
备注：<br />
<textarea name="comment" id="gamecomment"></textarea>
<br />
<button onclick="submitform();">提交</button>
<script type="text/javascript">
function submitform()
{
$("#game_record").val(strrecord) ;
document.create_form.submit();
}
</script>
</div></form>
</body>
</html>