程序员必看！HTML+JavaScript+CSS 实现五子棋小游戏，代码全解析

最新推荐文章于 2025-04-02 20:20:41 发布

魏大帅。

最新推荐文章于 2025-04-02 20:20:41 发布

阅读量999

点赞数 10

文章标签： javascript html css 前端游戏

本文链接：https://blog.youkuaiyun.com/weimengen/article/details/145473208

版权

在这篇文章中，我们将一起使用 HTML、JavaScript 和 CSS 来创建一个简单的五子棋小游戏。通过这个项目，你将学习到如何结合这三种技术，构建一个有趣的互动游戏。

一、HTML 结构搭建

首先，我们需要创建一个 HTML 文件，来定义游戏的基本结构。我们需要一个棋盘和用于显示游戏状态的区域。

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>五子棋小游戏</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<div id="game-board"></div>

<div id="status">轮到玩家1落子</div>

<script src="script.js"></script>

</body>

</html>

在这段代码中，我们创建了一个包含棋盘（game-board）和游戏状态显示区域（status）的 HTML 页面，并引入了外部的 CSS 和 JavaScript 文件。

二、CSS 样式设计

接下来，我们使用 CSS 来设计棋盘和棋子的样式。

        #game-board {
            width: 400px;
            height: 400px;
            border: 1px solid #000;
            display: grid;
            grid-template-columns: repeat(15, 1fr);
            grid-template-rows: repeat(15, 1fr);
        }

        #game-board div {
            border: 1px solid #ccc;
            box-sizing: border-box;
        }

        .black {
            background-color: black;
            border-radius: 50%;
        }

        .white {
            background-color: white;
            border-radius: 50%;
        }

        #status {
            margin-top: 10px;
            font-size: 18px;
        }

上述 CSS 代码定义了棋盘的大小、布局以及棋子的样式，同时设置了游戏状态显示区域的样式。

三、JavaScript 交互逻辑实现

最后，我们使用 JavaScript 来实现五子棋的核心逻辑，包括落子、判断胜负等。

 const gameBoard = document.getElementById('game-board');

        const status = document.getElementById('status');

        let currentPlayer = 'black';

        let board = Array.from({ length: 15 }, () => Array(15).fill(null));

        gameBoard.addEventListener('click', function (e) {

            const target = e.target;

            if (target.tagName === 'DIV' && !target.classList.contains('black') && !target.classList.contains('white')) {

                target.classList.add(currentPlayer);

                const row = parseInt(target.dataset.row);

                const col = parseInt(target.dataset.col);

                board[row][col] = currentPlayer;

                if (checkWin(currentPlayer)) {

                    status.textContent = `玩家 ${currentPlayer === 'black' ? '1' : '2'} 获胜！`;

                    gameBoard.style.pointerEvents = 'none';

                } else if (isDraw()) {

                    status.textContent = '平局！';

                    gameBoard.style.pointerEvents = 'none';

                } else {

                    currentPlayer = currentPlayer === 'black' ? 'white' : 'black';

                    status.textContent = `轮到玩家 ${currentPlayer === 'black' ? '1' : '2'} 落子`;

                }

            }

        });

        function checkWin(player) {

            // 检查行

            for (let i = 0; i < 15; i++) {

                for (let j = 0; j <= 11; j++) {

                    if (board[i][j] === player && board[i][j + 1] === player && board[i][j + 2] === player && board[i][j + 3] === player && board[i][j + 4] === player) {

                        return true;

                    }

                }

            }

            // 检查列

            for (let j = 0; j < 15; j++) {

                for (let i = 0; i <= 11; i++) {

                    if (board[i][j] === player && board[i + 1][j] === player && board[i + 2][j] === player && board[i + 3][j] === player && board[i + 4][j] === player) {

                        return true;

                    }

                }

            }

            // 检查正对角线

            for (let i = 0; i <= 11; i++) {

                for (let j = 0; j <= 11; j++) {

                    if (board[i][j] === player && board[i + 1][j + 1] === player && board[i + 2][j + 2] === player && board[i + 3][j + 3] === player && board[i + 4][j + 4] === player) {

                        return true;

                    }

                }

            }

            // 检查反对角线

            for (let i = 0; i <= 11; i++) {

                for (let j = 4; j < 15; j++) {

                    if (board[i][j] === player && board[i + 1][j - 1] === player && board[i + 2][j - 2] === player && board[i + 3][j - 3] === player && board[i + 4][j - 4] === player) {

                        return true;

                    }

                }

            }

            return false;

        }

        function isDraw() {

            for (let i = 0; i < 15; i++) {

                for (let j = 0; j < 15; j++) {

                    if (board[i][j] === null) {

                        return false;

                    }

                }

            }

            return true;

        }

        // 初始化棋盘

        for (let i = 0; i < 15; i++) {

            for (let j = 0; j < 15; j++) {

                const cell = document.createElement('div');

                cell.dataset.row = i;

                cell.dataset.col = j;

                gameBoard.appendChild(cell);

            }

        }

这段 JavaScript 代码实现了玩家落子、判断胜负和平局的逻辑。当玩家点击棋盘的空白区域时，会根据当前玩家的颜色在该位置放置棋子，并检查是否有玩家获胜或平局。

四、完整代码整合

为了方便大家查看和使用，下面将 HTML、CSS 和 JavaScript 的代码整合到一起，这样可以直接复制运行查看效果。

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五子棋小游戏</title>
    <style>
        #game-board {
            width: 400px;
            height: 400px;
            border: 1px solid #000;
            display: grid;
            grid-template-columns: repeat(15, 1fr);
            grid-template-rows: repeat(15, 1fr);
        }

        #game-board div {
            border: 1px solid #ccc;
            box-sizing: border-box;
        }

      .black {
            background-color: black;
            border-radius: 50%;
        }

      .white {
            background-color: white;
            border-radius: 50%;
        }

        #status {
            margin-top: 10px;
            font-size: 18px;
        }
    </style>
