js+html5+canvas简单五子棋


五子棋棋盘落子点对应的二维数组。数组的元素对应落子点。比如数组元素值为0表示该元素对应的落子点没有棋子,数组元素值为1表示该元素对应的落子点有白棋子,数组元素值为2表示该元素对应的落子点有黑棋子;
判断五子棋赢棋的算法是通过对五子棋棋盘落子点对应的二维数组的操作来实现的。

判断五子棋赢棋算法
下边的函数可以实现判断五子棋赢棋的算法,也可以按照教材中相应的算法实现。
其中函数的参数xx.yy为数组下标,chess数组实现五子棋棋盘落子点的数据结构映射。
算法的思想方法是:以当前落子点对应的下标为基点,向其周围8个方向进行搜索,如果有同色子连五子,返回1,或2,否则返回0。返回1代表白棋方胜,返回2代表黑棋方胜。返回0代表没有发生赢棋数据结构状态。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="http://blog.1500km.com/sites/ui-blog/other/favicon.ico" rel="shortcut icon" />      
<link href="http://blog.1500km.com/sites/ui-blog/other/favicon.ico" rel=bookmark /> 
<script type="text/javascript" src="http://blog.1500km.com/sites/ui-blog/other/jquery.js"></script>  
<title>html5简单五子棋</title>
<style type="text/css">
body {margin: 10px;}
hr{ border-bottom:dashed 1px #ccc; border-top:solid 0px #ccc;}      
</style>
<script type="text/javascript">
var canvas;
var context;
var isWhiteTurn=true;//设置是否该轮到白棋
var isSomeoneWin=false;//设置该局棋盘是否赢了,如果赢了就不能再走了
var blackChess=new Image();
blackChess.src="1500km-black-chess.png";//白棋图片

var whiteChess=new Image();
whiteChess.src="1500km-white-chess.png";//黑棋图片

var chessData=new Array(15);//这个为棋盘的二维数组用来保存棋盘信息,初始化0为没有走过的,1为白棋走的,2为黑棋走的

for (var x=0; x<15; x++) {
        chessData[x]=new Array(15);
        for (var y=0; y<15; y++) {
                chessData[x][y]=0;
        }
}


function initQipan() {//页面加载完毕调用函数,初始化棋盘
        canvas=document.getElementById("qiPanArea");
        context=canvas.getContext("2d");
        
        for (var i=0; i<=640; i+=40) {//绘制棋盘的线
                context.beginPath();
                context.moveTo(0, i);
                context.lineTo(640, i);
                context.closePath();
                context.stroke();
                
                context.beginPath();
                context.moveTo(i, 0);
                context.lineTo(i, 640);
                context.closePath();
                context.stroke();
        }
}


function play(e) {//鼠标点击时发生
        var x=parseInt((e.clientX-20) / 40);//计算鼠标点击的区域,如果点击了(65,65),那么就是点击了(1,1)的位置
        var y=parseInt((e.clientY-20) / 40);
        
        if (chessData[x][y] != 0) {//判断该位置是否被下过了
                //alert("你不能在这个位置下棋,这个位置已经有棋子了。");
                return;
        }
        
        if (isWhiteTurn) {
                isWhiteTurn=false;
                drawChess(1, x, y);
        }
        else {
                isWhiteTurn=true;
                drawChess(2, x, y);
        }
        
}


function drawChess(chess, x, y) {//参数为,棋(1为白棋,2为黑棋),数组位置
        if (isSomeoneWin == true) {
                alert("已经结束了,如果需要重新玩,请刷新");
                return;
        }
        if (x>=0 && x<15 && y>=0 && y<15) {
                if (chess == 1) {
                        context.drawImage(whiteChess, x*40+20, y*40+20);//绘制白棋
                        chessData[x][y]=1;
                }
                else {
                        context.drawImage(blackChess, x*40+20, y*40+20);
                        chessData[x][y]=2;
                }
                judge(x, y, chess);
        }
}


function judge(x, y, chess) {//判断该局棋盘是否赢了
        var countZuoyou=0;
        var countShangxia=0;
        var countNa=0;
        var countPie=0;
        
        //左右判断
        for (var i=x; i>=0; i--) {
                if (chessData[i][y] != chess) {
                        break;
                }
                countZuoyou++;
        }
        
        for (var i=x+1; i<15; i++) {
                if (chessData[i][y] != chess) {
                        break;
                }
                countZuoyou++;
        }
        
        //上下判断
        for (var i=y; i>=0; i--) {
                if (chessData[x][i] != chess) {
                        break;
                }
                countShangxia++;
        }
        
        for (var i=y+1; i<15; i++) {
                if (chessData[x][i] != chess) {
                        break;
                }
                countShangxia++;
        }
        
        //左上右下判断
        for (var i=x, j=y; i>=0, j>=0; i--, j--) {
                if (chessData[i][j] != chess) {
                        break;
                }
                countNa++;
        }
        
        for (var i=x+1, j=y+1; i<15, j<15; i++, j++) {
                if (chessData[i][j] != chess) {
                        break;
                }
                countNa++;
        }
        
        //右上左下判断
        for (var i=x, j=y; i>=0, j<15; i--, j++) {
                if (chessData[i][j] != chess) {
                        break;
                }
                countPie++;
        }
        
        for (var i=x+1, j=y-1; i<15, j>=0; i++, j--) {
                if (chessData[i][j] != chess) {
                        break;
                }
                countPie++;
        }
        
        if (countZuoyou>=5 || countShangxia>=5 || countNa>=5 || countPie>=5) {
                if (chess == 1) {
                        alert("白棋赢了");
                }
                else {
                        alert("黑棋赢了");
                }
                isSomeoneWin=true;//设置该局棋盘已经赢了,不可以再走了
        }
}
</script>
</head>
<body onLoad="initQipan()" style="background-color:#f9f9f9;">
<div>
<canvas width="640" id="qiPanArea" onmousedown="play(event)" height="640">你的浏览器不支持HTML5 canvas ,请使用chrome浏览器打开. </canvas>
</div>

<img src="http://blog.1500km.com/sites/download/images/1500km.png" style="vertical-align:middle;" />html5简单五子棋
<hr><br><br>      
<a target="_blank" href="http://www.1500km.com">返回1500km</a>

</body>
</html>

程序运行结果如下图,点击这里亲自运行看看