菜单 搜索
首页 前端知识 javaScript、jQuery、html实现九宫格拼图游戏（逻辑及源码）

javaScript、jQuery、html实现九宫格拼图游戏（逻辑及源码）

2024-03-10 11:03:07 前端知识 前端哥 735 847 我要收藏

目录

游戏效果

主要逻辑分析

1、打乱格子

2、图片点击

具体实现代码（3×3）

实现代码（4×4）

实现代码（5×5）

最近突然想起来win7自带的拼图小游戏，现在已经玩不到了，于是便想自己实现一个，用了几天闲暇时间，终于捣鼓出来了。

游戏效果

主要逻辑分析

1、打乱格子

游戏开始前会打乱格子，打乱格子不能给每一个格子图片一个随机位置，否则会出现拼不回去的情况。打乱时应该将排好序的格子中的空白格子进行移动，实现打乱，这样拼图是一定可以拼回去的。打乱过程设有最少打乱次数min和打乱的程度disorder，打乱时空白格子至少移动min次，每移动一次，计算打乱程度disorder，每当有一个图片不在对应的格子上disorder加1，当打乱程度足够且满足最少打乱次数时打乱完成。

//生成图片随机顺序
var arr = [1,2,3,4,5,6,7,8,9];
var ran = [1,-1,3,-3];//移动方向，分别代表右左下上
var arr1 = [1,2,3,4,5,6,7,9,8];//用于测试
var arr2 = [];//用于测试

var empIndex = 8;//空白块对应arr的索引，初始索引为8
var disorder = 9;//打乱的程度
var min = 30;//限制最少循环次数
while (disorder>0 || min>0) {
    disorder = 0;
    min--;
    //从数组ran中随机选择空白块移动的方向
    var step = ran[Math.floor((Math.random()*4))];
    arr2.push(step);

    if(step===1){
        //如果step为1
        if((empIndex%3)!==2){
            //符合换位条件，将arr[empIndex]与arr[empIndex+1]交换，即空白块右移
            var t = arr[empIndex];
            arr[empIndex] = arr[empIndex+1];
            arr[empIndex+1] = t;
            //交换后更新empIndex的值
            empIndex = empIndex+1;
        }
    }else if (step===-1){
        //如果step为-1
        if((empIndex%3)!==0){
            //符合换位条件，将arr[empIndex]与arr[empIndex-1]交换，即空白块左移
            var t = arr[empIndex];
            arr[empIndex] = arr[empIndex-1];
            arr[empIndex-1] = t;
            empIndex = empIndex-1;
        }

    }else if (step===3){
        //如果step为3
        if(empIndex<6){
            //符合换位条件，将arr[empIndex]与arr[empIndex+3]交换，即空白块下移
            var t = arr[empIndex];
            arr[empIndex] = arr[empIndex+3];
            arr[empIndex+3] = t;
            empIndex = empIndex+3;
        }

    }else{
        //如果step为-3
        if(empIndex>2){
            //符合换位条件，将arr[empIndex]与arr[empIndex-3]交换，即空白块上移
            var t = arr[empIndex];
            arr[empIndex] = arr[empIndex-3];
            arr[empIndex-3] = t;
            empIndex = empIndex-3;
        }
    }

    //判断arr的打乱程度
    for (var k = 0; k < 9; k++) {
        if (arr[k]===k+1){
            disorder = disorder + 1;
        }
    }
}

2、图片点击

点击一个图片，会判定其是否能与空白格进行交换，能则交换两者css样式。

//图片点击事件
$("img").click(function () {
    //获取当前点击元素的id
    var thisId = $(this).attr("id");
    //获取空白块的id
    var $imageA9 = $(".image_a_9");
    var targetId = $imageA9.attr("id");

    var thisIndex = Number(thisId[3]);/*点击索引*/
    var targetIndex = Number(targetId[3]);/*目标索引*/

    if((thisIndex%3===0&&targetIndex%3===1)||(thisIndex%3===1&&targetIndex%3===0)){

    }else if (((thisIndex-targetIndex)===-1)||((thisIndex-targetIndex)===1)||((thisIndex-targetIndex)===-3)||((thisIndex-targetIndex)===3)){
        //获取当前元素class
        var thisClass = $(this).attr("class");
        //交换当前元素与目标元素class
        $(this).removeClass(thisClass);
        $(this).addClass("image_a_9");
        $imageA9.removeClass("image_a_9");
        $imageA9.addClass(thisClass);

        //判断是否完成
        var flag = 0;
        for (var i = 1; i < 10; i++) {
            var id = "img" + i.toString();
            var myElement = document.getElementById(id);
            var classNo = Number((myElement.classList.toString())[8]);
            if(classNo !== i){
                flag = 1;
                break;
            }
        }
        if(flag===0){
            $("#success").css("display","block");
        }
    }
})

