HTML/CSS/JavaScript实现的简易双人五子棋小游戏

原创于 2025-01-29 12:46:02 发布 · 364 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #javascript

学习一下HTML/CSS/JS 专栏收录该内容

1 篇文章

订阅专栏

我做了一个15x15的棋盘，每个格子对应一个点击事件，放置黑白棋子。游戏的逻辑部分需要记录当前下棋的玩家，切换回合，检查胜利条件。胜利检查是重点，每次落子后，需要检查横向、纵向、斜向是否有连续五个同色棋子。还需要注意一下细节，不能重复放置棋子，游戏结束后阻止继续下棋。

使用方法：保存为.html文件——用浏览器打开即可——游玩黑棋先手，轮流点击棋盘落子——当某一方形成五子连线时自动判定胜负——点击"重新开始"按钮重置游戏

完整代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>五子棋游戏</title>
    <style>
        #board {
            border: 2px solid #333;
            background: #E8C87E;
            margin: 20px auto;
            display: block;
        }
        .controls {
            text-align: center;
            margin: 20px;
        }
        button {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            background: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
        }
        #status {
            text-align: center;
            font-size: 24px;
            color: #333;
            font-family: Arial, sans-serif;
        }
    </style>
</head>
<body>
    <div id="status">黑棋回合</div>
    <div class="controls">
        <button onclick="resetGame()">重新开始</button>
    </div>
    <canvas id="board" width="450" height="450"></canvas>

    <script>
        const canvas = document.getElementById('board');
        const ctx = canvas.getContext('2d');
        const size = 15; // 15x15棋盘
        const cellSize = canvas.width / size;
        let board = Array(size).fill().map(() => Array(size).fill(0)); // 0=空 1=黑 2=白
        let currentPlayer = 1;
        let gameOver = false;

        // 初始化棋盘
        function drawBoard() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            // 画网格
            ctx.strokeStyle = '#333';
            for (let i = 0; i < size; i++) {
                ctx.beginPath();
                ctx.moveTo(i * cellSize + cellSize/2, cellSize/2);
                ctx.lineTo(i * cellSize + cellSize/2, canvas.height - cellSize/2);
                ctx.stroke();
                
                ctx.beginPath();
                ctx.moveTo(cellSize/2, i * cellSize + cellSize/2);
                ctx.lineTo(canvas.width - cellSize/2, i * cellSize + cellSize/2);
                ctx.stroke();
            }

            // 画棋子
            for (let i = 0; i < size; i++) {
                for (let j = 0; j < size; j++) {
                    if (board[i][j] === 1) {
                        drawStone(i, j, 'black');
                    } else if (board[i][j] === 2) {
                        drawStone(i, j, 'white');
                    }
                }
            }
        }

        function drawStone(x, y, color) {
            ctx.beginPath();
            ctx.arc(x * cellSize + cellSize/2, y * cellSize + cellSize/2, cellSize/2 - 2, 0, Math.PI * 2);
            ctx.fillStyle = color;
            ctx.fill();
            ctx.strokeStyle = '#333';
            ctx.stroke();
        }

        function checkWin(x, y) {
            const directions = [
                [ [1,0], [-1,0] ], // 水平
                [ [0,1], [0,-1] ], // 垂直
                [ [1,1], [-1,-1] ], // 主对角线
                [ [1,-1], [-1,1] ] // 副对角线
            ];

            for (let dir of directions) {
                let count = 1;
                for (let d of dir) {
                    let step = 1;
                    while (true) {
                        const nx = x + d[0] * step;
                        const ny = y + d[1] * step;
                        if (nx < 0 || nx >= size || ny < 0 || ny >= size) break;
                        if (board[nx][ny] !== currentPlayer) break;
                        count++;
                        step++;
                    }
                }
                if (count >= 5) return true;
            }
            return false;
        }

        canvas.addEventListener('click', (e) => {
            if (gameOver) return;
            
            const rect = canvas.getBoundingClientRect();
            const x = Math.floor((e.clientX - rect.left) / cellSize);
            const y = Math.floor((e.clientY - rect.top) / cellSize);
            
            if (x >= 0 && x < size && y >= 0 && y < size && board[x][y] === 0) {
                board[x][y] = currentPlayer;
                drawBoard();
                
                if (checkWin(x, y)) {
                    document.getElementById('status').textContent = 
                        `${currentPlayer === 1 ? '黑棋' : '白棋'}获胜！`;
                    gameOver = true;
                } else {
                    currentPlayer = currentPlayer === 1 ? 2 : 1;
                    document.getElementById('status').textContent = 
                        `${currentPlayer === 1 ? '黑棋' : '白棋'}回合`;
                }
            }
        });

        function resetGame() {
            board = Array(size).fill().map(() => Array(size).fill(0));
            currentPlayer = 1;
            gameOver = false;
            document.getElementById('status').textContent = '黑棋回合';
            drawBoard();
        }

        // 初始绘制
        drawBoard();
    </script>
</body>
</html>