• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

JavaScript实现黑白五子棋游戏 demo实例

JavaScript web前端中文站 3年前 (2017-08-14) 1039次浏览 已收录 0个评论

五子棋大家都不陌生吧。以前我们玩的可能是 app 版的,但是今天我给大家带来一块 web 版的五子棋。本文制作的黑白五子棋游戏也算是一块 HTML5 游戏吧。

更多精彩内容请看 web 前端中文站
http://www.lisa33xiaoq.net 可按 Ctrl + D 进行收藏

下面我们先来看看我的五子棋的运行效果。

JavaScript 实现黑白五子棋游戏 demo 实例

JavaScript 实现五子棋

怎么样看起来是不是很高大上。实际上它的实现过程一点也不难。我们先从五子棋的规则说起吧。

五子棋通常双方分别使用黑白两色的棋子,下在棋盘直线与横线的交叉点上,先形成 5 子连线者获胜。

根据上面的规则,我们说说我们五子棋实现的步骤:

  • 先要实现一个 15*15 的棋牌。
  • 剩下的就是逻辑。控制谁先走,实时判断输赢。

下面是全部的实现代码:

 <!DOCTYPE html> 
 <html> 
 <head>  
 <meta http-equiv="Content-Type" content="text/html;">  
 <title>web 前端中文站 www.lisa33xiaoq.net 五子棋</title>  
 <link rel="stylesheet" type="text/css" href="reset.css">  
 <script type="text/javascript" src="CookieHandle.js"></script>  
 <script type="text/javascript" src="jquery-1.7.2.js"></script>  
 <style>  

 .wrapper {  
 width: 600px;  position: relative; } 
 /* 棋盘 */ 
 div.chessboard {  
 margin: 30px 0 0 50px;  
 width: 542px;  
 background: url(chessboard.png) no-repeat 14px 14px rgb(250, 250, 250);  
 overflow: hidden;  
 box-shadow: 2px 2px 8px #888;  
 -webkit-box-shadow: 2px 2px 8px #888;  
 -moz-box-shadow: 2px 2px 8px #888; } 
 div.chessboard div {  
 float: left;  
 width: 36px;  
 height: 36px;  
 border-top: 0px solid #ccc;  
 border-left: 0px solid #ccc;  
 border-right: 0;  
 border-bottom: 0;  cursor: pointer; } 
 /* 棋子 */ 
 div.chessboard div.black {  
 background: url(black.png) no-repeat 4px 4px; } 
 div.chessboard div.white {  
 background: url(white.png) no-repeat 4px 4px; } 
 div.chessboard div.hover {  
 background: url(hover.png) no-repeat 1px 1px; } 
 div.chessboard div.hover-up {  
 background: url(hover_up.png) no-repeat 1px 1px; } 
 div.chessboard div.hover-down {  
 background: url(hover_down.png) no-repeat 1px 1px; } 
 div.chessboard div.hover-up-left {  
 background: url(hover_up_left.png) no-repeat 1px 1px; } 
 div.chessboard div.hover-up-right {  
 background: url(hover_up_right.png) no-repeat 1px 1px; } 
 div.chessboard div.hover-left {  
 background: url(hover_left.png) no-repeat 1px 1px; } 
 div.chessboard div.hover-right {  
 background: url(hover_right.png) no-repeat 1px 1px; } 
 div.chessboard div.hover-down-left {  
 background: url(hover_down_left.png) no-repeat 1px 1px; } 
 div.chessboard div.hover-down-right {  
 background: url(hover_down_right.png) no-repeat 1px 1px; } 
 div.chessboard div.white-last {  
 background: url(white_last.png) no-repeat 4px 4px; } 
 div.chessboard div.black-last {  
 background: url(black_last.png) no-repeat 4px 4px; }  
 /* 右侧 */  
 div.operating-panel {  
 position: absolute;  
 left: 610px;  top: 150px;  
 width: 200px;  
 text-align: center; } 
 .operating-panel a {  
 display: inline-block;  
 padding: 10px 15px;  
 margin-bottom: 39px;  
 margin-right: 8px;  
 margin-left: 8px;  
 background: rgb(100, 167, 233);  
 text-decoration: none;  
 color: #333;  
 font-weight: bold;  
 font-size: 16px;  
 font-family: "微软雅黑", "宋体"; } 
 .operating-panel a:hover {  
 background: rgb(48, 148, 247);  
 text-decoration: none; } 

 .operating-panel a.disable, 
 .operating-panel a.disable:hover {  
 cursor: default;  
 background: rgb(197, 203, 209);  
 color: rgb(130, 139, 148); } 
 .operating-panel a.selected {  
 border: 5px solid #F3C242;  
 padding: 5px 10px; } 
 #result_tips {  
 color: #CE4242;  
 font-size: 26px;  
 font-family: "微软雅黑"; } 
 #result_info {  
 margin-bottom: 26px; }  
 </style>