具体实现代码（3×3）

以下为3×3的实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>game1_3x3</title>
    <script  src="js/jquery-3.6.0.min.js"></script>
    <!--图片样式-->
    <style>
        img {
            width: 100px;
            height: 100px;
            background-size: cover;
            float: left;
        }
        .image_a_1 {
            background-image: url("images/3x3/game1/game1_01.gif");
        }
        .image_a_2 {
            background-image: url("images/3x3/game1/game1_02.gif");
        }
        .image_a_3 {
            background-image: url("images/3x3/game1/game1_03.gif");
        }
        .image_a_4 {
            background-image: url("images/3x3/game1/game1_04.gif");
        }
        .image_a_5 {
            background-image: url("images/3x3/game1/game1_05.gif");
        }
        .image_a_6 {
            background-image: url("images/3x3/game1/game1_06.gif");
        }
        .image_a_7 {
            background-image: url("images/3x3/game1/game1_07.gif");
        }
        .image_a_8 {
            background-image: url("images/3x3/game1/game1_08.gif");
        }
        .image_a_9 {
            background-color: white;
        }
    </style>
    <!--成功提示-->
    <style>
        .sucess {
            width: 300px;
            height: 50px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 40px;
            display: none;
        }
    </style>

    <script>

        $(function () {

            //生成图片随机顺序
            var arr = [1,2,3,4,5,6,7,8,9];
            var ran = [1,-1,3,-3];//移动方向，分别代表右左下上
            var arr1 = [1,2,3,4,5,6,7,9,8];//用于测试
            var arr2 = [];//用于测试

            var empIndex = 8;//空白块对应arr的索引，初始索引为8
            var disorder = 9;//打乱的程度
            var min = 30;//限制最少循环次数
            while (disorder>0 || min>0) {
                disorder = 0;
                min--;
                //从数组ran中随机选择空白块移动的方向
                var step = ran[Math.floor((Math.random()*4))];
                arr2.push(step);

                if(step===1){
                    //如果step为1
                    if((empIndex%3)!==2){
                        //符合换位条件，将arr[empIndex]与arr[empIndex+1]交换，即空白块右移
                        var t = arr[empIndex];
                        arr[empIndex] = arr[empIndex+1];
                        arr[empIndex+1] = t;
                        //交换后更新empIndex的值
                        empIndex = empIndex+1;
                    }
                }else if (step===-1){
                    //如果step为-1
                    if((empIndex%3)!==0){
                        //符合换位条件，将arr[empIndex]与arr[empIndex-1]交换，即空白块左移
                        var t = arr[empIndex];
                        arr[empIndex] = arr[empIndex-1];
                        arr[empIndex-1] = t;
                        empIndex = empIndex-1;
                    }

                }else if (step===3){
                    //如果step为3
                    if(empIndex<6){
                        //符合换位条件，将arr[empIndex]与arr[empIndex+3]交换，即空白块下移
                        var t = arr[empIndex];
                        arr[empIndex] = arr[empIndex+3];
                        arr[empIndex+3] = t;
                        empIndex = empIndex+3;
                    }

                }else{
                    //如果step为-3
                    if(empIndex>2){
                        //符合换位条件，将arr[empIndex]与arr[empIndex-3]交换，即空白块上移
                        var t = arr[empIndex];
                        arr[empIndex] = arr[empIndex-3];
                        arr[empIndex-3] = t;
                        empIndex = empIndex-3;
                    }
                }

                //判断arr的打乱程度
                for (var k = 0; k < 9; k++) {
                    if (arr[k]===k+1){
                        disorder = disorder + 1;
                    }
                }
            }

            //alert(arr2);

            //随机放置图片
            for (var j = 0; j < 9; j++) {
                var index = "img"+(j+1).toString();
                var className = "image_a_"+arr[j];//将 arr 改为 arr1 以测试游戏成功判定功能
                var element = document.getElementById(index);
                element.classList.add(className);
            }

            //图片点击事件
            $("img").click(function () {
                //获取当前点击元素的id
                var thisId = $(this).attr("id");
                //获取空白块的id
                var $imageA9 = $(".image_a_9");
                var targetId = $imageA9.attr("id");

                var thisIndex = Number(thisId[3]);/*点击索引*/
                var targetIndex = Number(targetId[3]);/*目标索引*/

                if((thisIndex%3===0&&targetIndex%3===1)||(thisIndex%3===1&&targetIndex%3===0)){

                }else if (((thisIndex-targetIndex)===-1)||((thisIndex-targetIndex)===1)||((thisIndex-targetIndex)===-3)||((thisIndex-targetIndex)===3)){
                    //获取当前元素class
                    var thisClass = $(this).attr("class");
                    //交换当前元素与目标元素class
                    $(this).removeClass(thisClass);
                    $(this).addClass("image_a_9");
                    $imageA9.removeClass("image_a_9");
                    $imageA9.addClass(thisClass);

                    //判断是否完成
                    var flag = 0;
                    for (var i = 1; i < 10; i++) {
                        var id = "img" + i.toString();
                        var myElement = document.getElementById(id);
                        var classNo = Number((myElement.classList.toString())[8]);
                        if(classNo !== i){
                            flag = 1;
                            break;
                        }
                    }
                    if(flag===0){
                        $("#success").css("display","block");
                    }
                }
            })
        });
    </script>