</head>

<body>
    <div id="game-board"></div>
    <div id="status">轮到玩家1落子</div>
    <script>
        // 获取HTML中id为game-board的元素，即棋盘
        const gameBoard = document.getElementById('game-board');
        // 获取HTML中id为status的元素，用于显示游戏状态
        const status = document.getElementById('status');
        // 当前玩家，初始为黑色棋子玩家
        let currentPlayer = 'black';
        // 创建一个15x15的二维数组来表示棋盘，初始值都为null
        let board = Array.from({ length: 15 }, () => Array(15).fill(null));

        // 给棋盘添加点击事件监听器
        gameBoard.addEventListener('click', function (e) {
            // 获取点击的目标元素
            const target = e.target;
            // 如果点击的是一个div元素，并且该元素没有黑色或白色棋子的类名
            if (target.tagName === 'DIV' &&!target.classList.contains('black') &&!target.classList.contains('white')) {
                // 给点击的元素添加当前玩家对应的类名（black或white），以显示棋子
                target.classList.add(currentPlayer);
                // 获取点击元素的data - row属性值，并转换为整数，得到行号
                const row = parseInt(target.dataset.row);
                // 获取点击元素的data - col属性值，并转换为整数，得到列号
                const col = parseInt(target.dataset.col);
                // 在棋盘数组中对应的位置记录当前玩家的棋子
                board[row][col] = currentPlayer;

                // 检查当前玩家是否获胜
                if (checkWin(currentPlayer)) {
                    // 如果获胜，更新游戏状态显示，显示获胜玩家
                    status.textContent = `玩家 ${currentPlayer === 'black'? '1' : '2'} 获胜！`;
                    // 禁用棋盘的点击事件，游戏结束
                    gameBoard.style.pointerEvents = 'none';
                }
                // 检查是否平局
                else if (isDraw()) {
                    // 如果平局，更新游戏状态显示
                    status.textContent = '平局！';
                    // 禁用棋盘的点击事件，游戏结束
                    gameBoard.style.pointerEvents = 'none';
                }
                // 如果既没有获胜也没有平局
                else {
                    // 切换当前玩家
                    currentPlayer = currentPlayer === 'black'? 'white' : 'black';
                    // 更新游戏状态显示，提示轮到哪个玩家落子
                    status.textContent = `轮到玩家 ${currentPlayer === 'black'? '1' : '2'} 落子`;
                }
            }
        });

        // 检查某个玩家是否获胜的函数
        function checkWin(player) {
            // 检查行
            for (let i = 0; i < 15; i++) {
                for (let j = 0; j <= 11; j++) {
                    // 遍历每一行，检查是否有连续5个相同颜色的棋子
                    if (board[i][j] === player && board[i][j + 1] === player && board[i][j + 2] === player && board[i][j + 3] === player && board[i][j + 4] === player) {
                        return true;
                    }
                }
            }
            // 检查列
            for (let j = 0; j < 15; j++) {
                for (let i = 0; i <= 11; i++) {
                    // 遍历每一列，检查是否有连续5个相同颜色的棋子
                    if (board[i][j] === player && board[i + 1][j] === player && board[i + 2][j] === player && board[i + 3][j] === player && board[i + 4][j] === player) {
                        return true;
                    }
                }
            }
            // 检查正对角线
            for (let i = 0; i <= 11; i++) {
                for (let j = 0; j <= 11; j++) {
                    // 遍历正对角线，检查是否有连续5个相同颜色的棋子
                    if (board[i][j] === player && board[i + 1][j + 1] === player && board[i + 2][j + 2] === player && board[i + 3][j + 3] === player && board[i + 4][j + 4] === player) {
                        return true;
                    }
                }
            }
            // 检查反对角线
            for (let i = 0; i <= 11; i++) {
                for (let j = 4; j < 15; j++) {
                    // 遍历反对角线，检查是否有连续5个相同颜色的棋子
                    if (board[i][j] === player && board[i + 1][j - 1] === player && board[i + 2][j - 2] === player && board[i + 3][j - 3] === player && board[i + 4][j - 4] === player) {
                        return true;
                    }
                }
            }
            // 如果没有找到连续5个相同颜色的棋子，返回false
            return false;
        }

        // 检查是否平局的函数
        function isDraw() {
            for (let i = 0; i < 15; i++) {
                for (let j = 0; j < 15; j++) {
                    // 遍历整个棋盘
                    if (board[i][j] === null) {
                        // 如果有任何一个位置为空，说明还没有平局
                        return false;
                    }
                }
            }
            // 如果整个棋盘都没有空位置，说明平局
            return true;
        }

        // 初始化棋盘
        for (let i = 0; i < 15; i++) {
            for (let j = 0; j < 15; j++) {
                // 创建一个新的div元素，代表棋盘上的一个小方格
                const cell = document.createElement('div');
                // 给div元素添加data - row属性，值为当前行号
                cell.dataset.row = i;
                // 给div元素添加data - col属性，值为当前列号
                cell.dataset.col = j;
                // 将这个div元素添加到棋盘上
                gameBoard.appendChild(cell);
            }
        }
    </script>
</body>

</html>

通过以上步骤，我们成功地使用 HTML、JavaScript 和 CSS 创建了一个简单的五子棋小游戏。你可以根据自己的需求对游戏进行扩展和优化。如果对代码还有其他疑问，或者想进一步优化功能，欢迎随时交流。