用js怎么做五子棋

用JavaScript制作五子棋的方法

使用JavaScript制作五子棋的方法有：创建棋盘、实现棋子落子功能、判定胜负、优化游戏体验。 下面将详细描述如何实现这些功能。

一、创建棋盘

为了创建一个五子棋的棋盘，我们需要一个二维数组来表示棋盘的状态，以及一个HTML表格来显示棋盘。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五子棋</title>
    <style>
        table {
            border-collapse: collapse;
        }
        td {
            width: 30px;
            height: 30px;
            border: 1px solid black;
            text-align: center;
            font-size: 24px;
            line-height: 30px;
        }
    </style>
</head>
<body>
    <table id="chessboard"></table>
    <script src="gomoku.js"></script>
</body>
</html>

在JavaScript文件中，我们将初始化一个15×15的二维数组，并生成对应的HTML表格。

const size = 15;
let board = Array.from({ length: size }, () => Array(size).fill(null));
function createBoard() {
    const table = document.getElementById('chessboard');
    for (let i = 0; i < size; i++) {
        const row = document.createElement('tr');
        for (let j = 0; j < size; j++) {
            const cell = document.createElement('td');
            cell.dataset.row = i;
            cell.dataset.col = j;
            cell.addEventListener('click', handleCellClick);
            row.appendChild(cell);
        }
        table.appendChild(row);
    }
}
createBoard();

二、实现棋子落子功能

我们需要一个变量来跟踪当前是黑棋还是白棋，并在用户点击单元格时进行操作。

let currentPlayer = 'black';
function handleCellClick(event) {
    const row = event.target.dataset.row;
    const col = event.target.dataset.col;
    if (!board[row][col]) {
        board[row][col] = currentPlayer;
        event.target.textContent = currentPlayer === 'black' ? '●' : '○';
        if (checkWin(row, col)) {
            alert(`${currentPlayer} wins!`);
            resetGame();
        } else {
            currentPlayer = currentPlayer === 'black' ? 'white' : 'black';
        }
    }
}

三、判定胜负

我们需要编写一个函数来检查是否有五子连线。

function checkWin(row, col) {
    const directions = [
        [1, 0], [0, 1], [1, 1], [1, -1]
    ];
    const player = board[row][col];
    for (let [dx, dy] of directions) {
        let count = 1;
        for (let i = 1; i < 5; i++) {
            const x = +row + dx * i;
            const y = +col + dy * i;
            if (x >= 0 && x < size && y >= 0 && y < size && board[x][y] === player) {
                count++;
            } else {
                break;
            }
        }
        for (let i = 1; i < 5; i++) {
            const x = +row - dx * i;
            const y = +col - dy * i;
            if (x >= 0 && x < size && y >= 0 && y < size && board[x][y] === player) {
                count++;
            } else {
                break;
            }
        }
        if (count >= 5) {
            return true;
        }
    }
    return false;
}

四、优化游戏体验

为了优化游戏体验，我们可以增加一些功能，比如重置游戏、悔棋、保存和加载游戏状态等。

重置游戏

function resetGame() {
    board = Array.from({ length: size }, () => Array(size).fill(null));
    const cells = document.querySelectorAll('td');
    cells.forEach(cell => cell.textContent = '');
    currentPlayer = 'black';
}

悔棋功能

我们可以用一个栈来记录每一步的操作，方便悔棋。

let moveHistory = [];
function handleCellClick(event) {
    const row = event.target.dataset.row;
    const col = event.target.dataset.col;
    if (!board[row][col]) {
        board[row][col] = currentPlayer;
        event.target.textContent = currentPlayer === 'black' ? '●' : '○';
        moveHistory.push({ row, col, player: currentPlayer });
        if (checkWin(row, col)) {
            alert(`${currentPlayer} wins!`);
            resetGame();
        } else {
            currentPlayer = currentPlayer === 'black' ? 'white' : 'black';
        }
    }
}
function undoMove() {
    if (moveHistory.length > 0) {
        const lastMove = moveHistory.pop();
        board[lastMove.row][lastMove.col] = null;
        const cell = document.querySelector(`td[data-row="${lastMove.row}"][data-col="${lastMove.col}"]`);
        cell.textContent = '';
        currentPlayer = lastMove.player;
    }
}

保存和加载游戏状态

我们可以使用浏览器的本地存储功能来保存和加载游戏状态。

function saveGame() {
    localStorage.setItem('gomokuBoard', JSON.stringify(board));
    localStorage.setItem('gomokuCurrentPlayer', currentPlayer);
    localStorage.setItem('gomokuMoveHistory', JSON.stringify(moveHistory));
}
function loadGame() {
    const savedBoard = localStorage.getItem('gomokuBoard');
    const savedPlayer = localStorage.getItem('gomokuCurrentPlayer');
    const savedMoveHistory = localStorage.getItem('gomokuMoveHistory');
    if (savedBoard && savedPlayer && savedMoveHistory) {
        board = JSON.parse(savedBoard);
        currentPlayer = savedPlayer;
        moveHistory = JSON.parse(savedMoveHistory);
        const cells = document.querySelectorAll('td');
        cells.forEach(cell => {
            const row = cell.dataset.row;
            const col = cell.dataset.col;
            if (board[row][col]) {
                cell.textContent = board[row][col] === 'black' ? '●' : '○';
            } else {
                cell.textContent = '';
            }
        });
    }
}

五、项目团队管理系统推荐

在团队开发过程中，使用项目管理系统能够极大地提升效率和沟通效果。推荐使用研发项目管理系统PingCode，它专注于研发项目的管理，具有强大的需求管理、迭代管理和缺陷跟踪功能。另外，通用项目协作软件Worktile也是一个不错的选择，它提供了任务管理、时间管理、文档协作等功能，适用于各种类型的项目管理需求。

通过上述步骤，我们已经实现了一个基本的五子棋游戏。这个游戏包括棋盘的创建、棋子的落子功能、胜负判定以及一些优化游戏体验的功能。希望这些内容对你有所帮助，祝你开发愉快！