</head>
<body>
<div style="width:300px;height:300px;margin-left:auto;margin-right:auto;margin-top:auto;">
    <img id="img1">
    <img id="img2">
    <img id="img3">
    <img id="img4">
    <img id="img5">
    <img id="img6">
    <img id="img7">
    <img id="img8">
    <img id="img9">
</div>
<div id="success" class="sucess">
    <span style="text-align:center;font-size:30px;color:red">成功！！！</span>
</div>
<div style="width:300px;margin-left:auto;margin-right:auto;margin-top:50px">
    <a href="game1x3.html" style="background-color:rgba(11,98,216,0.9);color:white;padding:16px 25px;text-align:center;text-decoration:none;display:block;font-size:30px">重新开始</a>
</div>
<div style="width:300px;margin-left:auto;margin-right:auto;margin-top:35px">
    <a href="main.html" style="background-color:rgba(199,77,0,0.9);color:white;padding:11px 25px;text-align:center;text-decoration:none;display:block;font-size:30px">难度</a>
</div>
<div style="width:300px;margin-left:auto;margin-right:auto;margin-top:25px">
    <a href="main.html" style="background-color:rgba(199,77,0,0.9);color:white;padding:11px 25px;text-align:center;text-decoration:none;display:block;font-size:30px">图片</a>
</div>
<div style="width:300px;margin-left:auto;margin-right:auto;margin-top:280px;text-align:center">
    made by bijunen
</div>
</body>
</html>

实现代码（4×4）

4×4及5×5规格的实现与3×3思路差不多，代码实现略有不同。

