拼圖(九宮格，十六宮格)

時間 2019-12-02

標籤拼圖九宮十六简体版

原文原文鏈接

1、思路javascript

　　一、正常順序的圖片顯示css

　　二、點擊開始遊戲，隨機打亂圖片html

　　三、圖片移動操做java

　　四、判斷遊戲是否結束jquery

2、思考點數組

　　一、如何判斷隨機的圖片是否可解？app

　　怎麼證實它的可解性，請參考 https://air20.com/archives/323.html ，我理解的大神們的意思就是，原數組和隨機出來的數組的逆序數的奇偶性一致，那麼就是可解的。dom

　　若是原數組是[0,1,2,3,4,5,6,7,8], 算出來的逆序數爲 0，那麼只要保證隨機出來的數組的逆序數爲偶數，那麼拼圖就是可解的。ide

　　二、若是隨機出來的圖片不可解，是否是要從新隨機，直到它可解？ui

　　不用，由於又有大神發現，只用調換該數組倒數第二第三個數值，就能夠改變該數組逆序數的奇偶性。

　　再調換6和7的位置

3、附源碼

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。