html5做 涂色游戏,h5 canvas益智类填色画游戏代码

以下是一个简单的 h5 canvas 益智类填色画游戏的代码示例：

HTML 代码：

<canvas id="gameCanvas" width="400" height="400"></canvas>

JavaScript 代码：

var canvas = document.getElementById("gameCanvas");
var context = canvas.getContext("2d");

// 定义游戏区域大小和格子大小
var gridSize = 20;
var gameWidth = canvas.width - gridSize;
var gameHeight = canvas.height - gridSize;

// 定义游戏数据
var gameData = [];
for (var i = 0; i < gameWidth / gridSize; i++) {
    gameData[i] = [];
    for (var j = 0; j < gameHeight / gridSize; j++) {
        gameData[i][j] = "#FFFFFF"; // 初始颜色为白色
    }
}

// 绘制游戏区域
function drawGameArea() {
    context.fillStyle = "#CCCCCC"; // 背景颜色为灰色
    context.fillRect(0, 0, canvas.width, canvas.height);

    for (var i = 0; i < gameWidth / gridSize; i++) {
        for (var j = 0; j < gameHeight / gridSize; j++) {
            context.fillStyle = gameData[i][j];
            context.fillRect(i * gridSize, j * gridSize, gridSize, gridSize);
        }
    }
}

// 获取点击位置对应的格子坐标
function getGridPosition(event) {
    var x = event.pageX - canvas.offsetLeft;
    var y = event.pageY - canvas.offsetTop;

    var gridX = Math.floor(x / gridSize);
    var gridY = Math.floor(y / gridSize);

    return { x: gridX, y: gridY };
}

// 填色
function fillGrid(event) {
    var grid = getGridPosition(event);
    var color = gameData[grid.x][grid.y];

    // 随机生成新颜色
    var newColor = "#" + Math.floor(Math.random() * 16777215).toString(16);

    // 如果颜色相同，不做处理
    if (color === newColor) {
        return;
    }

    // 填充同色区域
    var fillQueue = [{ x: grid.x, y: grid.y }];
    while (fillQueue.length > 0) {
        var currentGrid = fillQueue.shift();
        gameData[currentGrid.x][currentGrid.y] = newColor;

        // 上方格子
        if (currentGrid.y > 0 && gameData[currentGrid.x][currentGrid.y - 1] === color) {
            fillQueue.push({ x: currentGrid.x, y: currentGrid.y - 1 });
        }

        // 下方格子
        if (currentGrid.y < gameHeight / gridSize - 1 && gameData[currentGrid.x][currentGrid.y + 1] === color) {
            fillQueue.push({ x: currentGrid.x, y: currentGrid.y + 1 });
        }

        // 左侧格子
        if (currentGrid.x > 0 && gameData[currentGrid.x - 1][currentGrid.y] === color) {
            fillQueue.push({ x: currentGrid.x - 1, y: currentGrid.y });
        }

        // 右侧格子
        if (currentGrid.x < gameWidth / gridSize - 1 && gameData[currentGrid.x + 1][currentGrid.y] === color) {
            fillQueue.push({ x: currentGrid.x + 1, y: currentGrid.y });
        }
    }

    drawGameArea();
}

// 初始化游戏
function initGame() {
    drawGameArea();
    canvas.addEventListener("click", fillGrid);
}

initGame();

在这段代码中，我们首先定义了游戏区域大小和格子大小。然后，我们定义了游戏数据，即包含每个格子的颜色。初始时，每个格子的颜色都是白色。

接着，我们编写了绘制游戏区域的函数 `drawGameArea`。该函数先绘制背景颜色，然后根据游戏数据绘制每个格子。

我们还编写了一个函数 `getGridPosition`，用于获取点击位置对应的格子坐标。

接下来是填色的核心逻辑。当用户点击某个格子时，我们首先获取该格子的颜色。然后，我们随机生成一个新的颜色，如果新颜色和原来的颜色相同，就不做处理。否则，我们使用广度优先搜索算法，将所有和该格子颜色相同的格子都填充成新颜色。

最后，我们编写了初始化游戏的函数 `initGame`，该函数绑定了点击事件，并调用 `drawGameArea` 函数绘制游戏区域。

这是一个非常简单的 h5 canvas 益智类填色画游戏的代码示例，仅供参考。实际上，填色游戏的实现方法有很多种，您可以根据自己的需求进行修改和扩展。