JS实现九宫格拼图游戏

如何实现JS九宫格拼图游戏？

1. 前置知识：

2. HTML、CSS、JS基础

3. DOM操作

4. 事件监听

5. 游戏规则：

6. 将原图分成N * N（N >= 3）个拼图块

7. 每个拼图块可以通过与空白块交换位置来移动

8. 目标是将所有的拼图块移动到正确的位置，还原原图形

9. 实现步骤：

3.1 HTML基本结构

• 通过HTML代码搭建游戏基本框架
• 将原图划分成若干个小块，并将它们放置到九宫格中

示例1：

<div class="puzzle">
    <img src="图片地址" alt="原图" class="puzzle-img">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <!-- 将图片分割成四个小块 -->
</div>

3.2 CSS样式设置

• 将图片和小块进行布局设置
• 设置拼图块的背景图，给游戏增加美观度

示例2：

.puzzle {
    position: relative; /* 相对定位，用于定位小块 */
    width: 350px;
    height: 350px;
    margin: 0 auto;
    box-shadow: 0 0 20px 5px rgba(0, 0, 0, .4); /* 制作游戏盒子的阴影效果 */
}

.puzzle .block {
    position: absolute; /* 拼图小块需要绝对定位 */
    border: 1px solid #fff; /* 给每个小块添加白色边框，用于区分 */
    background-size: 350px 350px; /* 背景大小要与游戏盒子大小相同 */
}

/* 第一个小块 */
.puzzle .block:nth-child(1) {
    top: 0;
    left: 0;
    width: 175px;
    height: 175px;
    background: url(图片地址) 0 0 / 350px 350px no-repeat; /* 设置背景图 */
}

/* 第二个小块 */
.puzzle .block:nth-child(2) {
    top: 0;
    right: 0;
    width: 175px;
    height: 175px;
    background: url(图片地址) -175px 0 / 350px 350px no-repeat;
}

/* 第三个小块 */
.puzzle .block:nth-child(3) {
    bottom: 0;
    left: 0;
    width: 175px;
    height: 175px;
    background: url(图片地址) 0 -175px / 350px 350px no-repeat;
}

/* 第四个小块 */
.puzzle .block:nth-child(4) {
    bottom: 0;
    right: 0;
    width: 175px;
    height: 175px;
    background: #fff;
}

3.3 JS实现游戏交互

• 对拼图小块进行交换，实现移动效果
• 对拼图块进行随机打乱

示例3：

(function() {
    // 向左移动小块（通过交换位置）
    function moveLeft(block) {
        // 判断左边是否有空白块
        if (block.previousElementSibling && block.previousElementSibling.className == "block blank") {
            // 交换位置
            block.previousElementSibling.className = "block";
            block.previousElementSibling.style.backgroundImage = block.style.backgroundImage;
            block.style.backgroundImage = "none";
            block.className = "block blank";
        }
    }

    // 向右移动小块
    function moveRight(block) {
        // 判断右边是否有空白块
        if (block.nextElementSibling && block.nextElementSibling.className == "block blank") {
            // 交换位置
            block.nextElementSibling.className = "block";
            block.nextElementSibling.style.backgroundImage = block.style.backgroundImage;
            block.style.backgroundImage = "none";
            block.className = "block blank";
        }
    }

    // 向上移动小块
    function moveUp(block) {
        // 判断上面是否有空白块
        if (block.previousElementSibling && block.previousElementSibling.previousElementSibling && block.previousElementSibling.previousElementSibling.className == "block blank" || block.previousElementSibling == document.querySelector(".block.blank")) {
            // 交换位置
            if (block.previousElementSibling == document.querySelector(".block.blank")) {
                document.querySelector(".block.blank").className = "block";
                document.querySelector(".block.blank").style.backgroundImage = block.style.backgroundImage;
            }
            block.previousElementSibling.className = "block";
            block.previousElementSibling.style.backgroundImage = block.style.backgroundImage;
            block.style.backgroundImage = "none";
            block.className = "block blank";
        }
    }

    // 向下移动小块
    function moveDown(block) {
        // 判断下面是否有空白块
        if (block.nextElementSibling && block.nextElementSibling.nextElementSibling && block.nextElementSibling.nextElementSibling.className == "block blank" || block.nextElementSibling == document.querySelector(".block.blank")) {
            // 交换位置
            if (block.nextElementSibling == document.querySelector(".block.blank")) {
                document.querySelector(".block.blank").className = "block";
                document.querySelector(".block.blank").style.backgroundImage = block.style.backgroundImage;
            }
            block.nextElementSibling.className = "block";
            block.nextElementSibling.style.backgroundImage = block.style.backgroundImage;
            block.style.backgroundImage = "none";
            block.className = "block blank";
        }
    }

    // 随机打乱拼图块的位置
    function disorganize() {
        var blocks = document.querySelectorAll(".puzzle .block");
        var arr = [];
        for (var i = 0; i < blocks.length; i++) {
            arr.push(blocks[i]);
        }
        arr.sort(() => Math.random() - 0.5); // 使用sort方法，按照一定的随机顺序排序
        for (var i = 0; i < arr.length; i++) {
            arr[i].style.top = parseInt(i / 2) * 175 + "px";
            arr[i].style.left = i % 2 * 175 + "px";
        }
    }

    // 游戏初始化
    function init() {
        var blocks = document.querySelectorAll(".puzzle .block");
        // 绑定事件监听
        for (var i = 0; i < blocks.length; i++) {
            blocks[i].addEventListener("click", function() {
                moveLeft(this);
                moveRight(this);
                moveUp(this);
                moveDown(this);
            }, false);
        }
        document.querySelector(".puzzle .block:nth-child(4)").className = "block blank"; // 设置空白块
        disorganize(); // 随机打乱拼图块
    }

    init();
})();

1. 总结

以上就是JS实现九宫格拼图游戏的完整攻略，主要包括游戏规则、实现步骤和代码示例。通过这个例子，你可以学习到HTML、CSS、JS的配合使用，同时掌握了DOM操作和事件监听的技巧。