js消灭星星怎么让方块掉落

在JavaScript中制作消灭星星游戏并让方块掉落的核心方法包括：消除选中的方块、更新剩余方块的位置、重新绘制游戏场景。以下将详细描述如何实现这些步骤。

一、创建游戏画布和初始化方块

在开发游戏时，首先需要创建一个游戏画布，并初始化方块。我们可以使用HTML5的canvas元素来绘制游戏场景。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>消灭星星游戏</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="600"></canvas>
    <script src="game.js"></script>
</body>
</html>

在game.js文件中，首先设置画布和方块数组：

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const rows = 10;
const cols = 8;
const blockSize = 40;
let blocks = [];
// 初始化方块
function initBlocks() {
    for (let row = 0; row < rows; row++) {
        blocks[row] = [];
        for (let col = 0; col < cols; col++) {
            blocks[row][col] = Math.floor(Math.random() * 5); // 随机生成不同颜色的方块
        }
    }
}
// 绘制方块
function drawBlocks() {
    for (let row = 0; row < rows; row++) {
        for (let col = 0; col < cols; col++) {
            if (blocks[row][col] !== null) {
                ctx.fillStyle = getColor(blocks[row][col]);
                ctx.fillRect(col * blockSize, row * blockSize, blockSize, blockSize);
                ctx.strokeRect(col * blockSize, row * blockSize, blockSize, blockSize);
            }
        }
    }
}
function getColor(num) {
    const colors = ['red', 'green', 'blue', 'yellow', 'purple'];
    return colors[num];
}
initBlocks();
drawBlocks();

二、消除选中的方块

接下来，我们需要实现点击方块消除的功能。可以通过监听鼠标点击事件来确定用户点击的方块，并使用深度优先搜索（DFS）算法来找出相邻的同色方块。

canvas.addEventListener('click', function(event) {
    const x = event.offsetX;
    const y = event.offsetY;
    const col = Math.floor(x / blockSize);
    const row = Math.floor(y / blockSize);
    const targetColor = blocks[row][col];
    if (targetColor !== null) {
        const toBeCleared = [];
        findConnectedBlocks(row, col, targetColor, toBeCleared);
        if (toBeCleared.length > 1) {
            clearBlocks(toBeCleared);
            dropBlocks();
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawBlocks();
        }
    }
});
function findConnectedBlocks(row, col, color, toBeCleared) {
    if (row < 0 || row >= rows || col < 0 || col >= cols || blocks[row][col] !== color) {
        return;
    }
    blocks[row][col] = null;
    toBeCleared.push({ row, col });
    findConnectedBlocks(row + 1, col, color, toBeCleared);
    findConnectedBlocks(row - 1, col, color, toBeCleared);
    findConnectedBlocks(row, col + 1, color, toBeCleared);
    findConnectedBlocks(row, col - 1, color, toBeCleared);
}
function clearBlocks(toBeCleared) {
    for (const block of toBeCleared) {
        blocks[block.row][block.col] = null;
    }
}

三、更新剩余方块的位置

消除方块后，我们需要让上面的方块掉落填补空缺的位置。这一步骤可以通过遍历每一列，从下到上检查每个位置的方块是否为空，如果为空，则将上面的方块移动到该位置。

function dropBlocks() {
    for (let col = 0; col < cols; col++) {
        let emptyRow = rows - 1;
        for (let row = rows - 1; row >= 0; row--) {
            if (blocks[row][col] !== null) {
                if (emptyRow !== row) {
                    blocks[emptyRow][col] = blocks[row][col];
                    blocks[row][col] = null;
                }
                emptyRow--;
            }
        }
    }
}

四、重新绘制游戏场景

在清除和掉落方块之后，我们需要重新绘制游戏场景，以便显示最新的方块布局。

function updateGame() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawBlocks();
}

五、整合与优化

将上述功能整合到一起，并优化一些细节，使游戏更加流畅和用户友好。

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const rows = 10;
const cols = 8;
const blockSize = 40;
let blocks = [];
function initBlocks() {
    for (let row = 0; row < rows; row++) {
        blocks[row] = [];
        for (let col = 0; col < cols; col++) {
            blocks[row][col] = Math.floor(Math.random() * 5);
        }
    }
}
function drawBlocks() {
    for (let row = 0; row < rows; row++) {
        for (let col = 0; col < cols; col++) {
            if (blocks[row][col] !== null) {
                ctx.fillStyle = getColor(blocks[row][col]);
                ctx.fillRect(col * blockSize, row * blockSize, blockSize, blockSize);
                ctx.strokeRect(col * blockSize, row * blockSize, blockSize, blockSize);
            }
        }
    }
}
function getColor(num) {
    const colors = ['red', 'green', 'blue', 'yellow', 'purple'];
    return colors[num];
}
canvas.addEventListener('click', function(event) {
    const x = event.offsetX;
    const y = event.offsetY;
    const col = Math.floor(x / blockSize);
    const row = Math.floor(y / blockSize);
    const targetColor = blocks[row][col];
    if (targetColor !== null) {
        const toBeCleared = [];
        findConnectedBlocks(row, col, targetColor, toBeCleared);
        if (toBeCleared.length > 1) {
            clearBlocks(toBeCleared);
            dropBlocks();
            updateGame();
        }
    }
});
function findConnectedBlocks(row, col, color, toBeCleared) {
    if (row < 0 || row >= rows || col < 0 || col >= cols || blocks[row][col] !== color) {
        return;
    }
    blocks[row][col] = null;
    toBeCleared.push({ row, col });
    findConnectedBlocks(row + 1, col, color, toBeCleared);
    findConnectedBlocks(row - 1, col, color, toBeCleared);
    findConnectedBlocks(row, col + 1, color, toBeCleared);
    findConnectedBlocks(row, col - 1, color, toBeCleared);
}
function clearBlocks(toBeCleared) {
    for (const block of toBeCleared) {
        blocks[block.row][block.col] = null;
    }
}
function dropBlocks() {
    for (let col = 0; col < cols; col++) {
        let emptyRow = rows - 1;
        for (let row = rows - 1; row >= 0; row--) {
            if (blocks[row][col] !== null) {
                if (emptyRow !== row) {
                    blocks[emptyRow][col] = blocks[row][col];
                    blocks[row][col] = null;
                }
                emptyRow--;
            }
        }
    }
}
function updateGame() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawBlocks();
}
initBlocks();
updateGame();

总结

通过上述步骤，我们实现了一个简单的消灭星星游戏，并让方块能够在消除后正确掉落填补空缺。核心步骤包括：初始化方块、消除选中方块、更新剩余方块位置、重新绘制游戏场景。通过不断优化和完善，可以进一步提升游戏的流畅性和用户体验。