五子棋HTML5源代码-CSDN博客

五子棋（Gomoku）HTML5 源代码解析

引言

五子棋，又称连珠棋，是一种在19×19的棋盘上进行的策略棋类游戏。玩家在棋盘上轮流放置自己的棋子，目的是要在横、竖、或斜的方向上连续放置五个棋子。在本篇文章中，我们将探讨如何用 HTML5 编写一个简单的五子棋游戏。我们将提供代码示例，并通过描述关键功能，帮助读者更好地理解五子棋的游戏逻辑和实现过程。

游戏规则与基本思路

在我们动手实现之前，了解五子棋的基本规则至关重要：

游戏使用 15×15 的棋盘。
两名玩家交替行棋，分别使用黑子和白子。
先在任意方向上成功连接五个棋子的一方获胜。

本示例将重点关注游戏的基本逻辑、棋盘绘制、玩家输入和胜利判断。

棋盘绘制

首先，我们需要创建一个 HTML 页面，包含一个用于绘制棋盘的 canvas 元素。以下是实现棋盘的基本代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五子棋</title>
    <style>
        canvas {
            border: 1px solid black;
            margin: 20px;
        }
    </style>
</head>
<body>
    五子棋游戏
    <canvas id="board" width="600" height="600"></canvas>
    <script src="gomoku.js"></script>
</body>
</html>

在上面的代码中，我们创建了一个 600x600 像素的棋盘，并使用内嵌样式为其添加了边框。

JavaScript 逻辑

在 gomoku.js 文件中，我们将实现棋盘的绘制、玩家的输入处理以及游戏胜利的逻辑。以下是 gomoku.js 的关键代码：

const canvas = document.getElementById('board');
const context = canvas.getContext('2d');

const boardSize = 15; // 棋盘的大小
const gridSize = 40; // 每个格子的大小
let board = Array.from({ length: boardSize }, () => Array(boardSize).fill(null));
let currentPlayer = 'black';

// 绘制棋盘
function drawBoard() {
    context.clearRect(0, 0, canvas.width, canvas.height);
    for (let i = 0; i < boardSize; i++) {
        context.moveTo(i * gridSize + 20, 20);
        context.lineTo(i * gridSize + 20, canvas.height - 20);
        context.moveTo(20, i * gridSize + 20);
        context.lineTo(canvas.width - 20, i * gridSize + 20);
    }
    context.stroke();
}

// 处理玩家点击
canvas.addEventListener('click', (event) => {
    const x = Math.floor((event.offsetX - 20) / gridSize);
    const y = Math.floor((event.offsetY - 20) / gridSize);
    
    if (board[y][x] === null) {
        board[y][x] = currentPlayer;
        drawStone(x, y, currentPlayer);
        if (checkWin(x, y)) {
            alert(`${currentPlayer} wins!`);
            resetGame();
        }
        currentPlayer = currentPlayer === 'black' ? 'white' : 'black';
    }
});

// 绘制棋子
function drawStone(x, y, player) {
    context.beginPath();
    context.arc(x * gridSize + 20, y * gridSize + 20, 15, 0, Math.PI * 2);
    context.fillStyle = player;
    context.fill();
    context.closePath();
}

// 胜利检测
function checkWin(x, y) {
    // 这里可以实现具体的胜利检测逻辑
    return false; // 暂时返回 false
}

// 重置游戏
function resetGame() {
    board = Array.from({ length: boardSize }, () => Array(boardSize).fill(null));
    currentPlayer = 'black';
    drawBoard();
}

// 初始化棋盘
drawBoard();