以下为4×4的实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>game1_4x4</title>
    <script  src="js/jquery-3.6.0.min.js"></script>
    <!--图片样式-->
    <style>
        img {
            width: 100px;
            height: 100px;
            background-size: cover;
            float: left;
        }
        .image_a_01 {
            background-image: url("images/4x4/game1/game1_01.gif");
        }
        .image_a_02 {
            background-image: url("images/4x4/game1/game1_02.gif");
        }
        .image_a_03 {
            background-image: url("images/4x4/game1/game1_03.gif");
        }
        .image_a_04 {
            background-image: url("images/4x4/game1/game1_04.gif");
        }
        .image_a_05 {
            background-image: url("images/4x4/game1/game1_05.gif");
        }
        .image_a_06 {
            background-image: url("images/4x4/game1/game1_06.gif");
        }
        .image_a_07 {
            background-image: url("images/4x4/game1/game1_07.gif");
        }
        .image_a_08 {
            background-image: url("images/4x4/game1/game1_08.gif");
        }
        .image_a_09 {
            background-image: url("images/4x4/game1/game1_09.gif");
        }
        .image_a_10 {
            background-image: url("images/4x4/game1/game1_10.gif");
        }
        .image_a_11 {
            background-image: url("images/4x4/game1/game1_11.gif");
        }
        .image_a_12 {
            background-image: url("images/4x4/game1/game1_12.gif");
        }
        .image_a_13 {
            background-image: url("images/4x4/game1/game1_13.gif");
        }
        .image_a_14 {
            background-image: url("images/4x4/game1/game1_14.gif");
        }
        .image_a_15 {
            background-image: url("images/4x4/game1/game1_15.gif");
        }
        .image_a_16 {
            background-color: white;
        }
    </style>
    <!--成功提示-->
    <style>
        .sucess {
            width: 300px;
            height: 300px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 40px;
            display: none;
        }
    </style>

    <script>

        $(function () {

            //生成图片随机顺序
            var arr = ["01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16"];
            var arrIndex = ["01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16"];
            var ran = [1,-1,4,-4];//移动方向，分别代表右左下上
            var arr1 = ["01","02","03","04","05","06","07","08","09","10","11","12","13","14","16","15"];//用于测试
            var arr2 = [];//用于测试

            var empIndex = 15;//空白块对应arr的索引，初始索引为15
            var disorder = 16;//打乱的程度
            var min = 60;//限制最少循环次数
            while (disorder>0 || min>0) {
                disorder = 0;
                min--;
                //从数组ran中随机选择空白块移动的方向
                var step = ran[Math.floor((Math.random()*4))];
                arr2.push(step);

                if(step===1){
                    //如果step为1
                    if((empIndex%4)!==3){
                        //符合换位条件，将arr[empIndex]与arr[empIndex+1]交换，即空白块右移
                        var t = arr[empIndex];
                        arr[empIndex] = arr[empIndex+1];
                        arr[empIndex+1] = t;
                        //交换后更新empIndex的值
                        empIndex = empIndex+1;
                    }
                }else if (step===-1){
                    //如果step为-1
                    if((empIndex%4)!==0){
                        //符合换位条件，将arr[empIndex]与arr[empIndex-1]交换，即空白块左移
                        var t = arr[empIndex];
                        arr[empIndex] = arr[empIndex-1];
                        arr[empIndex-1] = t;
                        empIndex = empIndex-1;
                    }

                }else if (step===4){
                    //如果step为3
                    if(empIndex<12){
                        //符合换位条件，将arr[empIndex]与arr[empIndex+3]交换，即空白块下移
                        var t = arr[empIndex];
                        arr[empIndex] = arr[empIndex+4];
                        arr[empIndex+4] = t;
                        empIndex = empIndex+4;
                    }

                }else{
                    //如果step为-3
                    if(empIndex>3){
                        //符合换位条件，将arr[empIndex]与arr[empIndex-3]交换，即空白块上移
                        var t = arr[empIndex];
                        arr[empIndex] = arr[empIndex-4];
                        arr[empIndex-4] = t;
                        empIndex = empIndex-4;
                    }
                }

                //判断arr的打乱程度
                for (var k = 0; k < 16; k++) {
                    if (Number(arr[k])===k+1){
                        disorder = disorder + 1;
                    }
                }
            }

            //alert(arr2);

            //随机放置图片
            for (var j = 0; j < 16; j++) {
                var index = "img"+arrIndex[j];
                var className = "image_a_"+arr[j];//将 arr 改为 arr1 以测试游戏成功判定功能
                var element = document.getElementById(index);
                element.classList.add(className);
            }

            //图片点击事件
            $("img").click(function () {
                //获取当前点击元素的id
                var thisId = $(this).attr("id");
                //获取空白块的id
                var $imageA16 = $(".image_a_16");
                var targetId = $imageA16.attr("id");

                var thisIndex = Number(thisId[3]+thisId[4]);/*点击索引*/
                var targetIndex = Number(targetId[3]+targetId[4]);/*目标索引*/

                if((thisIndex%4===0&&targetIndex%4===1)||(thisIndex%4===1&&targetIndex%4===0)){

                }else if (((thisIndex-targetIndex)===-1)||((thisIndex-targetIndex)===1)||((thisIndex-targetIndex)===-4)||((thisIndex-targetIndex)===4)){
                    //获取当前元素class
                    var thisClass = $(this).attr("class");
                    //交换当前元素与目标元素class
                    $(this).removeClass(thisClass);
                    $(this).addClass("image_a_16");
                    $imageA16.removeClass("image_a_16");
                    $imageA16.addClass(thisClass);

                    //判断是否完成
                    var flag = 0;
                    for (var i = 1; i < 17; i++) {
                        var id = "img" + arrIndex[i-1];
                        var myElement = document.getElementById(id);
                        var classNo = Number((myElement.classList.toString())[8]+(myElement.classList.toString())[9]);
                        if(classNo !== i){
                            flag = 1;
                            break;
                        }
                    }
                    if(flag===0){
                        $("#success").css("display","block");
                    }
                }
            })
        });
    </script>
