标签：function 效果五子棋 js item chess && chessPoint chessArr

任务分解

一、绘制棋盘

二、绑定事件

1、先计算出需要绘制棋子的坐标即将来绘制的棋子在哪个单元格内

2、绘制棋子首先判断棋子是否存在应该添加到哪个单元格内，分四种情况：

1.1 正常情况

1.2 最右侧超出边界只能放在最后一个单元格内

1.3 左下侧超出边界只能放在最后一个单元格内

1.4 右下侧超出边界只能放在最后一个单元格内

3、当5个连续的棋子一样就算赢了游戏结束处理结束的逻辑五个连续的需要处理四种情况：

1.1 横向的5个连续相同的棋子

1.2 竖着的5个连续相同的棋子

1.3 二个斜着的5个连续相同的棋子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div class="container">
        <table class="chessboard"></table>
    </div>
    <script src="./js/index.js"></script>
</body>
</html>

*{
    /* margin: 0;
    padding: 0; */
}
.container{
    width: 500px;
    height: 500px;
    border: 1px solid #ccc;
    background-color: bisque;
    margin: 30px auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.chessboard{
    border-collapse: collapse;
    border-spacing: 0;
    width: 94%;
    height: 94%;
}
.chessboard td{
    border: 1px solid #000;
    position: relative;
}
.chess{
    position: absolute;
    top: -50%;
    left: -50%;
    width: 80%;
    height: 80%;
    background-color: lightgrey;
    border-radius: 50%;
    color: lightgrey;
    font-size: 12px;
    font-weight: bold;

    /* 弹性盒文字居中 */
    display: flex;
    align-items: center;
    justify-content: center;
}
.white{
    background: #fff;
}
.blackc{
    background-color: #000;
}
.win{
    border: 1px solid red;
    box-shadow: 0 0 3px 2px red;
}

function $(selector) {
    return document.querySelector(selector);
}

function $$(selector) {
    return document.querySelectorAll(selector);
}
var chessboard = document.querySelector('.chessboard');
var whichOne = "white";
//生成的最大范围区间
var sectionNum = 14;
//是否结束
var isGameOver = false;
var chessArr = [];
function initChessboard() {
    var tableContent = '';
    for (var i = 0; i < sectionNum; i++) {
        var row = `<tr>`;
        for (var j = 0; j < sectionNum; j++) {
            row += `<td data-row="${i}" data-line="${j}"></td>`;
        }
        row += '</tr>';
        tableContent += row;
    }
    chessboard.innerHTML = tableContent;
}
//offsetLeft 一个元素相对于父元素的的水平偏移量
function bindEvent() {
    chessboard.addEventListener('click', function (e) {
        console.log(e);
        if (!isGameOver) {
            var temp = Object.assign({}, e.target.dataset);
            if (e.target.nodeName === 'TD') {
                //首先判断点击的td 所处的坐标  （从而计算出 棋子在哪个单元格）
                //比较鼠标点击的位置 与单元格的一半哪个大哪个小 从而计算出棋子是在当前单元格还是在下一个单元格内

                //求出单元格的宽高
                var tdw = chessboard.clientWidth * 0.94 / sectionNum;
                //比一半小则保留当前在当前单元格内
                //比一半大则保留在下一个单元格内
                var positionX = e.offsetX > tdw / 2;
                var positionY = e.offsetY > tdw / 2;
                //计算出棋子的坐标 也就是在哪个单元格内
                var chessPoint = {
                    x: positionX ? parseInt(temp.line) + 1 : parseInt(temp.line),
                    y: positionY ? parseInt(temp.row) + 1 : parseInt(temp.row),
                    c: whichOne
                }

                //绘制棋子
                chessMove(chessPoint);
            }
        } else {
            //结束了是否要重新开始
            if (window.confirm('恭喜你赢了，是否要重新开始?')) {
                //重新开始 重新绘制 数组置空
                isGameOver = false;
                initChessboard();
                chessArr = [];
            }
        }
    })
}

function chessMove(chessPoint) {
    //检测棋子已经绘制 在点击到当前范围内不在绘制棋子
    //判断棋子是否已经存在
    if (exist(chessPoint) && !isGameOver) {
        //绘制棋子 就是将div添加到单元格内

        var newDiv = `<div class="chess ${chessPoint.c}" data-row="${chessPoint.y}" data-line="${chessPoint.x}">`;
        chessArr.push(chessPoint);
        //添加到哪个单元格内分四种情况 （处理边界条件）

        //正常情况
        if (chessPoint.x < 14 && chessPoint.y < 14) {
            var tdP = $(`td[data-row='${chessPoint.y}'][data-line='${chessPoint.x}']`);
            console.log(tdP)
            tdP.innerHTML += newDiv;
        }

        //最右侧 超出边界只能放在最后一个单元格内
        if (chessPoint.x === 14 && chessPoint.y < 14) {
            var tdP = $(`td[data-row='${chessPoint.y}'][data-line='${chessPoint.x - 1}']`);
            tdP.innerHTML += newDiv;
            tdP.lastChild.style.left = '50%';
        }

        //左下侧 超出边界只能放在最后一个单元格内
        if (chessPoint.x < 14 && chessPoint.y === 14) {
            var tdP = $(`td[data-row='${chessPoint.y - 1}'][data-line='${chessPoint.x}']`);
            tdP.innerHTML += newDiv;
            tdP.lastChild.style.top = '50%';
        }

        //右下侧 超出边界只能放在最后一个单元格内
        if (chessPoint.x === 14 && chessPoint.y === 14) {
            var tdP = $(`td[data-row='${chessPoint.y - 1}'][data-line='${chessPoint.x - 1}']`);
            tdP.innerHTML += newDiv;
            tdP.lastChild.style.left = '50%';
            tdP.lastChild.style.top = '50%';
        }

        whichOne = whichOne === 'white' ? 'blackc' : 'white';
    }

    //判断游戏是否结束
    checker()
}

function exist(chessPoint) {
    var res = chessArr.find(function (item) {
        return item.x === chessPoint.x && item.y === chessPoint.y && item.c === chessPoint.c
    })
    return res === undefined ? true : false;
}

function checker() {
    console.log(chessArr);
    for (var i = 0; i < chessArr.length; i++) {
        var chess = chessArr[i];
        var chess2, chess3, chess4, chess5;

        //处理边界条件  5个连续的 分四种情况

        //连续横着的
        chess2 = chessArr.find(function (item) {
            return chess.x === item.x + 1 && chess.y === item.y && chess.c === item.c;
        });
        chess3 = chessArr.find(function (item) {
            return chess.x === item.x + 2 && chess.y === item.y && chess.c === item.c;
        });
        chess4 = chessArr.find(function (item) {
            return chess.x === item.x + 3 && chess.y === item.y && chess.c === item.c;
        });
        chess5 = chessArr.find(function (item) {
            return chess.x === item.x + 4 && chess.y === item.y && chess.c === item.c;
        });
        if (chess2 && chess3 && chess4 && chess5) {
            end(chess, chess2, chess3, chess4, chess5);
        }

        //连续竖着的
        chess2 = chessArr.find(function (item) {
            return chess.y === item.y + 1 && chess.x === item.x && chess.c === item.c;
        })
        chess3 = chessArr.find(function (item) {
            return chess.y === item.y + 2 && chess.x === item.x && chess.c === item.c;
        })
        chess4 = chessArr.find(function (item) {
            return chess.y === item.y + 3 && chess.x === item.x && chess.c === item.c;
        })
        chess5 = chessArr.find(function (item) {
            return chess.y === item.y + 4 && chess.x === item.x && chess.c === item.c;
        })
        if (chess2 && chess3 && chess4 && chess5) {
            end(chess, chess2, chess3, chess4, chess5);
        }

        //连续斜着的
        chess2 = chessArr.find(function (item) {
            return chess.x === item.x + 1 && chess.y === item.y + 1 && chess.c === item.c;
        });
        chess3 = chessArr.find(function (item) {
            return chess.x === item.x + 2 && chess.y === item.y + 2 && chess.c === item.c;
        });
        chess4 = chessArr.find(function (item) {
            return chess.x === item.x + 3 && chess.y === item.y + 3 && chess.c === item.c;
        });
        chess5 = chessArr.find(function (item) {
            return chess.x === item.x + 4 && chess.y === item.y + 4 && chess.c === item.c;
        });
        if (chess2 && chess3 && chess4 && chess5) {
            end(chess, chess2, chess3, chess4, chess5);
        }

        //反斜着的
        chess2 = chessArr.find(function (item) {
            return chess.x === item.x - 1 && chess.y === item.y + 1 && chess.c === item.c;
        });
        chess3 = chessArr.find(function (item) {
            return chess.x === item.x - 2 && chess.y === item.y + 2 && chess.c === item.c;
        });
        chess4 = chessArr.find(function (item) {
            return chess.x === item.x - 3 && chess.y === item.y + 3 && chess.c === item.c;
        });
        chess5 = chessArr.find(function (item) {
            return chess.x === item.x - 4 && chess.y === item.y + 4 && chess.c === item.c;
        });
        if (chess2 && chess3 && chess4 && chess5) {
            end(chess, chess2, chess3, chess4, chess5);
        }
    }
}

function end() {
    if (!isGameOver) {
        isGameOver = true;
        //结束之后显示棋子的顺序
        for (var i = 0; i < chessArr.length; i++) {
            $(`div[data-row='${chessArr[i].y}'][data-line='${chessArr[i].x}']`).innerHTML = i + 1;
        }

        //给胜利的棋子加高亮显示
        for (var j = 0; j < arguments.length; j++) {
            console.dir($(`div[data-row='${arguments[j].y}'][data-line='${arguments[j].x}']`))
            $(`div[data-row='${arguments[j].y}'][data-line='${arguments[j].x}']`).classList.add('win');
        }
    }
}

function main() {
    //初始化棋盘
    initChessboard();

    //绑定监听事件
    bindEvent();
}
main();

标签：function,效果,五子棋,js,item,chess,&&,chessPoint,chessArr
From： https://www.cnblogs.com/nianzhilian/p/18499840

js五子棋效果

任务分解

一、绘制棋盘

二、绑定事件

1、先计算出需要绘制棋子的坐标即将来绘制的棋子在哪个单元格内

2、绘制棋子首先判断棋子是否存在应该添加到哪个单元格内，分四种情况：

相关文章

赞助商

阅读排行

js五子棋效果

任务分解

一、绘制棋盘

二、绑定事件

1、先计算出需要绘制棋子的坐标 即将来绘制的棋子在哪个单元格内

2、绘制棋子 首先判断棋子是否存在 应该添加到哪个单元格内，分四种情况：

相关文章

赞助商

阅读排行

1、先计算出需要绘制棋子的坐标即将来绘制的棋子在哪个单元格内

2、绘制棋子首先判断棋子是否存在应该添加到哪个单元格内，分四种情况：