这只是一个简单的JAVAscript和HTML小程序没有实现人机对战
五子棋棋盘落子点对应的二维数组数组的元素对应落子点比如数组元素值为表示该元素对应的落子点没有棋子数组元素值为表示该元素对应的落子点有白棋子数组元素值为表示该元素对应的落子点有黑棋子
判断五子棋赢棋的算法是通过对五子棋棋盘落子点对应的二维数组的操作来实现的
判断五子棋赢棋算法
下边的函数可以实现判断五子棋赢棋的算法也可以按照教材中相应的算法实现
其中函数的参数xxyy为数组下标chess数组实现五子棋棋盘落子点的数据结构映射
算法的思想方法是以当前落子点对应的下标为基点向其周围个方向进行搜索如果有同色子连五子返回或否则返回返回代表白棋方胜返回代表黑棋方胜返回代表没有发生赢棋数据结构状态
复制代码 代码如下:
<!DOCTYPE html>
< html xmlns="
< head>
<meta httpequiv="ContentType" content="text/html; charset=utf" />
<title></title>
<style type="text/css">
body {
margin: px;
}
</style>
<script type="text/javascript">
var canvas;
var context;
var isWhite = true;//设置是否该轮到白棋
var isWell = false;//设置该局棋盘是否赢了如果赢了就不能再走了
var img_b = new Image();
img_bsrc = "images/bpng";//白棋图片
var img_w = new Image();
img_wsrc = "images/wpng";//黑棋图片
var chessData = new Array();//这个为棋盘的二维数组用来保存棋盘信息初始化为没有走过的为白棋走的为黑棋走的
for (var x = ; x < ; x++) {
chessData[x] = new Array();
for (var y = ; y < ; y++) {
chessData[x][y] = ;
}
}
function drawRect() {//页面加载完毕调用函数初始化棋盘
canvas = documentgetElementById("canvas");
context = canvasgetContext("d");
for (var i = ; i <= ; i += ) {//绘制棋盘的线
contextbeginPath();
contextmoveTo( i);
contextlineTo( i);
contextclosePath();
contextstroke();
contextbeginPath();
contextmoveTo(i );
contextlineTo(i );
contextclosePath();
contextstroke();
}
}
function play(e) {//鼠标点击时发生
var x = parseInt((eclientX ) / );//计算鼠标点击的区域如果点击了（）那么就是点击了（）的位置
var y = parseInt((eclientY ) / );
if (chessData[x][y] != ) {//判断该位置是否被下过了
alert("你不能在这个位置下棋");
return;
}
if (isWhite) {
isWhite = false;
drawChess( x y);
}
else {
isWhite = true;
drawChess( x y);
}
}
function drawChess(chess x y) {//参数为棋（为白棋为黑棋）数组位置
if (isWell == true) {
alert("已经结束了如果需要重新玩请刷新");
return;
}
if (x >= && x < && y >= && y < ) {
if (chess == ) {
contextdrawImage(img_w x * + y * + );//绘制白棋
chessData[x][y] = ;
}
else {
contextdrawImage(img_b x * + y * + );
chessData[x][y] = ;
}
judge(x y chess);
}
}
function judge(x y chess) {//判断该局棋盘是否赢了
var count = ;
var count = ;
var count = ;
var count = ;
//左右判断
for (var i = x; i >= ; i) {
if (chessData
[y] != chess) {
break;
}
count++;
}
for (var i = x + ; i < ; i++) {
if (chessData
[y] != chess) {
break;
}
count++;
}
//上下判断
for (var i = y; i >= ; i) {
if (chessData[x]
!= chess) {
break;
}
count++;
}
for (var i = y + ; i < ; i++) {
if (chessData[x]
!= chess) {
break;
}
count++;
}
//左上右下判断
for (var i = x j = y; i >= j >= ; i j) {
if (chessData
[j] != chess) {
break;
}
count++;
}
for (var i = x + j = y + ; i < j < ; i++ j++) {
if (chessData
[j] != chess) {
break;
}
count++;
}
//右上左下判断
for (var i = x j = y; i >= j < ; i j++) {
if (chessData
[j] != chess) {
break;
}
count++;
}
for (var i = x + j = y ; i < j >= ; i++ j) {
if (chessData
[j] != chess) {
break;
}
count++;
}
if (count >= || count >= || count >= || count >= ) {
if (chess == ) {
alert("白棋赢了");
}
else {
alert("黑棋赢了");
}
isWell = true;//设置该局棋盘已经赢了不可以再走了
}
}
</script>
< /head>
< body onload="drawRect()">
<div>
<canvas width="" id="canvas" onmousedown="play(event)" height="">你的浏览器不支持HTML canvas请使用 google chrome 浏览器 打开
</canvas>
</div>
< /body>
< /html>