</head>
<body>
<div style="width:400px;height:400px;margin-left:auto;margin-right:auto;margin-top:auto;">
    <img id="img01">
    <img id="img02">
    <img id="img03">
    <img id="img04">
    <img id="img05">
    <img id="img06">
    <img id="img07">
    <img id="img08">
    <img id="img09">
    <img id="img10">
    <img id="img11">
    <img id="img12">
    <img id="img13">
    <img id="img14">
    <img id="img15">
    <img id="img16">
</div>
<div id="success" class="sucess">
    <span style="text-align:center;font-size:30px;color:red">成功！！！</span>
</div>
<div style="width:300px;margin-left:auto;margin-right:auto;margin-top:50px">
    <a href="game1x3.html" style="background-color:rgba(11,98,216,0.9);color:white;padding:16px 25px;text-align:center;text-decoration:none;display:block;font-size:30px">重新开始</a>
</div>
<div style="width:300px;margin-left:auto;margin-right:auto;margin-top:35px">
    <a href="main.html" style="background-color:rgba(199,77,0,0.9);color:white;padding:11px 25px;text-align:center;text-decoration:none;display:block;font-size:30px">难度</a>
</div>
<div style="width:300px;margin-left:auto;margin-right:auto;margin-top:25px">
    <a href="main.html" style="background-color:rgba(199,77,0,0.9);color:white;padding:11px 25px;text-align:center;text-decoration:none;display:block;font-size:30px">图片</a>
</div>
<div style="width:300px;margin-left:auto;margin-right:auto;margin-top:180px;text-align:center">
    made by bijunen
</div>
</body>
</html>

实现代码（5×5）

