正文

HTML5 Canvas轻松上手：五子棋项目实战全攻略

/0 浏览量
0825

引言

HTML5 Canvas 是一个强大的绘图工具，它允许我们在网页上绘制图形和图像。五子棋是一个经典的游戏，非常适合作为学习 Canvas 的项目。本文将带您一步步完成一个简单的五子棋游戏，让您轻松上手 HTML5 Canvas。

环境准备

在开始之前，请确保您的计算机上已安装以下环境：

  • 浏览器：推荐使用 Chrome 或 Firefox
  • 编辑器：推荐使用 Visual Studio Code 或 Sublime Text

项目结构

项目的基本结构如下：

五子棋项目
│
├── index.html
├── style.css
└── script.js

步骤一：HTML 结构

在 index.html 文件中，我们首先需要创建一个用于绘图的 Canvas 元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五子棋</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <script src="script.js"></script>
</body>
</html>

步骤二：CSS 样式

在 style.css 文件中，我们为 Canvas 设置一些基本的样式。

#gameCanvas {
    border: 1px solid black;
    display: block;
    margin: auto;
}

步骤三：JavaScript 编程

在 script.js 文件中，我们将编写五子棋游戏的逻辑。

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

const boardSize = 15; // 棋盘大小
const cellSize = canvas.width / boardSize; // 单个棋子的大小

// 初始化棋盘
function initBoard() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (let i = 0; i < boardSize; i++) {
        for (let j = 0; j < boardSize; j++) {
            ctx.strokeRect(i * cellSize, j * cellSize, cellSize, cellSize);
        }
    }
}

// 绘制棋子
function drawChessPiece(x, y, color) {
    ctx.beginPath();
    ctx.arc(x * cellSize + cellSize / 2, y * cellSize + cellSize / 2, cellSize / 2, 0, Math.PI * 2, false);
    ctx.fillStyle = color;
    ctx.fill();
    ctx.closePath();
}

// 检查是否有胜利条件
function checkWin(x, y, color) {
    // ... (此处省略胜利条件判断代码)
}

// 监听鼠标点击事件
canvas.addEventListener('click', function(event) {
    const x = Math.floor(event.offsetX / cellSize);
    const y = Math.floor(event.offsetY / cellSize);
    drawChessPiece(x, y, 'black'); // 假设当前玩家是黑子
    // ... (此处省略胜利条件判断和轮换玩家代码)
});

// 初始化游戏
initBoard();

步骤四：胜利条件判断

在 checkWin 函数中，我们需要判断是否有胜利条件。以下是判断水平、垂直、斜线胜利条件的示例代码：

function checkWin(x, y, color) {
    const directions = [
        { dx: 1, dy: 0 }, // 水平
        { dx: 0, dy: 1 }, // 垂直
        { dx: 1, dy: 1 }, // 斜线
        { dx: -1, dy: 1 }, // 斜线
        // ... (此处省略其他方向)
    ];
    for (const direction of directions) {
        let count = 1;
        let dx = direction.dx;
        let dy = direction.dy;
        // 检查当前位置
        if (ctx.getImageData(x * cellSize + dx * cellSize / 2, y * cellSize + dy * cellSize / 2, 1, 1).data[0] === color) {
            count++;
            dx += direction.dx;
            dy += direction.dy;
        }
        // 检查其他位置
        while (ctx.getImageData(x * cellSize + dx * cellSize / 2, y * cellSize + dy * cellSize / 2, 1, 1).data[0] === color) {
            count++;
            dx += direction.dx;
            dy += direction.dy;
        }
        if (count >= 5) {
            return true;
        }
    }
    return false;
}

步骤五：轮换玩家

在鼠标点击事件监听器中，我们需要判断当前玩家的颜色，并在绘制棋子后轮换玩家。

canvas.addEventListener('click', function(event) {
    const x = Math.floor(event.offsetX / cellSize);
    const y = Math.floor(event.offsetY / cellSize);
    let currentPlayerColor = 'black'; // 假设当前玩家是黑子
    drawChessPiece(x, y, currentPlayerColor);
    if (checkWin(x, y, currentPlayerColor)) {
        alert(`${currentPlayerColor} 胜利了！`);
        return;
    }
    currentPlayerColor = currentPlayerColor === 'black' ? 'white' : 'black';
    // ... (此处省略轮换玩家后继续游戏的代码)
});

总结

通过以上步骤，我们完成了一个简单的五子棋游戏。HTML5 Canvas 是一个非常强大的绘图工具，通过学习五子棋项目，您可以更好地掌握 Canvas 的使用方法。在以后的学习中，您可以尝试添加更多功能，例如悔棋、计时器等，使游戏更加丰富。祝您学习愉快！

-- 展开阅读全文 --