简介

         本文将会基于React 实现五子棋小游戏，游戏规则为先让5颗棋子连成1线的一方获胜。

实现效果

技术实现

页面布局

     <table style={{border: '1px solid #000', borderCollapse: 'collapse', backgroundColor: 'lightgray'}}>
            <tbody>
            {
                squares.map((row, rowIndex) => {
                    return <tr key={rowIndex}>
                        {
                            row.map((col, colIndex) => {
                                return <td key={colIndex}
                                           style={{border: '1px solid #000', width: '30px', height: '30px'}}
                                           onClick={(event) => {
                                               let item = squares[rowIndex][colIndex];
                                               if (item !== '') {
                                                   return;
                                               }
                                               if (times % 2 === 0) {
                                                   item = 'black';
                                               } else {
                                                   item = 'white';
                                               }
                                               const newSquares = [...squares];
                                               newSquares[rowIndex][colIndex] = item;

                                               setTimes(times + 1);
                                               setSquares(newSquares);
                                           }
                                           }
                                >
                                    {col === 'white' ?
                                        <div
                                            style={{width: '100%', height: '100%', backgroundColor: 'white', borderRadius: '50%'}}></div>
                                        : (col === 'black' ?
                                            <div
                                                style={{width: '100%', height: '100%', backgroundColor: 'black', borderRadius: '50%'}}></div> : col)}
                                </td>
                            })
                        }
                    </tr>
                })
            }
            </tbody>
        </table>

        本文用table实现游戏布局，棋盘大小为15 * 15，背景色为浅灰，棋子为白色或黑色。

下棋逻辑

let item = squares[rowIndex][colIndex];
if (item !== '') {
   return;
}
if (times % 2 === 0) {
   item = 'black';
} else {
   item = 'white';
}
const newSquares = [...squares];
newSquares[rowIndex][colIndex] = item;

setTimes(times + 1);
setSquares(newSquares);

        基于times控制是白方还是黑方，然后更新squares状态，棋盘会根据squares状态进行显示。

获胜逻辑判断

    useEffect(()=>{

        // 计算dp的值
        for (let i = 0; i < 15; i++) {
            for (let j = 0; j < 15; j++) {
                if (squares[i][j] === '') {
                    continue;
                }
                // 判断左边
                if (j >= 5){
                    let num = 1;
                    for (let k = 1; k < 5; k++) {
                        if (squares[i][j - k] === squares[i][j]) {
                            num++;
                        } else {
                            break;
                        }
                    }
                    if (num >= 5) {
                        alert(squares[i][j] +'win');
                        setSquares(initSquares)
                        setTimes(0);
                        return;
                    }
                }
                // 判断上边
                if (i >= 5){
                    let num = 1;
                    for (let k = 1; k < 5; k++) {
                        if (squares[i - k][j] === squares[i][j]) {
                            num++;
                        } else {
                            break;
                        }
                    }
                    if (num >= 5) {
                        alert(squares[i][j] +'win');
                        setSquares(initSquares)
                        setTimes(0);
                        return;
                    }
                }
                // 判断右边
                if (j <= 10){
                    let num = 1;
                    for (let k = 1; k < 5; k++) {
                        if (squares[i][j + k] === squares[i][j]) {
                            num++;
                        } else {
                            break;
                        }
                    }
                    if (num >= 5) {
                        alert(squares[i][j] +'win');
                        setSquares(initSquares)
                        setTimes(0);
                        return;
                    }
                }
                // 判断下边
                if (i <= 10){
                    let num = 1;
                    for (let k = 1; k < 5; k++){
                        if (squares[i + k][j] === squares[i][j]) {
                            num++;
                        } else {
                            break;
                        }
                    }
                    console.log(i + ',' + j + ':'+ num)
                    if (num >= 5) {
                        alert(squares[i][j] +'win');
                        setSquares(initSquares)
                        setTimes(0);
                        return;
                    }
                }
                // 判断左上
                if (i >= 5 && j >= 5){
                    let num = 1;
                    for (let k = 1; k < 5; k++) {
                        if (squares[i - k][j - k] === squares[i][j]) {
                            num++;
                        } else {
                            break;
                        }
                    }
                    if (num >= 5) {
                        alert(squares[i][j] +'win');
                        setSquares(initSquares)
                        setTimes(0);
                        return;
                    }
                }
                // 判断右上
                if (i <= 10 && j >= 5){
                    let num = 1;
                    for (let k = 1; k < 5; k++) {
                        if (squares[i + k][j - k] === squares[i][j]) {
                            num++;
                        } else {
                            break;
                        }
                    }
                    if (num >= 5) {
                        alert(squares[i][j] +'win');
                        setSquares(initSquares)
                        setTimes(0);
                        return;
                    }
                }
                // 判断左下
                if (i >= 5 && j <= 10){
                    let num = 1;
                    for (let k = 1; k < 5; k++) {
                        if (squares[i - k][j + k] === squares[i][j]) {
                            num++;
                        } else {
                            break;
                        }
                    }
                    if (num >= 5) {
                        alert(squares[i][j] +'win');
                        setSquares(initSquares)
                        setTimes(0);
                        return;
                    }
                }
                // 判断右下
                if (i <= 10 && j <= 10){
                    let num = 1;
                    for (let k = 1; k < 5; k++){
                        if (squares[i + k][j + k] === squares[i][j]) {
                            num++;
                        } else {
                            break;
                        }
                    }
                    if (num >= 5) {
                        alert(squares[i][j] +'win');
                        setSquares(initSquares)
                        setTimes(0);
                        return;
                    }
                }
            }
        }

    }, [squares])

         判断每个棋子上下左右，左上，右上，左下，右下是否有连续5个棋子。