以下为5×5的实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>game1_5x5</title>
    <script  src="js/jquery-3.6.0.min.js"></script>
    <!--图片样式-->
    <style>
        img {
            width: 100px;
            height: 100px;
            background-size: cover;
            float: left;
        }
        .image_a_01 {
            background-image: url("images/5x5/game1/game1_01.gif");
        }
        .image_a_02 {
            background-image: url("images/5x5/game1/game1_02.gif");
        }
        .image_a_03 {
            background-image: url("images/5x5/game1/game1_03.gif");
        }
        .image_a_04 {
            background-image: url("images/5x5/game1/game1_04.gif");
        }
        .image_a_05 {
            background-image: url("images/5x5/game1/game1_05.gif");
        }
        .image_a_06 {
            background-image: url("images/5x5/game1/game1_06.gif");
        }
        .image_a_07 {
            background-image: url("images/5x5/game1/game1_07.gif");
        }
        .image_a_08 {
            background-image: url("images/5x5/game1/game1_08.gif");
        }
        .image_a_09 {
            background-image: url("images/5x5/game1/game1_09.gif");
        }
        .image_a_10 {
            background-image: url("images/5x5/game1/game1_10.gif");
        }
        .image_a_11 {
            background-image: url("images/5x5/game1/game1_11.gif");
        }
        .image_a_12 {
            background-image: url("images/5x5/game1/game1_12.gif");
        }
        .image_a_13 {
            background-image: url("images/5x5/game1/game1_13.gif");
        }
        .image_a_14 {
            background-image: url("images/5x5/game1/game1_14.gif");
        }
        .image_a_15 {
            background-image: url("images/5x5/game1/game1_15.gif");
        }
        .image_a_16 {
            background-image: url("images/5x5/game1/game1_16.gif");
        }
        .image_a_17 {
            background-image: url("images/5x5/game1/game1_17.gif");
        }
        .image_a_18 {
            background-image: url("images/5x5/game1/game1_18.gif");
        }
        .image_a_19 {
            background-image: url("images/5x5/game1/game1_19.gif");
        }
        .image_a_20 {
            background-image: url("images/5x5/game1/game1_20.gif");
        }
        .image_a_21 {
            background-image: url("images/5x5/game1/game1_21.gif");
        }
        .image_a_22 {
            background-image: url("images/5x5/game1/game1_22.gif");
        }
        .image_a_23 {
            background-image: url("images/5x5/game1/game1_23.gif");
        }
        .image_a_24 {
            background-image: url("images/5x5/game1/game1_24.gif");
        }
        .image_a_25 {
            background-color: white;
        }
    </style>
    <!--成功提示-->
    <style>
        .sucess {
            width: 300px;
            height: 300px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 40px;
            display: none;
        }
    </style>

    <script>

        $(function () {

            //生成图片随机顺序
            var arr = ["01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25"];
            var arrIndex = ["01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25"];
            var ran = [1,-1,5,-5];//移动方向，分别代表右左下上
            var arr1 = ["01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23","25","24"];//用于测试
            var arr2 = [];//用于测试

            var empIndex = 24;//空白块对应arr的索引，初始索引为15
            var disorder = 25;//打乱的程度
            var min = 90;//限制最少循环次数
            while (disorder>0 || min>0) {
                disorder = 0;
                min--;
                //从数组ran中随机选择空白块移动的方向
                var step = ran[Math.floor((Math.random()*4))];
                arr2.push(step);

                if(step===1){
                    //如果step为1
                    if((empIndex%5)!==4){
                        //符合换位条件，将arr[empIndex]与arr[empIndex+1]交换，即空白块右移
                        var t = arr[empIndex];
                        arr[empIndex] = arr[empIndex+1];
                        arr[empIndex+1] = t;
                        //交换后更新empIndex的值
                        empIndex = empIndex+1;
                    }
                }else if (step===-1){
                    //如果step为-1
                    if((empIndex%5)!==0){
                        //符合换位条件，将arr[empIndex]与arr[empIndex-1]交换，即空白块左移
                        var t = arr[empIndex];
                        arr[empIndex] = arr[empIndex-1];
                        arr[empIndex-1] = t;
                        empIndex = empIndex-1;
                    }

                }else if (step===5){
                    //如果step为3
                    if(empIndex<20){
                        //符合换位条件，将arr[empIndex]与arr[empIndex+3]交换，即空白块下移
                        var t = arr[empIndex];
                        arr[empIndex] = arr[empIndex+5];
                        arr[empIndex+5] = t;
                        empIndex = empIndex+5;
                    }

                }else{
                    //如果step为-3
                    if(empIndex>4){
                        //符合换位条件，将arr[empIndex]与arr[empIndex-3]交换，即空白块上移
                        var t = arr[empIndex];
                        arr[empIndex] = arr[empIndex-5];
                        arr[empIndex-5] = t;
                        empIndex = empIndex-5;
                    }
                }

                //判断arr的打乱程度
                for (var k = 0; k < 25; k++) {
                    if (Number(arr[k])===k+1){
                        disorder = disorder + 1;
                    }
                }
            }

            //alert(arr2);

            //随机放置图片
            for (var j = 0; j < 25; j++) {
                var index = "img"+arrIndex[j];
                var className = "image_a_"+arr[j];//将 arr 改为 arr1 以测试游戏成功判定功能
                var element = document.getElementById(index);
                element.classList.add(className);
            }

            //图片点击事件
            $("img").click(function () {
                //获取当前点击元素的id
                var thisId = $(this).attr("id");
                //获取空白块的id
                var $imageA16 = $(".image_a_25");
                var targetId = $imageA16.attr("id");

                var thisIndex = Number(thisId[3]+thisId[4]);/*点击索引*/
                var targetIndex = Number(targetId[3]+targetId[4]);/*目标索引*/

                if((thisIndex%5===0&&targetIndex%5===1)||(thisIndex%5===1&&targetIndex%5===0)){

                }else if (((thisIndex-targetIndex)===-1)||((thisIndex-targetIndex)===1)||((thisIndex-targetIndex)===-5)||((thisIndex-targetIndex)===5)){
                    //获取当前元素class
                    var thisClass = $(this).attr("class");
                    //交换当前元素与目标元素class
                    $(this).removeClass(thisClass);
                    $(this).addClass("image_a_25");
                    $imageA16.removeClass("image_a_25");
                    $imageA16.addClass(thisClass);

                    //判断是否完成
                    var flag = 0;
                    for (var i = 1; i < 26; i++) {
                        var id = "img" + arrIndex[i-1];
                        var myElement = document.getElementById(id);
                        var classNo = Number((myElement.classList.toString())[8]+(myElement.classList.toString())[9]);
                        if(classNo !== i){
                            flag = 1;
                            break;
                        }
                    }
                    if(flag===0){
                        $("#success").css("display","block");
                    }
                }
            })
        });
    </script>
