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

目录

游戏效果

主要逻辑分析

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的实现代码：

    
    
    
    
    
    
    

    



    
    
    
    
    
    
    
    
    


    成功！！！


    重新开始


    难度


    图片


    made by bijunen

实现代码（4×4）

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

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

    
    
    
    
    
    
    

    



    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    


    成功！！！


    重新开始


    难度


    图片


    made by bijunen

实现代码（5×5）

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

    
    
    
    
    
    
    

    



    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    


    成功！！！


    重新开始


    难度


    图片


    made by bijunen