移動端的拼圖游戲

在大家眼里，做開發都是比較枯燥無味的事情，但是開發不全是枯燥無味的；也很多的樂趣。今天就給大家分享一下移動端的拼圖游戲，希望你們在娛樂中學到新的知識。

移

在開始之前，我們首先來總結一下移動端touch事件：

touchstart、 touchmove、 touchend、touchcancel,這是我們移動開發最基礎的事件，在實際開發中，我們需要進行能力監測，看我們的window是否支持touch。因此。提醒新手們如果不知道自己所用的事件是否得到瀏覽器的支持，再用事件之前先進行能力測試，就是執行簡單的if()條件判斷，如果支持這個功能，則用這個功能去執行。這個思想就比如前端開發中html5新增的video標簽，我們可以在video標簽中寫：“您的瀏覽器不支持多媒體播放功能”一樣，這樣的能力判斷也是如此，如果不支持，那么我們后面開發的工作就沒有必要進行下去了。

目前，我們的移動端主要都是一些觸屏操作，以前的按鍵操作的手機已經退出了我們的日常生活。所以說：只有不斷地進步，才能開發出美好的東西，同時改變我們的生活。我們開發也是的，只有不斷地學習，改進我們的代碼質量，以及我們的開發思維，你會看到一個全新的代碼世界。今天，你學會了這個簡單的touch事件，那么你就可以進一步慢慢地學習一些移動端開發的知識了。

效果圖展示：

點擊開始按鈕，如下圖所示：

當我們點擊按鈕開始后，圖片會被打亂，出現我們常見的小米之家的游戲，出現的拼圖游戲，你也可以只有手機模擬了。

 簡單的手機模擬，安裝一個wifi和wampservice，安裝WampServer可以選擇安裝路徑，同時注意把所有的需要訪問的資源放在www文件下。

 

並且同時讓你的電腦和你的手機處於同一個局域網中。啟動命令操作面板：輸入ipconfig

輸出后結果如下所示：

最后修改我們的訪問的ip地址

 

在手機端打開瀏覽器就可以訪問上面的頁面了，就可以實現同步效果了。

 

 

下面是簡單的html布局文件

<h1>拼圖游戲</h1>
    <div> <button id="btn">開始</button></div>
    <div class="imgbox" id="imgbox">
        <div class="box" data-index="0" style="top:0px;left:0px;background-position:0px 0px">0</div>
        <div class="box" data-index="1" style="top:0px;left:100px;background-position:-100px 0px">1</div>
        <div class="box" data-index="2" style="top:0px;left:200px;background-position:-200px 0px">2</div>
        <div class="box" data-index="3" style="top:100px;left:0px;background-position:0px -100px">3</div>
        <div class="box" data-index="4" style="top:100px;left:100px;background-position:-100px -100px">4</div>
        <div class="box" data-index="5" style="top:100px;left:200px;background-position:-200px -100px">5</div>
        <div class="box" data-index="6" style="top:200px;left:0px;background-position:0px -200px">6</div>
        <div class="box" data-index="7" style="top:200px;left:100px;background-position:-100px -200px">7</div>
        <div class="box" data-index="8" style="top:200px;left:200px;background-position:-200px -200px">8</div>
    </div>
    <div class="mask" id="maskbox">
        <div class="mask-info">成功</div>
    </div>

注意這里需要加入移動端視口配置

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

下面是css簡單的樣式：

