console 命令行工具 X clear

console

const app = new PIXI.Application({
    width: 800,
    height: 600,
    backgroundColor: 0xAAAAAA
});
document.body.appendChild(app.view); //搭建一个舞台

const gemTextures = [
    PIXI.Texture.from('path_to_red_gem.png'),
    PIXI.Texture.from('path_to_blue_gem.png'),
    // ... 添加其他颜色的宝石纹理
];

const boardWidth = 8;
const boardHeight = 8;
const board = [];
let selectedGem = null;

const gemContainer = new PIXI.Container();
app.stage.addChild(gemContainer);

function initializeBoard() {
    for (let x = 0; x < boardWidth; x++) {
        board[x] = [];
        for (let y = 0; y < boardHeight; y++) {
            const gem = createRandomGem(x, y);
            gem.on('pointerdown', () => onGemClick(x, y));
            gemContainer.addChild(gem);
            board[x][y] = gem;
        }
    }
}

function createRandomGem(x, y) {
    const texture = gemTextures[Math.floor(Math.random() * gemTextures.length)];
    const gem = new PIXI.Sprite(texture);
    gem.x = x * 80;
    gem.y = y * 80;
    gem.interactive = true;
    gem.buttonMode = true;
    return gem;
}

function onGemClick(x, y) {
    const gem = board[x][y];
    if (!gem.selected) {
        if (!selectedGem) {
            gem.selected = true;
            selectedGem = gem;
        } else if (isAdjacent(selectedGem, gem)) {
            swapGems(selectedGem, gem);
            gem.selected = false;
            selectedGem.selected = false;
            selectedGem = null;
            checkMatches();
        } else {
            selectedGem.selected = false;
            selectedGem = gem;
            gem.selected = true;
        }
    } else {
        gem.selected = false;
        selectedGem = null;
    }
}

function isAdjacent(gem1, gem2) {
    const dx = Math.abs(gem1.x - gem2.x);
    const dy = Math.abs(gem1.y - gem2.y);
    return (dx === 80 && dy === 0) || (dy === 80 && dx === 0);
}

function swapGems(gem1, gem2) {
    const x1 = gem1.x / 80;
    const y1 = gem1.y / 80;
    const x2 = gem2.x / 80;
    const y2 = gem2.y / 80;

    const tempGem = board[x1][y1];
    board[x1][y1] = board[x2][y2];
    board[x2][y2] = tempGem;

    gem1.x = x2 * 80;
    gem1.y = y2 * 80;
    gem2.x = x1 * 80;
    gem2.y = y1 * 80;
}

function checkMatches() {
    const matches = findMatches();
    if (matches.length > 0) {
        removeMatches(matches);
    }
}

function findMatches() {
    const matches = [];

    // 检查水平方向的匹配
    // ...

    // 检查垂直方向的匹配
    // ...

    return matches;
}

function removeMatches(matches) {
    for (const match of matches) {
        const gem = board[match.x][match.y];
        gemContainer.removeChild(gem);
        board[match.x][match.y] = null;
    }
    dropGems();
}

function dropGems() {
    // 宝石掉落效果
    // ...
}

function updateScore(matches) {
    // 更新分数
    // ...
}

// ... 更多逻辑和特性 ...

// 初始化游戏
initializeBoard();

// 主循环，用于动画更新
app.ticker.add(delta => {
    // 更新游戏逻辑，例如掉落宝石等
    // 更新分数显示
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Match-3 Game</title>
    <script src="pixi.min.js"></script>
</head>
<body>
    <p>nihao</p>
    <script src="game.js"></script>
</body>
</html>

本项目引用的自定义外部资源

pixi.min.js