js 五子棋(无ai，仅判断胜负)

<!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>五子棋</title>
    <style type="text/css">
        *{margin:0;padding:0;}
        body{margin:0 auto;padding: 0;width:600px;height:600px; text-align:center}
        .top{width:600px;height:55px;}
        .middle{width:600px;height:490px;}
        .left{width:110px;height:480px;float:left;}
        #right{width:480px;height:480px;float:left;padding:10px 0px 0px 10px; background-color:#CCC;}
        #b1{width:450px;height:450px;z-index:1;margin: 10px 10px;position:absolute;}
        #z2{width:480px;height:480px;z-index:2; display:none;position:absolute;}
        #z2 span.wb{ background:url(imgs/wb.gif) no-repeat;}
        #z2 span.bb{background:url(imgs/bb.gif) no-repeat;}
        .bottom{width:600px;height:55px;}
    </style>
    <script src="js/JScriptLib.js" type="text/javascript"></script><!-- 文章js常用类 -->
    <script type="text/javascript">
        var flag = 0;
        var w = [];
        var b = [];
        var chesscount = 1;
        //开始游戏
        function startGame() {
            drawGameBack();//画棋盘
            drawGameFlag();//棋子占位
            showCurrent("白方");
        }
        function drawGameBack() {
            var b1 = JScriptLib.$("b1", 0);
            var divwh = JScriptLib.$("chessboard", 0).value;
            var divcount = 15*15;
            divwh = divwh + "px";
            b1.style.borderTop = "#000 solid 1px";
            b1.style.borderRight = "#000 solid 1px";
            var _div = []
            for (i = 0; i < divcount; i++) {
                _div[i] = document.createElement("div");
                _div[i].className = "div"
                _div[i].style.width = divwh;
                _div[i].style.height = divwh;
                _div[i].style.borderBottom = "#000 solid 1px";
                _div[i].style.borderLeft = "#000 solid 1px";
                _div[i].style.styleFloat = "left";
                b1.appendChild(_div[i]);
            }
        }
        //span 宽高固定 20 px
        function drawGameFlag() {
            var z2 = JScriptLib.$("z2", 0);
            z2.style.display = "block";
            var spanwh = 20;
            var spancount = 16*16;
            spanwh = spanwh + "px";
            var _span = [];
            for (i = 0; i < spancount; i++) {
                _span[i] = document.createElement("span");
                _span[i].className = "span";
                _span[i].style.width = spanwh;
                _span[i].style.height = spanwh;
                _span[i].style.margin = "0px 10px 10px 0px";
                _span[i].style.styleFloat = "left";
                _span[i].style.cursor = "pointer";//设置鼠标样式
                _span[i].title=parseInt(i%16)+"-"+parseInt(i/16);//获取坐标（x,y）
                z2.appendChild(_span[i]);
            }
            showPieces();//添加事件
        }
        function showPieces() {
            var piece = z2.getElementsByTagName("span");
            for (var i = 0; i < piece.length; i++) {
                piece[i].onclick = function() {
                    play(this);
                }
            }
        }
        //开始下子
        function play(obj) {
            if (obj != null) {
                if (obj.className != "wb" && obj.className != "bb") {
                    var index = obj.title;
                    if (flag == 0) {
                        obj.className = "wb"
                        w.push(index);
                        if (isWin(index)) {
                            chesscount = 1;
                            alert("白方胜！");
                            cancelGame();
                        } else {
                            //var xindex = index.split("-");
                            //w[parseInt(xindex[0])][parseInt(xindex[1])] = "白";
                            flag = 1;
                            showCurrent("黑方");
                        }
                    } else {
                        obj.className = "bb"
                        b.push(index);
                        if (isWin(index)) {
                            chesscount = 1;
                            alert("黑方胜！");
                            cancelGame();
                        } else {
                            flag = 0;
                            showCurrent("白方");
                        }
                    }
                }
            }
        }
        //判断是否获胜
        function isWin(currentindex) {
            var win = false;
            var x;
            var y;
            var temp = currentindex.split("-");
            x = parseInt(temp[0]);
            y = parseInt(temp[1]);
            if (flag == 0) {//白方
                //垂直
                if (winArithmetic(x, y, w, 0) == 5) {
                    return win = true;
                }
                //水平
                if (winArithmetic(x, y, w, 1) == 5) {
                    return win = true;
                }
                //45度
                if (winArithmetic(x, y, w, 2) == 5) {
                    return win = true;
                }
                //135度
                if (winArithmetic(x, y, w, 3) == 5) {
                    return win = true;
                }
            } else {//黑方
                //垂直
                if (winArithmetic(x, y, b, 0) == 5) {
                    return win = true;
                }
                //水平
                if (winArithmetic(x, y, b, 1) == 5) {
                    return win = true;
                }
                //45度
                if (winArithmetic(x, y, b, 2) == 5) {
                    return win = true;
                }
                //135度
                if (winArithmetic(x, y, b, 3) == 5) {
                    return win = true;
                }
            }
            return win;
        }
        //0=垂直（y变化） 1=水平（x变化） 2=45度和3=135度（x,y都变化）
        function winArithmetic(x, y, objarr, direction) {
            var strtemp = getStr(x, y, 1, direction); //(changepoint + 1).toString() + "-" + fixedpoint;
            if (objarr.toString().indexOf(strtemp) != -1) {//正方1 继续判断
                chesscount = 2;
                strtemp = getStr(x, y, 2, direction); //(changepoint + 2).toString() + "-" + fixedpoint;
                //正方2 继续判断
                if (objarr.toString().indexOf(strtemp) != -1) {
                    chesscount = 3;
                    strtemp = getStr(x, y, 3, direction); //(changepoint + 3).toString() + "-" + fixedpoint;
                    //正方3 继续判断
                    if (objarr.toString().indexOf(strtemp) != -1) {
                        chesscount = 4;
                        strtemp = getStr(x, y, 4, direction); //(changepoint + 4).toString() + "-" + fixedpoint;
                        //正方4 继续判断
                        if (objarr.toString().indexOf(strtemp) != -1) {//正方5 返回
                            return chesscount = 5;
                        } else {//正方4，反方判断
                            strtemp = getStr(x, y, -1, direction); //(changepoint - 1).toString() + "-" + fixedpoint;
                            if (objarr.toString().indexOf(strtemp) != -1) {//正方4 反方1 返回
                                return chesscount = 5;
                            }
                        }
                    } else {//正方3 反方判断
                        strtemp = getStr(x, y, -1, direction); //(changepoint - 1).toString() + "-" + fixedpoint;
                        if (objarr.toString().indexOf(strtemp) != -1) {
                            chesscount = 4;  //正方3 反方1 共4
                            strtemp = getStr(x, y, -2, direction); //(changepoint - 2).toString() + "-" + fixedpoint;
                            //正方3 反方1 共4 反方判断
                            if (objarr.toString().indexOf(strtemp) != -1) {
                                return chesscount=5;
                            }
                        }
                    }
                } else {//正方2 反方判断
                    strtemp = getStr(x, y, -1, direction); //(changepoint - 1).toString() + "-" + fixedpoint;
                    if (objarr.toString().indexOf(strtemp) != -1) {//正方2 反方1 共3 继续反方判断
                        chesscount = 3;
                        strtemp = getStr(x, y, -2, direction); //(changepoint - 2).toString() + "-" + fixedpoint;
                        if (objarr.toString().indexOf(strtemp) != -1) {//正方2 反方2 共4 继续反方判断
                            chesscount = 4;
                            strtemp = getStr(x, y, -3, direction); //(changepoint - 3).toString() + "-" + fixedpoint;
                            if (objarr.toString().indexOf(strtemp) != -1) {//正方2 反方3 共5 返回
                                return chesscount=5;
                            }
                        }
                    }
                }
            } else {//正方1 反方判断
                strtemp = getStr(x, y, -1, direction); //(changepoint - 1).toString() + "-" + fixedpoint;
                if (objarr.toString().indexOf(strtemp) != -1) {//正方1 反方1 共2 继续反方判断
                    chesscount = 2;
                    strtemp = getStr(x, y, -2, direction); //(changepoint - 2).toString() + "-" + fixedpoint;
                    if (objarr.toString().indexOf(strtemp) != -1) {//正方1 反方2 共3 继续反方判断
                        chesscount = 3;
                        strtemp = getStr(x, y, -3, direction); //(changepoint - 3).toString() + "-" + fixedpoint;
                        if (objarr.toString().indexOf(strtemp) != -1) {//正方1 反方3 共4 继续反方判断
                            chesscount = 4;
                            strtemp = getStr(x, y, -4, direction); //(changepoint - 4).toString() + "-" + fixedpoint;
                            if (objarr.toString().indexOf(strtemp) != -1) {//正方1 反方4 共5 返回
                                return chesscount=5;
                            }
                        }
                    }
                }
            }
            return chesscount;
        }
        function getStr(x, y, changeindex,direction) {
            var str = "";
            switch (direction) {
                case 0: //垂直 y变化
                    str = x + "-" + (y + changeindex).toString();
                    break;
                case 1: //水平 x变化
                    str = (x + changeindex).toString() + "-" + y;
                    break;
                case 2: //2=45度（正方 x加y加）
                    str = (x + changeindex).toString() + "-" + (y + changeindex).toString();
                    break;
                case 3: //3=135度（正方 x加y减）
                    str = (x + changeindex).toString() + "-" + (y - changeindex).toString();
                    break;
            }
            return str;
        }
        function showCurrent(info) {
            JScriptLib.$("showinfo", 0).innerHTML = "当期执子为：<font color=red>" + info + "</font>";
        }
        function cancelGame() {
            var b1 = JScriptLib.$("b1", 0);
            b1.innerText = "";
            b1.style.border = "none";
            JScriptLib.$("z2", 0).innerText = "";
            chesscount = 1;
            w = [];
            b = [];
            flag = 0;
        }
    </script>
</head>
<body>
<!------- 头部开始 ------->
<div class="top">五子棋
<p id="showinfo"></p>
</div>
<!--头部结尾-->
<div class="middle">
<!------- 左边开始 ------->
<div class="left">
<h4>五子棋设置</h4>
<ul>
<li>棋盘大小
    <select id="chessboard">
    <option value="29">30*30</option>
    </select>
</li>
<li>棋子大小
    <select>
    <option>20px</option>
    </select>
</li>
<li><input type="button" value="开始游戏" onclick="startGame();" /></li>
<li><input type="button" value="重置设置" onclick="cancelGame();" /></li>
</ul>
</div>
<!-- 左边结尾 -->
<!-------- 右边开始 -------->
<div id="right">
<div id="b1"></div>
<div id="z2"></div>
</div>
<!--右边结尾 -->
</div>
<!--中部内容结尾-->
<!-------- 底部开始 -------->
<div class="bottom">版权</div>
<!-- 底部结尾 -->
</body>
</html>