.imgbox{position:relative;width: 306px;height: 306px;margin:20px auto;border:2px solid #ccc;padding:2px;}
 .box{position:absolute;width:100px;height:100px;border:1px solid #999;background-image:url(1.png);background-size: 300px 300px;transition: all .5s;}
#maskbox{display:none;position:absolute;top:0;left:0;bottom:0;right:0;background-color: rgba(0,0,0,.5);}
.mask-info{border-radius:30px; color:#333;font-size:30px;text-align:center;width: 200px;line-height:100px;height: 100px;margin:100px auto;background-color: rgba(255,255,255,.5);}

js文件：

;(function(){
        document.getElementById("btn").addEventListener("click",function(){
            //打散
            console.info("開始")
            //要交換元素的left，top值。
            //例如：直接a,b元素的位置
            //交換 10對元素的位置
            for(var i = 1;i<20;i++){
                var a = Math.floor(Math.random()*1000) % 9;
                var b = Math.floor(Math.random()*1000) % 9;
            
                console.info(a,b);
                if(a != b){
                    //交換boxs[a] 與boxs[b]
                    //
                    var _left = boxs[a].style.left;
                    boxs[a].style.left = boxs[b].style.left;
                    boxs[b].style.left = _left;

                    var _top = boxs[a].style.top;
                    boxs[a].style.top = boxs[b].style.top;
                    boxs[b].style.top = _top;

                    var _index= boxs[a].getAttribute("data-index");
                    boxs[a].setAttribute("data-index",boxs[b].getAttribute("data-index"));
                    boxs[b].setAttribute("data-index",_index);
                }
            }

        })
        var maskbox = document.getElementById("maskbox");
        var boxs = document.querySelectorAll(".box");
        var imgBox = document.getElementById('imgbox');
        var info ={
            x:0,y:0,top:0,left:0
        }
        for (var i = 0; i < boxs.length; i++) {
            boxs[i].addEventListener("touchstart",function(e){
                info.x = e.targetTouches[0].pageX;
                info.y = e.targetTouches[0].pageY;
                info.top = parseInt( this.style.top );
                info.left = parseInt(  this.style.left );

                //緩存起點位置  給元素加了兩個屬性
                this.oriLeft = info.left;
                this.oriTop = info.top;

                //不要動畫
                this.style.transition="none";

            });

            boxs[i].addEventListener("touchmove",function(e){
                //newTop - newY = top - Y
                //newTop = top -y + newY
                this.style["z-index"] = 1000;
                var newTop = info.top - info.y + e.targetTouches[0].pageY;
                var newLeft = info.left - info.x + e.targetTouches[0].pageX;

                this.style.left = newLeft + "px";
                this.style.top = newTop + "px";

            });
            boxs[i].addEventListener("touchend",function(e){
                this.style.transition=" all .5s";
                this.style["z-index"] = 0;
                //對每 個元素進行檢測
                // x > 元素的.offsetLeft && x <元素的.offsetLeft+ 100
                // y > 元素的.offsetTop && x <元素的.offsetTop+ 100
                var x = e.changedTouches[0].pageX -imgBox.offsetLeft ,
                    y = e.changedTouches[0].pageY -imgBox.offsetTop;
                console.info(x,y);//.targetTouches[0].pageX,e.targetTouches[0].pageY);
                //通過當前 x,y來找到應該要交換的元素是哪個？
                var obj = findSwtichBox(this,x,y);

                if(obj === this) { //不要交換元素
                    //從哪里來就回到哪里去。
                    obj.style.left = obj.oriLeft +"px";
                    obj.style.top = obj.oriTop +"px";
                }
                else{
                    swtichBoxs(this,obj);
                    setTimeout(function(){
                        if( isOk() ){//完成了
                            //alert("ok");
                            maskbox.style.display="block";
                            
                        }
                    },600)

                }
                console.info(obj);    
            });
        }

        function isOk(){

            // 思路：對每一個box設置一個“序號”（data-index）屬性。每次交換后，都檢查一下當前的元素的順序是否與成功的序號是一致的。
            // 獲取所有的元素的序號
            var str ="";
            for (var i = 0; i < boxs.length; i++) {
                str += boxs[i].getAttribute("data-index");
            }
            console.info(str);
            return str == "012345678";
            
        }
        //交換a，b元素的位置
        function swtichBoxs(oriEle,targetEle){
//debugger;
            // var a = 10;
            // var b = 20;

            var _top = oriEle.oriTop;                // var t = a;
            oriEle.style.top = targetEle.style.top; // a = b;
            targetEle.style.top = _top+"px";                // b = t;

            //把targetEle的top設置為oriEle的oriTop;
            var _left = oriEle.oriLeft;                // var t = a;
            oriEle.style.left = targetEle.style.left; // a = b;
            targetEle.style.left = _left+"px";                // b = t;
            //console.info(a);
            //console.info(b);
            //
            //交換data-index值
            var _index= oriEle.getAttribute("data-index");
            oriEle.setAttribute("data-index",targetEle.getAttribute("data-index"));
            targetEle.setAttribute("data-index",_index);

        }
        //根據x,y的值，看當前的x，y落在box中的哪一個元素上。
        function findSwtichBox(obj,x,y){
            //自己不參與檢查
            
            for (var i = 0; i < boxs.length; i++) {
                if(obj !== boxs[i]){
                    var t1 = x >  boxs[i].offsetLeft && x < (boxs[i].offsetLeft+ 100);
                    var t2 = y >  boxs[i].offsetTop  && y < (boxs[i].offsetTop + 100);
                    if(t1 && t2 ){
                        //console.info(boxs[i]); 找到目標
                        return boxs[i];
                    }
                }
                
            }
            return obj; //沒有找到目標，即返回自己
        }
    })();