js实现简易消消乐游戏

努力的嗷
已于 2024-05-09 10:16:36 修改
阅读量84
点赞数 2
分类专栏：前端开发文章标签： javascript 游戏前端
于 2024-05-06 17:55:18 首次发布
本文链接：https://blog.csdn.net/hys_1/article/details/138503045
版权
前端开发专栏收录该内容
8 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简易消消乐游戏</title>
    <style>
        :root {
            --moveSize1: +50px;
            --moveSize2: -50px;
        }
        .grid {
            display: grid;
            grid-template-columns: repeat(8, 50px);
            grid-template-rows: repeat(8, 50px);
            gap: 2px;
        }

        .block {
            width: 50px;
            height: 50px;
            border-radius: 25px;
            cursor: pointer;
        }

        .selected {
            outline: 2px solid white;
        }

        /* 颜色点击动画 */
        @keyframes colorClickAnimation {
            0% {
                transform: translateX(0);
            }

            50% {
                transform: translateX(-10px);
            }

            100% {
                transform: translateX(0);
            }
        }

        /* 交换动画 */
        @keyframes swapAnimation {
            0% {
                transform: translateX(0);
            }

            50% {
                transform: translateX(-50%);
            }

            100% {
                transform: translateX(0);
            }
        }

        /* 向上动画 */
        @keyframes upAnimation {
            0% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(var(--moveSize1));
            }

            100% {
                transform: translateY(0);
            }
        }

        /* 向下动画 */
        @keyframes downAnimation {
            0% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(var(--moveSize2));
            }

            100% {
                transform: translateY(0);
            }
        }

        /* 向左 */
        @keyframes leftAnimation {
            0% {
                transform: translateX(0);
            }

            50% {
                transform: translateX(var(--moveSize2));
            }

            100% {
                transform: translateX(0);
            }
        }

        /* 向右 */
        @keyframes rightAnimation {
            0% {
                transform: translateX(0);
            }

            50% {
                transform: translateX(var(--moveSize1));
            }

            100% {
                transform: translateX(0);
            }
        }
    </style>
</head>

