正文

揭秘五子棋：JavaScript轻松绘制经典棋盘与棋子

/0 浏览量
0320

引言

五子棋是一种古老的策略棋类游戏，简单易学，趣味性强。在数字化时代，使用JavaScript来绘制五子棋棋盘和棋子，不仅能增加编程的乐趣，还能让我们更好地理解图形绘制和用户交互。本文将详细介绍如何使用JavaScript和HTML5的Canvas API来绘制一个经典五子棋棋盘和棋子。

准备工作

在开始之前，确保你的开发环境中安装了Node.js或任何现代的JavaScript开发环境。此外，还需要一个HTML文件来展示Canvas。

创建棋盘

首先，我们需要创建一个棋盘。棋盘由19×19的网格组成，每个网格的大小需要我们根据Canvas的尺寸来计算。

function createBoard(canvas) {
    const gridSize = 40; // 网格大小
    const boardSize = 19; // 棋盘大小

    for (let i = 0; i < boardSize; i++) {
        for (let j = 0; j < boardSize; j++) {
            drawGrid(canvas, i, j, gridSize);
        }
    }
}

function drawGrid(canvas, row, col, gridSize) {
    const ctx = canvas.getContext('2d');
    ctx.strokeStyle = '#000';
    ctx.lineWidth = 1;
    ctx.beginPath();
    ctx.moveTo(col * gridSize, row * gridSize);
    ctx.lineTo(col * gridSize + gridSize, row * gridSize);
    ctx.moveTo(col * gridSize, row * gridSize);
    ctx.lineTo(col * gridSize, row * gridSize + gridSize);
    ctx.stroke();
}

绘制棋子

接下来，我们需要绘制棋子。棋子通常分为黑子和白子，我们可以通过不同的颜色来区分。

function drawPiece(canvas, x, y, color) {
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = color;
    ctx.beginPath();
    ctx.arc(x, y, 10, 0, Math.PI * 2);
    ctx.fill();
}

棋子交互

为了让棋子能够在棋盘上移动，我们需要添加交互功能。这包括检测点击位置是否在棋盘上，并在相应位置绘制棋子。

canvas.addEventListener('click', function(event) {
    const rect = canvas.getBoundingClientRect();
    const x = event.clientX - rect.left;
    const y = event.clientY - rect.top;

    // 计算棋盘网格坐标
    const row = Math.floor(y / gridSize);
    const col = Math.floor(x / gridSize);

    // 检查是否在棋盘范围内
    if (row >= 0 && row < boardSize && col >= 0 && col < boardSize) {
        drawPiece(canvas, x, y, '#000'); // 默认绘制黑子
    }
});

完整示例

以下是完整的示例代码，包括HTML和JavaScript。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>五子棋绘制示例</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="chessboard" width="760" height="760"></canvas>
    <script>
        const canvas = document.getElementById('chessboard');
        const ctx = canvas.getContext('2d');
        const gridSize = 40;
        const boardSize = 19;

        function createBoard() {
            for (let i = 0; i < boardSize; i++) {
                for (let j = 0; j < boardSize; j++) {
                    drawGrid(i, j, gridSize);
                }
            }
        }

        function drawGrid(row, col, gridSize) {
            ctx.beginPath();
            ctx.moveTo(col * gridSize, row * gridSize);
            ctx.lineTo(col * gridSize + gridSize, row * gridSize);
            ctx.moveTo(col * gridSize, row * gridSize);
            ctx.lineTo(col * gridSize, row * gridSize + gridSize);
            ctx.stroke();
        }

        function drawPiece(x, y, color) {
            ctx.fillStyle = color;
            ctx.beginPath();
            ctx.arc(x, y, 10, 0, Math.PI * 2);
            ctx.fill();
        }

        createBoard();
        canvas.addEventListener('click', function(event) {
            const rect = canvas.getBoundingClientRect();
            const x = event.clientX - rect.left;
            const y = event.clientY - rect.top;
            const row = Math.floor(y / gridSize);
            const col = Math.floor(x / gridSize);
            if (row >= 0 && row < boardSize && col >= 0 && col < boardSize) {
                drawPiece(x, y, '#000'); // 默认绘制黑子
            }
        });
    </script>
</body>
</html>

总结

通过本文的介绍，我们学习了如何使用JavaScript和Canvas API来绘制一个简单的五子棋棋盘和棋子。这个例子可以作为进一步开发五子棋游戏或类似图形界面的起点。希望这个教程能够帮助你更好地理解JavaScript在图形绘制和用户交互方面的应用。

-- 展开阅读全文 --