整体代码

const Board = () => {
    /**
     * 创建一个 15 * 15  的棋盘
     */
    const initSquares = Array.from({length: 15},
        () => new Array(15).fill(''));
    const [squares, setSquares] = useState(initSquares);
    const [times, setTimes] = useState(0);
    useEffect(()=>{

        // 计算dp的值
        for (let i = 0; i < 15; i++) {
            for (let j = 0; j < 15; j++) {
                if (squares[i][j] === '') {
                    continue;
                }
                // 判断左边
                if (j >= 5){
                    let num = 1;
                    for (let k = 1; k < 5; k++) {
                        if (squares[i][j - k] === squares[i][j]) {
                            num++;
                        } else {
                            break;
                        }
                    }
                    if (num >= 5) {
                        alert(squares[i][j] +'win');
                        setSquares(initSquares)
                        setTimes(0);
                        return;
                    }
                }
                // 判断上边
                if (i >= 5){
                    let num = 1;
                    for (let k = 1; k < 5; k++) {
                        if (squares[i - k][j] === squares[i][j]) {
                            num++;
                        } else {
                            break;
                        }
                    }
                    if (num >= 5) {
                        alert(squares[i][j] +'win');
                        setSquares(initSquares)
                        setTimes(0);
                        return;
                    }
                }
                // 判断右边
                if (j <= 10){
                    let num = 1;
                    for (let k = 1; k < 5; k++) {
                        if (squares[i][j + k] === squares[i][j]) {
                            num++;
                        } else {
                            break;
                        }
                    }
                    if (num >= 5) {
                        alert(squares[i][j] +'win');
                        setSquares(initSquares)
                        setTimes(0);
                        return;
                    }
                }
                // 判断下边
                if (i <= 10){
                    let num = 1;
                    for (let k = 1; k < 5; k++){
                        if (squares[i + k][j] === squares[i][j]) {
                            num++;
                        } else {
                            break;
                        }
                    }
                    console.log(i + ',' + j + ':'+ num)
                    if (num >= 5) {
                        alert(squares[i][j] +'win');
                        setSquares(initSquares)
                        setTimes(0);
                        return;
                    }
                }
                // 判断左上
                if (i >= 5 && j >= 5){
                    let num = 1;
                    for (let k = 1; k < 5; k++) {
                        if (squares[i - k][j - k] === squares[i][j]) {
                            num++;
                        } else {
                            break;
                        }
                    }
                    if (num >= 5) {
                        alert(squares[i][j] +'win');
                        setSquares(initSquares)
                        setTimes(0);
                        return;
                    }
                }
                // 判断右上
                if (i <= 10 && j >= 5){
                    let num = 1;
                    for (let k = 1; k < 5; k++) {
                        if (squares[i + k][j - k] === squares[i][j]) {
                            num++;
                        } else {
                            break;
                        }
                    }
                    if (num >= 5) {
                        alert(squares[i][j] +'win');
                        setSquares(initSquares)
                        setTimes(0);
                        return;
                    }
                }
                // 判断左下
                if (i >= 5 && j <= 10){
                    let num = 1;
                    for (let k = 1; k < 5; k++) {
                        if (squares[i - k][j + k] === squares[i][j]) {
                            num++;
                        } else {
                            break;
                        }
                    }
                    if (num >= 5) {
                        alert(squares[i][j] +'win');
                        setSquares(initSquares)
                        setTimes(0);
                        return;
                    }
                }
                // 判断右下
                if (i <= 10 && j <= 10){
                    let num = 1;
                    for (let k = 1; k < 5; k++){
                        if (squares[i + k][j + k] === squares[i][j]) {
                            num++;
                        } else {
                            break;
                        }
                    }
                    if (num >= 5) {
                        alert(squares[i][j] +'win');
                        setSquares(initSquares)
                        setTimes(0);
                        return;
                    }
                }
            }
        }

    }, [squares])

    return <div>
        <table style={{border: '1px solid #000', borderCollapse: 'collapse', backgroundColor: 'lightgray'}}>
            <tbody>
            {
                squares.map((row, rowIndex) => {
                    return <tr key={rowIndex}>
                        {
                            row.map((col, colIndex) => {
                                return <td key={colIndex}
                                           style={{border: '1px solid #000', width: '30px', height: '30px'}}
                                           onClick={(event) => {
                                               let item = squares[rowIndex][colIndex];
                                               if (item !== '') {
                                                   return;
                                               }
                                               if (times % 2 === 0) {
                                                   item = 'black';
                                               } else {
                                                   item = 'white';
                                               }
                                               const newSquares = [...squares];
                                               newSquares[rowIndex][colIndex] = item;

                                               setTimes(times + 1);
                                               setSquares(newSquares);
                                           }
                                           }
                                >
                                    {col === 'white' ?
                                        <div
                                            style={{width: '100%', height: '100%', backgroundColor: 'white', borderRadius: '50%'}}></div>
                                        : (col === 'black' ?
                                            <div
                                                style={{width: '100%', height: '100%', backgroundColor: 'black', borderRadius: '50%'}}></div> : col)}
                                </td>
                            })
                        }
                    </tr>
                })
            }
            </tbody>
        </table>

    </div>
}