<body>
    <div class="grid"></div>

    <script>
        // 定义游戏参数
        const numRows = 8; // 行数
        const numCols = 8; // 列数
        const numColors = 5; // 颜色种类数

        const gridEl = document.querySelector('.grid');
        let grid = [];

        let selectedBlock = null;

        // 创建方格矩阵
        for (let i = 0; i < numRows; i++) {
            grid[i] = [];
            for (let j = 0; j < numCols; j++) {
                grid[i][j] = Math.floor(Math.random() * numColors); // 随机生成方块的颜色

                const blockEl = document.createElement('div');
                blockEl.className = 'block';
                blockEl.style.backgroundColor = getColor(grid[i][j]);

                blockEl.addEventListener('click', () => {
                    handleBlockClick(i, j);
                });

                gridEl.appendChild(blockEl);
            }
        }

        // 检查是否有可以消除的方块
        function checkMatches() {
            let matches = [];

            // 检查横向方块
            for (let i = 0; i < numRows; i++) {
                for (let j = 0; j < numCols - 2; j++) {
                    if (
                        grid[i][j] === grid[i][j + 1] &&
                        grid[i][j] === grid[i][j + 2]
                    ) {
                        matches.push({ row: i, col: j });
                        matches.push({ row: i, col: j + 1 });
                        matches.push({ row: i, col: j + 2 });
                    }
                }
            }

            // 检查纵向方块
            for (let j = 0; j < numCols; j++) {
                for (let i = 0; i < numRows - 2; i++) {
                    if (
                        grid[i][j] === grid[i + 1][j] &&
                        grid[i][j] === grid[i + 2][j]
                    ) {
                        matches.push({ row: i, col: j });
                        matches.push({ row: i + 1, col: j });
                        matches.push({ row: i + 2, col: j });
                    }
                }
            }

            return matches;
        }

        // 处理方块点击事件
        function handleBlockClick(row, col) {
            if (!selectedBlock) {
                selectedBlock = { row, col };
                const blockEl = getBlockElement(row, col);
                blockEl.classList.add('selected');
            } else {
                const { row: prevRow, col: prevCol } = selectedBlock;

                // 交换两个方块的位置
                swapBlocks(row, col, prevRow, prevCol);

                // 检查是否满足消除条件
                const matches = checkMatches();
                if (matches.length > 0) {
                    setTimeout(() => {
                        removeMatches(matches);
                        dropBlocks();
                        refillGrid();
                        updateGrid();
                    }, 1000);
                } else {
                    // 如果不满足消除条件，则撤销交换，恢复原来的位置
                    setTimeout(() => {
                        swapBlocks(row, col, prevRow, prevCol);
                        updateGrid();
                    }, 1000);
                }

                // 取消选择状态
                const blockEl = getBlockElement(selectedBlock.row, selectedBlock.col);
                blockEl.classList.remove('selected');
                selectedBlock = null;
            }
        }

        // 获取指定位置的方块元素
        function getBlockElement(row, col) {
            const index = row * numCols + col;
            return gridEl.children[index];
        }

        // 交换两个方块的位置
        function swapBlocks(row1, col1, row2, col2) {
            const temp = grid[row1][col1];
            grid[row1][col1] = grid[row2][col2];
            grid[row2][col2] = temp;
            // 判断动画执行方向
            // console.log(row1, col1, row2, col2);
            let animations = moveBlocks( row1, col1, row2, col2)
            // console.log(animations);
            // return false
            // 添加交换动画
            const blockEl1 = getBlockElement(row1, col1);
            const blockEl2 = getBlockElement(row2, col2);

            blockEl1.style.animation = animations.block1;
            blockEl2.style.animation = animations.black2;

            setTimeout(() => {
                blockEl1.style.animation = '';
                blockEl2.style.animation = '';

                // 更新方块颜色
                blockEl1.style.backgroundColor = getColor(grid[row1][col1]);
                blockEl2.style.backgroundColor = getColor(grid[row2][col2]);
            }, 1000);
        }

        // 更新方格矩阵
        function updateGrid() {
            const blockEls = document.querySelectorAll('.block');
            for (let i = 0; i < numRows; i++) {
                for (let j = 0; j < numCols; j++) {
                    const index = i * numCols + j;
                    if (grid[i][j] === -1) {
                        blockEls[index].style.display = 'none'; // 隐藏已被消除的方块
                    } else {
                        blockEls[index].style.backgroundColor = getColor(grid[i][j]);
                    }
                }
            }
        }

        // 获取方块颜色对应的CSS样式
        function getColor(colorIndex) {
            switch (colorIndex) {
                case 0:
                    return 'red';
                case 1:
                    return 'blue';
                case 2:
                    return 'green';
                case 3:
                    return 'yellow';
                case 4:
                    return 'purple';
                default:
                    return 'black';
            }
        }

        // 消除方块
        function removeMatches(matches) {
            for (let match of matches) {
                grid[match.row][match.col] = -1; // 将匹配到的方块标记为-1，表示已被消除
            }
        }

        // 下落方块
        function dropBlocks() {
            for (let j = 0; j < numCols; j++) {
                let emptyCells = 0;

                for (let i = numRows - 1; i >= 0; i--) {
                    if (grid[i][j] === -1) {
                        emptyCells++;
                    } else if (emptyCells > 0) {
                        grid[i + emptyCells][j] = grid[i][j];
                        grid[i][j] = -1;
                    }
                }
            }
        }

        // 补充新方块
        function refillGrid() {
            for (let j = 0; j < numCols; j++) {
                for (let i = numRows - 1; i >= 0; i--) {
                    if (grid[i][j] === -1) {
                        grid[i][j] = Math.floor(Math.random() * numColors);
                    }
                }
            }
        }

        // 执行颜色点击动画
        function animateColorClick(row1, col1, row2, col2) {
            const blockEl1 = getBlockElement(row1, col1);
            const blockEl2 = getBlockElement(row2, col2);

            blockEl1.style.animation = 'colorClickAnimation 0.5s';
            blockEl2.style.animation = 'colorClickAnimation 0.5s';

            setTimeout(() => {
                blockEl1.style.animation = '';
                blockEl2.style.animation = '';
            }, 500);
        }

        // 运行游戏循环
        setInterval(gameLoop, 1000);

        // 主循环
        function gameLoop() {
            const matches = checkMatches();

            if (matches.length > 0) {
                removeMatches(matches);
                dropBlocks();
                refillGrid();
                updateGrid();
            }
        }

        //判断方块移动方向,   后一个，      前一个
        function moveBlocks(row1, col1, row2, col2) {
            let animations = {}
            let block1 = ""
            let black2 = ""
            //同一行，方块1在方块2左边
            if (row1 === row2 && col1 < col2) {
                //方块1向右移动
                block1 = "rightAnimation 0.5s"
                // 方块2向左移动
                black2 = "leftAnimation 0.5s"
            }
            //同一行，方块1在方块2右边
            if (row1 === row2 && col1 > col2) {
                //方块1向左移动
                block1 = "leftAnimation 0.5s"
                // 方块2向右移动
                black2 = "rightAnimation 0.5s"
            }
            //同一列，方块1在方块2下边
            if (row1 > row2 && col1 === col2) {
                //方块1向下移动
                block1 = "downAnimation 0.5s"
                // 方块2向上移动
                black2 = "upAnimation 0.5s"
            }
            //同一列，方块1在方块2上边
            if (row1 < row2 && col1 === col2) {
                //方块1向上移动
                block1 = "upAnimation 0.5s"
                // 方块2向下移动
                black2 = "downAnimation 0.5s"
            }
            animations = {block1, black2}
            return animations
        }
    </script>
</body>

</html>