拼图(九宫格，十六宫格)

最新推荐文章于 2023-01-11 12:17:03 发布

weixin_34252090

最新推荐文章于 2023-01-11 12:17:03 发布

阅读量4.2k

点赞数 1

文章标签： java c# 游戏

原文链接：http://www.cnblogs.com/slency-ll/p/10282066.html

版权

一、思路

　　1、正常顺序的图片显示

　　2、点击开始游戏，随机打乱图片

　　3、图片移动操作

　　4、判断游戏是否结束

二、思考点

　　1、如何判断随机的图片是否可解？

　　怎么证明它的可解性，请参考 https://air20.com/archives/323.html ，我理解的大神们的意思就是，原数组和随机出来的数组的逆序数的奇偶性一致，那么就是可解的。

　　如果原数组是[0,1,2,3,4,5,6,7,8], 算出来的逆序数为 0，那么只要保证随机出来的数组的逆序数为偶数，那么拼图就是可解的。

　　2、如果随机出来的图片不可解，是不是要重新随机，直到它可解？

　　不用，因为又有大神发现，只用调换该数组倒数第二第三个数值，就可以改变该数组逆序数的奇偶性。

　　再调换6和7的位置

三、附源码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>拼图</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
                box-sizing: content-box;
            }
            .wrap{
                width: 1000px;
                height: 800px;
                background: #EDEDED;
            }
            #Img{
                width: 320px;
                height: 320px;
                margin: 0 auto;                                
            }
            #Img li{
                list-style: none;
                width: 100px;
                height: 100px;
                float: left;
                border: 1px solid #F6F6F6;
                margin: 1px;    
                cursor: pointer;
                background-image: url(img/Penguins.jpg);            
                background-size:  300px 300px;
                background-repeat: no-repeat;
                position: relative;
            }
            
            .start{
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <div id="Img">
                <ul>
                    
                </ul>
            </div>
            <div class="start">
                <select name="" id="select">
                    <option value="3">3*3</option>
                    <option value="4">4*4</option>
                </select>
                <button type="button" id="begin">开始</button>
            </div>
        </div>
        
        
        <script src="jquery/jquery-1.11.2.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
        
            var group = 3,         //分为几组进行排列
                ul = $("#Img ul"),
                sequence = [],
                ImgList = [],
                imgLens,
                steps;
            
            var Puzzle = {
                initImgOrder : function(){   //正常顺序的图片
                    imgLens = Math.pow(group,2);
                    sequence = [];
                    ul.empty();
                    var size = group * 100 +"px";
                    for (var i = 0; i < imgLens; i++) {                        
                        var y = -((i / group) >>> 0), x = -i % group;
                        ImgList[i+1] = [x,y];
                        var li = '<li style="background-position: '+x*100+'px '+y*100+'px;"></li>';
                        ul.append(li);                        
                        sequence.push(i+1);
                    }
                    $("#Img li").css({"backgroundSize":size+" "+size});
                },
                showRandomImg: function(newArr){
                    ul.empty();
                    var size = group * 100 +"px";
                    for (var i in newArr) {                        
                        var item = newArr[i],
                            x = ImgList[item][0],
                            y = ImgList[item][1];
                        var li = '<li data-index="'+item+'" style="background-position: '+x*100+'px '+y*100+'px;" ></li>';
                        ul.append(li);
                    }
                    ul.append('<li id="block" data-index="'+imgLens+'" style="background-image: none;background-color: #fff;"></li>'); //加上空白格
                    $("#Img li").css({"backgroundSize":size+" "+size});
                },
                imgMove: function(e){
                    var allLi = ul.find("li"),
                        x = allLi.index($(e)) + 1,                    
                        z = allLi.index($("#block")) + 1;
                    
            
                    if(x - 1 == z && (x-1) % group != 0){ //如果空白格在左边
                        $(e).after($("#block"));        
                        steps++;
                    }
                    if(x + 1 == z && (x+1) % group != 1){ //如果空白格在右边
                        $("#block").after($(e));
                        steps++;
                    }
                    if(x + group == z && (x+group) < imgLens+1){ //如果空白格在下边    
                        var p = $("#block").prev();
                        $(e).next().before($("#block"));
                        p.after($(e));
                        steps++;
                    }
                    if(x - group == z && (x-group) > 0){ //如果空白格在上边
                        var p = $("#block").next();
                        $(e).prev().after($("#block"));
                        p.before($(e));        
                        steps++;
                    }
                    
                    
                    Puzzle.isGameOver();
                },
                isGameOver: function(){   //游戏是否结束
                    var allLi = ul.find("li"),
                        count = 0;
                    for (var i = 0; i < imgLens; i++) {
                        var idx = allLi.eq(i).data().index;
                
                        if (idx == (i + 1)) {
                            count++;
                        }
                    }
                     
                    if(count == imgLens){
                        alert('u are win! '+steps+' steps in use');
                        Puzzle.initImgOrder();
                        $(".start").show();
                    }
                },
                randomImgOrder: function(arr){  //随机打乱图片
                    
                    arr.sort(function () {
                        return 0.5 - Math.random();
                    });
                    var num = Puzzle.reverseCount(arr);
                    /** 检测打乱后是否可解 */
                    if (num % 2 != 0) {
                        /** 不可解，通过调换倒数第二个第三个数值，改变逆序数的奇偶性 */
                        var len = arr.length,
                        t = arr[len-2];
                        arr[len-2] = arr[len-3];
                        arr[len-3] = t;

                    }
                    console.log(arr)
                    return arr;
                    
                },
                reverseCount: function(arr){  //计算逆序数
                    var reverseAmount = 0;

                    for (var i = 0; i < imgLens-1; i++) {
                        var current = arr[i];
                
                        for (var j = i + 1; j < imgLens-1; j++) {
                            var compared = arr[j];
                
                            if (compared < current) {
                                reverseAmount++;
                            }
                        }
                    }
                    
                    return reverseAmount;
                }
            }
            
            
            Puzzle.initImgOrder();
            
            
            $("#select").on('change',function(){
                var val = $(this).val();
                if(val == "3"){
                    group = 3;
                    $("#Img").css({"width":"320px","height":"320px"});
                    Puzzle.initImgOrder();
                }else{
                    group = 4;
                    $("#Img").css({"width":"440px","height":"440px"});                    
                    Puzzle.initImgOrder();
                }
            });
                    
            $("#begin").on('click',function(){
                $(".start").hide();
                sequence.splice(imgLens-1, 1); //除开一个空白格
                var randArr = Puzzle.randomImgOrder(sequence);
                Puzzle.showRandomImg(randArr);
                steps = 0;
            });
            ul.on('click','li',function(){
                Puzzle.imgMove(this);
            });
        </script>
    </body>
</html>

转载于:https://www.cnblogs.com/slency-ll/p/10282066.html

weixin_34252090

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
拼图(九宫格，十六宫格)

一、思路　　1、正常顺序的图片显示　　2、点击开始游戏，随机打乱图片　　3、图片移动操作　　4、判断游戏是否结束　　　　　　二、思考点　　1、如何判断随机的图片是否可解？　　怎么证明它的可解性，请参考https://air20.com/archives/323.html ，我理解的大神们的意思就是，原数组和随机出来的数组的逆序数的奇偶性一致...
复制链接

扫一扫