</head>
<body>
<div style="width:500px;height:500px;margin-left:auto;margin-right:auto;margin-top:auto;">
    <img id="img01">
    <img id="img02">
    <img id="img03">
    <img id="img04">
    <img id="img05">
    <img id="img06">
    <img id="img07">
    <img id="img08">
    <img id="img09">
    <img id="img10">
    <img id="img11">
    <img id="img12">
    <img id="img13">
    <img id="img14">
    <img id="img15">
    <img id="img16">
    <img id="img17">
    <img id="img18">
    <img id="img19">
    <img id="img20">
    <img id="img21">
    <img id="img22">
    <img id="img23">
    <img id="img24">
    <img id="img25">
</div>
<div id="success" class="sucess">
    <span style="text-align:center;font-size:30px;color:red">成功！！！</span>
</div>
<div style="width:300px;margin-left:auto;margin-right:auto;margin-top:50px">
    <a href="game1x3.html" style="background-color:rgba(11,98,216,0.9);color:white;padding:16px 25px;text-align:center;text-decoration:none;display:block;font-size:30px">重新开始</a>
</div>
<div style="width:300px;margin-left:auto;margin-right:auto;margin-top:35px">
    <a href="main.html" style="background-color:rgba(199,77,0,0.9);color:white;padding:11px 25px;text-align:center;text-decoration:none;display:block;font-size:30px">难度</a>
</div>
<div style="width:300px;margin-left:auto;margin-right:auto;margin-top:25px">
    <a href="main.html" style="background-color:rgba(199,77,0,0.9);color:white;padding:11px 25px;text-align:center;text-decoration:none;display:block;font-size:30px">图片</a>
</div>
<div style="width:300px;margin-left:auto;margin-right:auto;margin-top:80px;text-align:center">
    made by bijunen
</div>
</body>
</html>

转载请注明出处或者链接地址：https://www.qianduange.cn//article/3547.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

jQuery之宽高

2024-04-05 09:04:19

零基础篇-python高级-06-JQuery

2024-04-05 09:04:19

web前端开发网络课程，jquery入口函数的特点

2024-04-05 09:04:13

DAY10_SpringBoot—SpringMVC重定向和转发&RestFul风格&JSON格式&SSM框架整合&Ajax-JQuery

2024-04-05 09:04:10

jQuery中动态操作元素（新增，移除，判断一个元素是否有子元素）的方法

2024-04-05 09:04:10

jquery利用ajax请求数据渲染二级菜单

2024-04-05 09:04:01

详解：当鼠标放上echarts图形时，显示数据、名称，或者自定义tooltip弹窗

2024-04-05 09:04:59

绘制echarts地图（小圆点，发射线）

2024-04-05 09:04:58

解决echarts 饼图和图例之间的距离问题

2024-04-05 09:04:56

echarts 同时显示柱状图 折线图 (提示框显示百分号%和千分位分隔符）

2024-04-05 09:04:55

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011000
2

ECharts 饼状图颜色设置

2024-02-16 14:02:001000
3

echarts实现动态渲染多柱图

2024-02-12 14:02:341000
4

移动端css布局大全

2024-02-06 15:02:421000
5

使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000
6

JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000
7

vue实现可输入可下拉选择的组件

2024-04-05 09:04:35999
8

echarts 图表，定时器实现数据实时动态

2024-03-13 00:03:28999
9

jQuery事件处理

2024-03-12 01:03:32999
10

HTML5实现下拉列表的标签有哪些

2024-03-11 10:03:35999

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！