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

最新推荐文章于 2024-07-16 11:38:34 发布

LuvCube

最新推荐文章于 2024-07-16 11:38:34 发布

阅读量4.4k

点赞数 6

分类专栏： javascript 文章标签： jquery javascript html css html5

本文链接：https://blog.csdn.net/m0_56726855/article/details/120992729

版权

本文介绍了使用JavaScript、jQuery和HTML实现九宫格拼图游戏的方法，包括游戏的主要逻辑分析和不同尺寸的实现代码。在打乱格子时，通过避免随机位置确保拼图可解；图片点击后判断与空白格交换位置。提供了从3×3到5×5的详细代码实现。

摘要由CSDN通过智能技术生成

最近突然想起来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的值

最低0.47元/天解锁文章

LuvCube

关注

6
点赞
踩
33

收藏

觉得还不错? 一键收藏
2
评论
javaScript、jQuery、html实现九宫格拼图游戏（逻辑及源码）

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

扫一扫

专栏目录