//JavaScript 代码具体如下
//www.lisa33xiaoq.net
< script > $(document).ready(function() {
    fiveChess.init();
});
var fiveChess = {
    NO_CHESS: 0,
    BLACK_CHESS: -1,
    WHITE_CHESS: 1,
    chessArr: [],
    //记录棋子  
    chessBoardHtml: "",
    humanPlayer: "black",
    //玩家棋子颜色  
    AIPlayer: "white",
    //AI 棋子颜色  
    isPlayerTurn: true,
    //轮到 player 下棋  
    totalGames: cookieHandle.getCookie("totalGames") || 0,
    //总局数  winGames: cookieHandle.getCookie("winGames") || 0, 
    //玩家赢局数  
    isGameStart: false,
    //游戏已经开始  
    isGameOver: false,
    //游戏结束  
    playerLastChess: [],
    //玩家最后下子位置  
    AILastChess: [],
    //AI 最后下子位置   
    init: function() {
        this.chessBoardHtml = $("div.chessboard").html();
        var _fiveChess = this;
        //右侧操作按钮   
        $(".operating-panel a").click(function(event) {
            event.preventDefault();
            var id = $(this).attr("id");
            if (_fiveChess.isGameStart && id !== "replay_btn") {
                return;
            }
            //正在游戏 不操作    
            switch (id) {
            case "black_btn":
                _fiveChess.humanPlayer = "black";
                _fiveChess.AIPlayer = "white";
                break;
            case "white_btn":
                _fiveChess.humanPlayer = "white";
                _fiveChess.AIPlayer = "black";
                break;
            case "first_move_btn":
                _fiveChess.isPlayerTurn = true;
                break;
            case "second_move_btn":
                _fiveChess.isPlayerTurn = false;
                break;
            case "replay_btn":
                _fiveChess.resetChessBoard();
                if (_fiveChess.isGameStart) {
                    //点重玩       
                    _fiveChess.gameOver();
                } else {
                    //点开始       
                    _fiveChess.gameStart();
                }
                break;
            }
            if (id !== "replay_btn") {
                $(this).addClass("selected").siblings().removeClass("selected");
            }
        });
        this.resetChessBoard();
        $("#result_info").html("胜率:" + (this.winGames * 100 / this.totalGames | 0) + "%");
    },
    //重置棋盘  
    resetChessBoard: function() {
        $("div.chessboard").html(this.chessBoardHtml);
        $("#result_tips").html("");
        this.isGameOver = false;
        this.isPlayerTurn = $("#first_move_btn").hasClass("selected");
        //初始化棋子状态   
        var i, j;
        for (i = 0; i < 15; i++) {
            this.chessArr[i] = [];
            for (j = 0; j < 15; j++) {
                this.chessArr[i][j] = this.NO_CHESS;
            }
        }
        //player 下棋事件   
        var _fiveChess = this;
        $("div.chessboard div").click(function() {
            if (!_fiveChess.isPlayerTurn || _fiveChess.isGameOver) {
                return;
            }
            if (!_fiveChess.isGameStart) {
                _fiveChess.gameStart();
            }
            var index = $(this).index(),
            i = index / 15 | 0,
            j = index % 15;
            if (_fiveChess.chessArr[i][j] === _fiveChess.NO_CHESS) {
                _fiveChess.playChess(i, j, _fiveChess.humanPlayer);
                if (i === 0 && j === 0) {
                    $(this).removeClass("hover-up-left");
                } else if (i === 0 && j === 14) {
                    $(this).removeClass("hover-up-right");
                } else if (i === 14 && j === 0) {
                    $(this).removeClass("hover-down-left");
                } else if (i === 14 && j === 14) {
                    $(this).removeClass("hover-down-right");
                } else if (i === 0) {
                    $(this).removeClass("hover-up");
                } else if (i === 14) {
                    $(this).removeClass("hover-down");
                } else if (j === 0) {
                    $(this).removeClass("hover-left");
                } else if (j === 14) {
                    $(this).removeClass("hover-right");
                } else {
                    $(this).removeClass("hover");
                }
                _fiveChess.playerLastChess = [i, j];
                _fiveChess.playerWinOrNot(i, j);
            }
        });
        //鼠标在棋盘上移动效果   
        $("div.chessboard div").hover(function() {
            if (!_fiveChess.isPlayerTurn || _fiveChess.isGameOver) {
                return;
            }
            var index = $(this).index(),
            i = index / 15 | 0,
            j = index % 15;
            if (_fiveChess.chessArr[i][j] === _fiveChess.NO_CHESS) {
                if (i === 0 && j === 0) {
                    $(this).addClass("hover-up-left");
                } else if (i === 0 && j === 14) {
                    $(this).addClass("hover-up-right");
                } else if (i === 14 && j === 0) {
                    $(this).addClass("hover-down-left");
                } else if (i === 14 && j === 14) {
                    $(this).addClass("hover-down-right");
                } else if (i === 0) {
                    $(this).addClass("hover-up");
                } else if (i === 14) {
                    $(this).addClass("hover-down");
                } else if (j === 0) {
                    $(this).addClass("hover-left");
                } else if (j === 14) {
                    $(this).addClass("hover-right");
                } else {
                    $(this).addClass("hover");
                }
            }
        },
        function() {
            if (!_fiveChess.isPlayerTurn || _fiveChess.isGameOver) {
                return;
            }
            var index = $(this).index(),
            i = index / 15 | 0,
            j = index % 15;
            if (i === 0 && j === 0) {
                $(this).removeClass("hover-up-left");
            } else if (i === 0 && j === 14) {
                $(this).removeClass("hover-up-right");
            } else if (i === 14 && j === 0) {
                $(this).removeClass("hover-down-left");
            } else if (i === 14 && j === 14) {
                $(this).removeClass("hover-down-right");
            } else if (i === 0) {
                $(this).removeClass("hover-up");
            } else if (i === 14) {
                $(this).removeClass("hover-down");
            } else if (j === 0) {
                $(this).removeClass("hover-left");
            } else if (j === 14) {
                $(this).removeClass("hover-right");
            } else {
                $(this).removeClass("hover");
            }
        });
    },
    gameStart: function() {
        this.totalGames++;
        cookieHandle.setCookie({
            name: "totalGames",
            value: this.totalGames,
            expiresHours: 365 * 24
        });
        //AI 先手   
        if (!this.isPlayerTurn) {
            this.AImoveChess();
        }
        this.isGameStart = true;
        $(".operating-panel p a").addClass("disable");
        $("#replay_btn").html("重玩");
    },
    gameOver: function() {
        this.isGameStart = false;
        $(".operating-panel a").removeClass("disable");
        $("#replay_btn").html("开始");
        $("#result_info").html("胜率:" + (this.winGames * 100 / this.totalGames | 0) + "%");
    },
    //下棋 i 行,j 列,color 颜色  
    playChess: function(i, j, color) {
        this.chessArr[i][j] = color === "black" ? this.BLACK_CHESS: this.WHITE_CHESS;
        if (color === this.AIPlayer) {
            $("div.chessboard div." + color + "-last").addClass(color).removeClass(color + "-last");
            $("div.chessboard div:eq(" + (i * 15 + j) + ")").addClass(color + "-last");
        } else {
            $("div.chessboard div:eq(" + (i * 15 + j) + ")").addClass(color);
        }
    },
    //玩家是否取胜  
    playerWinOrNot: function(i, j) {
        var nums = 1,
        //连续棋子个数    
        chessColor = this.humanPlayer === "black" ? this.BLACK_CHESS: this.WHITE_CHESS,
        m,
        n;
        //x 方向   
        for (m = j - 1; m >= 0; m--) {
            if (this.chessArr[i][m] === chessColor) {
                nums++;
            } else {
                break;
            }
        }
        for (m = j + 1; m < 15; m++) {
            if (this.chessArr[i][m] === chessColor) {
                nums++;
            } else {
                break;
            }
        }
        if (nums >= 5) {
            this.playerWin();
            return;
        } else {
            nums = 1;
        } //y 方向   for (m = i - 1; m >= 0; m--) {    if (this.chessArr[m][j] === chessColor) {     nums++;    }    else {     break;    }   }   for (m = i + 1; m < 15; m++) {    if (this.chessArr[m][j] === chessColor) {     nums++;    }    else {     break;    }   }   if (nums >= 5) {    this.playerWin();    return;   }   else {    nums = 1;   }   //左斜方向   for (m = i - 1, n = j - 1; m >= 0 && n >= 0; m--, n--) {    if (this.chessArr[m][n] === chessColor) {     nums++;    }    else {     break;    }   }   for (m = i + 1, n = j + 1; m < 15 && n < 15; m++, n++) {    if (this.chessArr[m][n] === chessColor) {     nums++;    }    else {     break;    }   }   if (nums >= 5) {    this.playerWin();    return;   }   else {    nums = 1;   }   //右斜方向   for (m = i - 1, n = j + 1; m >= 0 && n < 15; m--, n++) {    if (this.chessArr[m][n] === chessColor) {     nums++;    }    else {     break;    }   }   for (m = i + 1, n = j - 1; m < 15 && n >= 0; m++, n--) {    if (this.chessArr[m][n] === chessColor) {     nums++;    }    else {     break;    }   }   if (nums >= 5) {    this.playerWin();    return;   }   this.AImoveChess();  },  playerWin: function () {   this.winGames++;   cookieHandle.setCookie({ name: "winGames", value: this.winGames, expiresHours: 365 * 24 });   this.showResult(true);   this.gameOver();  },  //AI 下棋  AImoveChess: function () {   this.isPlayerTurn = false;   var maxX = 0,    maxY = 0,    maxWeight = 0,    i, j, tem;   for (i = 14; i >= 0; i--) {    for (j = 14; j >= 0; j--) {     if (this.chessArr[i][j] !== this.NO_CHESS) {      continue;     }     tem = this.computeWeight(i, j);     if (tem > maxWeight) {      maxWeight = tem;      maxX = i;      maxY = j;     }    }   }   this.playChess(maxX, maxY, this.AIPlayer);   this.AILastChess = [maxX, maxY];   if ((maxWeight >= 100000 && maxWeight < 250000) || (maxWeight >= 500000)) {    this.showResult(false);    this.gameOver();   }   else {    this.isPlayerTurn = true;   }  },  showResult: function(isPlayerWin) {   if (isPlayerWin) {    $("#result_tips").html("恭喜你获胜!");   }   else {    $("#result_tips").html("哈哈,你输咯!");   }   this.isGameOver = true;   this.showWinChesses(isPlayerWin);  },  //标记显示获胜棋子  showWinChesses: function (isPlayerWin) {   var nums = 1, //连续棋子个数    lineChess = [], //连续棋子位置    i,    j,    chessColor,    m, n;   if (isPlayerWin) {    chessColor = this.humanPlayer === "black" ? this.BLACK_CHESS : this.WHITE_CHESS;    i = this.playerLastChess[0];    j = this.playerLastChess[1];   }   else {    chessColor = this.AIPlayer === "black" ? this.BLACK_CHESS : this.WHITE_CHESS;    i = this.AILastChess[0];    j = this.AILastChess[1];   }   $("div.chessboard div." + this.AIPlayer + "-last").addClass(this.AIPlayer).removeClass(this.AIPlayer + "-last");   //x 方向   lineChess[0] = [i];   lineChess[1] = [j];   for (m = j - 1; m >= 0; m--) {    if (this.chessArr[i][m] === chessColor) {     lineChess[0][nums] = i;     lineChess[1][nums] = m;     nums++;    }    else {     break;    }   }   for (m = j + 1; m < 15; m++) {    if (this.chessArr[i][m] === chessColor) {     lineChess[0][nums] = i;     lineChess[1][nums] = m;     nums++;    }    else {     break;    }   }   if (nums >= 5) {    for (k = nums - 1; k >= 0; k--) {     this.markChess(lineChess[0][k] * 15 + lineChess[1][k], isPlayerWin ? this.humanPlayer : this.AIPlayer);    }    return;   }   //y 方向   nums = 1;   lineChess[0] = [i];   lineChess[1] = [j];   for (m = i - 1; m >= 0; m--) {    if (this.chessArr[m][j] === chessColor) {     lineChess[0][nums] = m;     lineChess[1][nums] = j;     nums++;    }    else {     break;    }   }   for (m = i + 1; m < 15; m++) {    if (this.chessArr[m][j] === chessColor) {     lineChess[0][nums] = m;     lineChess[1][nums] = j;     nums++;    }    else {     break;    }   }   if (nums >= 5) {    for (k = nums - 1; k >= 0; k--) {     this.markChess(lineChess[0][k] * 15 + lineChess[1][k], isPlayerWin ? this.humanPlayer : this.AIPlayer);    }    return;   }   //左斜方向   nums = 1;   lineChess[0] = [i];   lineChess[1] = [j];   for (m = i - 1, n = j - 1; m >= 0 && n >= 0; m--, n--) {    if (this.chessArr[m][n] === chessColor) {     lineChess[0][nums] = m;     lineChess[1][nums] = n;     nums++;    }    else {     break;    }   }   for (m = i + 1, n = j + 1; m < 15 && n < 15; m++, n++) {    if (this.chessArr[m][n] === chessColor) {     lineChess[0][nums] = m;     lineChess[1][nums] = n;     nums++;    }    else {     break;    }   }   if (nums >= 5) {    for (k = nums - 1; k >= 0; k--) {     this.markChess(lineChess[0][k] * 15 + lineChess[1][k], isPlayerWin ? this.humanPlayer : this.AIPlayer);    }    return;   }   //右斜方向   nums = 1;   lineChess[0] = [i];   lineChess[1] = [j];   for (m = i - 1, n = j + 1; m >= 0 && n < 15; m--, n++) {    if (this.chessArr[m][n] === chessColor) {     lineChess[0][nums] = m;     lineChess[1][nums] = n;     nums++;    }    else {     break;    }   }   for (m = i + 1, n = j - 1; m < 15 && n >= 0; m++, n--) {    if (this.chessArr[m][n] === chessColor) {     lineChess[0][nums] = m;     lineChess[1][nums] = n;     nums++;    }    else {     break;    }   }   if (nums >= 5) {    for (k = nums - 1; k >= 0; k--) {     this.markChess(lineChess[0][k] * 15 + lineChess[1][k], isPlayerWin ? this.humanPlayer : this.AIPlayer);    }   }  },  markChess: function (pos, color) {   $("div.chessboard div:eq(" + pos + ")").removeClass(color).addClass(color + "-last");  },  //下子到 i,j X 方向 结果: 多少连子 两边是否截断  putDirectX: function (i, j, chessColor) {   var m, n,    nums = 1,    side1 = false,    side2 = false;   for (m = j - 1; m >= 0; m--) {    if (this.chessArr[i][m] === chessColor) {     nums++;    }    else {     if (this.chessArr[i][m] === this.NO_CHESS) {      side1 = true;     }     break;    }   }   for (m = j + 1; m < 15; m++) {    if (this.chessArr[i][m] === chessColor) {     nums++;    }    else {     if (this.chessArr[i][m] === this.NO_CHESS) {      side2 = true;     }     break;    }   }   return {"nums": nums, "side1": side1, "side2": side2};  },  //下子到 i,j Y 方向 结果  putDirectY: function (i, j, chessColor) {   var m, n,    nums = 1,    side1 = false,    side2 = false;   for (m = i - 1; m >= 0; m--) {    if (this.chessArr[m][j] === chessColor) {     nums++;    }    else {     if (this.chessArr[m][j] === this.NO_CHESS) {      side1 = true;     }     break;    }   }   for (m = i + 1; m < 15; m++) {    if (this.chessArr[m][j] === chessColor) {     nums++;    }    else {     if (this.chessArr[m][j] === this.NO_CHESS) {      side2 = true;     }     break;    }   }   return {"nums": nums, "side1": side1, "side2": side2};  },  //下子到 i,j XY 方向 结果  putDirectXY: function (i, j, chessColor) {   var m, n,    nums = 1,    side1 = false,    side2 = false;   for (m = i - 1, n = j - 1; m >= 0 && n >= 0; m--, n--) {    if (this.chessArr[m][n] === chessColor) {     nums++;    }    else {     if (this.chessArr[m][n] === this.NO_CHESS) {      side1 = true;     }     break;    }   }   for (m = i + 1, n = j + 1; m < 15 && n < 15; m++, n++) {    if (this.chessArr[m][n] === chessColor) {     nums++;    }    else {     if (this.chessArr[m][n] === this.NO_CHESS) {      side2 = true;     }     break;    }   }   return {"nums": nums, "side1": side1, "side2": side2};  },  putDirectYX: function (i, j, chessColor) {   var m, n,    nums = 1,    side1 = false,    side2 = false;   for (m = i - 1, n = j + 1; m >= 0 && n < 15; m--, n++) {    if (this.chessArr[m][n] === chessColor) {     nums++;    }    else {     if (this.chessArr[m][n] === this.NO_CHESS) {      side1 = true;     }     break;    }   }   for (m = i + 1, n = j - 1; m < 15 && n >= 0; m++, n--) {    if (this.chessArr[m][n] === chessColor) {     nums++;    }    else {     if (this.chessArr[m][n] === this.NO_CHESS) {      side2 = true;     }     break;    }   }   return {"nums": nums, "side1": side1, "side2": side2};  },  //计算下子至 i,j 的权重  computeWeight: function (i, j) {   var weight = 14 - (Math.abs(i - 7) + Math.abs(j - 7)), //基于棋盘位置权重    pointInfo = {}, //某点下子后连子信息    chessColor = this.AIPlayer === "black" ? this.BLACK_CHESS : this.WHITE_CHESS;   //x 方向   pointInfo = this.putDirectX(i, j, chessColor);   weight += this.weightStatus(pointInfo.nums, pointInfo.side1, pointInfo.side2, true);//AI 下子权重   pointInfo = this.putDirectX(i, j, -chessColor);   weight += this.weightStatus(pointInfo.nums, pointInfo.side1, pointInfo.side2, false);//player 下子权重   //y 方向   pointInfo = this.putDirectY(i, j, chessColor);   weight += this.weightStatus(pointInfo.nums, pointInfo.side1, pointInfo.side2, true);//AI 下子权重   pointInfo = this.putDirectY(i, j, -chessColor);   weight += this.weightStatus(pointInfo.nums, pointInfo.side1, pointInfo.side2, false);//player 下子权重   //左斜方向   pointInfo = this.putDirectXY(i, j, chessColor);   weight += this.weightStatus(pointInfo.nums, pointInfo.side1, pointInfo.side2, true);//AI 下子权重   pointInfo = this.putDirectXY(i, j, -chessColor);   weight += this.weightStatus(pointInfo.nums, pointInfo.side1, pointInfo.side2, false);//player 下子权重   //右斜方向   pointInfo = this.putDirectYX(i, j, chessColor);   weight += this.weightStatus(pointInfo.nums, pointInfo.side1, pointInfo.side2, true);//AI 下子权重   pointInfo = this.putDirectYX(i, j, -chessColor);   weight += this.weightStatus(pointInfo.nums, pointInfo.side1, pointInfo.side2, false);//player 下子权重   return weight;  },  //权重方案   独:两边为空可下子,单:一边为空  weightStatus: function (nums, side1, side2, isAI) {   var weight = 0;   switch (nums) {    case 1:     if (side1 && side2) {      weight = isAI ? 15 : 10; //独一     }     break;    case 2:     if (side1 && side2) {      weight = isAI ? 100 : 50; //独二     }     else if (side1 || side2) {      weight = isAI ? 10 : 5; //单二     }     break;    case 3:     if (side1 && side2) {      weight = isAI ? 500 : 200; //独三     }     else if (side1 || side2) {      weight = isAI ? 30 : 20; //单三     }     break;    case 4:     if (side1 && side2) {      weight = isAI ? 5000 : 2000; //独四     }     else if (side1 || side2) {      weight = isAI ? 400 : 100; //单四     }     break;    case 5:     weight = isAI ? 100000 : 10000; //五     break;    default:     weight = isAI ? 500000 : 250000;     break;   }   return weight;  } };  </script> </head> <body> <div class="wrapper">  <div class="chessboard">   <!-- top line -->   <div class="chess-top"></div>   <div class="chess-top"></div>   <div class="chess-top"></div>   <div class="chess-top"></div>   <div class="chess-top"></div>   <div class="chess-top"></div>   <div class="chess-top"></div>   <div class="chess-top"></div>   <div class="chess-top"></div>   <div class="chess-top"></div>   <div class="chess-top"></div>   <div class="chess-top"></div>   <div class="chess-top"></div>   <div class="chess-top"></div>   <div class="chess-top chess-right"></div>   <!-- line 1 -->   <div class="chess-left"></div>     <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-right"></div>   <!-- line 2 -->   <div class="chess-left"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-right"></div>   <!-- line 3 -->   <div class="chess-left"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-right"></div>   <!-- line 4 -->   <div class="chess-left"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-right"></div>   <!-- line 5 -->   <div class="chess-left"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-right"></div>   <!-- line 6 -->   <div class="chess-left"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-right"></div>   <!-- line 7 -->   <div class="chess-left"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-right"></div>   <!-- line 8 -->   <div class="chess-left"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-right"></div>   <!-- line 9 -->   <div class="chess-left"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-right"></div>   <!-- line 10 -->   <div class="chess-left"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-right"></div>   <!-- line 11 -->   <div class="chess-left"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-right"></div>   <!-- line 12 -->   <div class="chess-left"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-right"></div>   <!-- line 13 -->   <div class="chess-left"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-middle"></div>   <div class="chess-right"></div>   <!-- bottom line  -->   <div class="chess-bottom"></div>   <div class="chess-bottom"></div>   <div class="chess-bottom"></div>   <div class="chess-bottom"></div>   <div class="chess-bottom"></div>   <div class="chess-bottom"></div>   <div class="chess-bottom"></div>   <div class="chess-bottom"></div>   <div class="chess-bottom"></div>   <div class="chess-bottom"></div>   <div class="chess-bottom"></div>   <div class="chess-bottom"></div>   <div class="chess-bottom"></div>   <div class="chess-bottom"></div>   <div class="chess-bottom chess-right"></div>  </div>   <div class="operating-panel">   <p>    <a id="black_btn" class="btn selected" href="#">黑子</a>    <a id="white_btn" class="btn" href="#">白子</a>   </p>   <p>    <a id="first_move_btn" class="btn selected" href="#">先手</a>    <a id="second_move_btn" class="btn" href="#">后手</a>   </p>   <a id="replay_btn" class="btn" href="#">开始</a>   <p id="result_info">胜率:100%</p>   <p id="result_tips"></p>  </div>  <div style="display: none">   <!-- 图片需合并 减少 http 请求数 -->   <img src="black.png" alt="preload" />   <img src="white.png" alt="preload" />   <img src="hover.png" alt="preload" />   <img src="hover_up.png" alt="preload" />   <img src="hover_down.png" alt="preload" />   <img src="hover_up_left.png" alt="preload" />   <img src="hover_up_right.png" alt="preload" />   <img src="hover_left.png" alt="preload" />   <img src="hover_right.png" alt="preload" />   <img src="hover_down_left.png" alt="preload" />   <img src="hover_down_right.png" alt="preload" />   <img src="black_last.png" alt="preload" />   <img src="white_last.png" alt="preload" />  </div> </div> </body> </html>
        

全部源码已共享到了 runjs 上,http://runjs.cn/code/jhp3w797

【注:本文源自网络文章资源,由站长整理发布】


web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:JavaScript 实现黑白五子棋游戏 demo 实例
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址