正文

五子棋盘，用JS轻松绘制，揭秘编程乐趣！

/0 浏览量
0322

引言

五子棋是一项古老的棋类游戏，其规则简单，但策略多变。在编程的世界里，我们可以通过JavaScript这样的前端技术，轻松地绘制一个五子棋盘，并实现基本的游戏逻辑。本文将带你一步步探索如何用JavaScript绘制五子棋盘，并揭示编程的乐趣。

准备工作

在开始之前，请确保你的环境中已经安装了Node.js和npm（Node.js的包管理器）。此外，你可以使用任何你喜欢的代码编辑器，如Visual Studio Code、Sublime Text等。

第一步：创建HTML结构

首先，我们需要一个HTML文件来承载我们的五子棋盘。创建一个名为index.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>
        #chessboard {
            width: 300px;
            height: 300px;
            border: 1px solid black;
        }
        .cell {
            width: 30px;
            height: 30px;
            border: 1px solid black;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div id="chessboard"></div>
    <script src="script.js"></script>
</body>
</html>

这段代码创建了一个300px x 300px的棋盘，并设置了样式。

第二步：编写JavaScript代码

接下来，我们需要编写JavaScript代码来绘制棋盘，并实现基本的游戏逻辑。创建一个名为script.js的文件，并添加以下代码：

document.addEventListener('DOMContentLoaded', () => {
    const rows = 10;
    const cols = 10;
    const cellSize = 30;
    const board = document.getElementById('chessboard');
    let currentPlayer = 'X';

    for (let i = 0; i < rows; i++) {
        for (let j = 0; j < cols; j++) {
            const cell = document.createElement('div');
            cell.classList.add('cell');
            cell.addEventListener('click', () => placePiece(i, j));
            board.appendChild(cell);
        }
    }

    function placePiece(row, col) {
        if (board.children[row * cols + col].textContent) {
            return;
        }

        board.children[row * cols + col].textContent = currentPlayer;
        checkWin(row, col);
        currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
    }

    function checkWin(row, col) {
        // 检查横向、纵向、斜向是否有连续的五个棋子
        // ...
    }
});

这段代码首先创建了一个10x10的棋盘，并为每个单元格添加了点击事件监听器。当点击一个单元格时，placePiece函数会被调用，该函数会在该单元格中放置当前玩家的棋子，并调用checkWin函数检查是否有玩家获胜。

第三步：实现获胜检查

接下来，我们需要实现checkWin函数，用于检查是否有玩家获胜。以下是checkWin函数的完整实现：

function checkWin(row, col) {
    const player = board.children[row * cols + col].textContent;
    let count;

    // 检查横向
    count = 1;
    for (let i = 1; i < 5; i++) {
        if (board.children[(row + i) * cols + col].textContent === player) {
            count++;
        } else {
            break;
        }
    }
    for (let i = 1; i < 5; i++) {
        if (board.children[(row - i) * cols + col].textContent === player) {
            count++;
        } else {
            break;
        }
    }
    if (count >= 5) {
        alert(`${player} 赢了！`);
        return true;
    }

    // 检查纵向
    // ...

    // 检查斜向
    // ...

    return false;
}

这段代码首先获取当前玩家的棋子，然后分别检查横向、纵向和斜向是否有连续的五个棋子。如果有，则弹出获胜信息并返回true。

总结

通过以上步骤，我们已经成功地使用JavaScript绘制了一个五子棋盘，并实现了基本的游戏逻辑。在这个过程中，我们不仅学习了如何使用JavaScript操作DOM元素，还了解了编程的乐趣。希望这篇文章能激发你对编程的兴趣，继续探索更多有趣的项目！

-- 展开阅读全文 --