移动端的拼图游戏
在大家眼里,做开发都是比较枯燥无味的事情,但是开发不全是枯燥无味的;也很多的乐趣。今天就给大家分享一下移动端的拼图游戏,希望你们在娱乐中学到新的知识。
移
在开始之前,我们首先来总结一下移动端touch事件:
touchstart、 touchmove、 touchend、touchcancel,这是我们移动开发最基础的事件,在实际开发中,我们需要进行能力监测,看我们的window是否支持touch。因此。提醒新手们如果不知道自己所用的事件是否得到浏览器的支持,再用事件之前先进行能力测试,就是执行简单的if()条件判断,如果支持这个功能,则用这个功能去执行。这个思想就比如前端开发中html5新增的video标签,我们可以在video标签中写:“您的浏览器不支持多媒体播放功能”一样,这样的能力判断也是如此,如果不支持,那么我们后面开发的工作就没有必要进行下去了。
目前,我们的移动端主要都是一些触屏操作,以前的按键操作的手机已经退出了我们的日常生活。所以说:只有不断地进步,才能开发出美好的东西,同时改变我们的生活。我们开发也是的,只有不断地学习,改进我们的代码质量,以及我们的开发思维,你会看到一个全新的代码世界。今天,你学会了这个简单的touch事件,那么你就可以进一步慢慢地学习一些移动端开发的知识了。
效果图展示:
点击开始按钮,如下图所示:
当我们点击按钮开始后,图片会被打乱,出现我们常见的小米之家的游戏,出现的拼图游戏,你也可以只有手机模拟了。
简单的手机模拟,安装一个wifi和wampservice,安装WampServer可以选择安装路径,同时注意把所有的需要访问的资源放在www文件下。
并且同时让你的电脑和你的手机处于同一个局域网中。启动命令操作面板:输入ipconfig
输出后结果如下所示:
最后修改我们的访问的ip地址
在手机端打开浏览器就可以访问上面的页面了,就可以实现同步效果了。
下面是简单的html布局文件
1 <h1>拼图游戏</h1> 2 <div> <button id="btn">开始</button></div> 3 <div class="imgbox" id="imgbox"> 4 <div class="box" data-index="0" style="top:0px;left:0px;background-position:0px 0px">0</div> 5 <div class="box" data-index="1" style="top:0px;left:100px;background-position:-100px 0px">1</div> 6 <div class="box" data-index="2" style="top:0px;left:200px;background-position:-200px 0px">2</div> 7 <div class="box" data-index="3" style="top:100px;left:0px;background-position:0px -100px">3</div> 8 <div class="box" data-index="4" style="top:100px;left:100px;background-position:-100px -100px">4</div> 9 <div class="box" data-index="5" style="top:100px;left:200px;background-position:-200px -100px">5</div> 10 <div class="box" data-index="6" style="top:200px;left:0px;background-position:0px -200px">6</div> 11 <div class="box" data-index="7" style="top:200px;left:100px;background-position:-100px -200px">7</div> 12 <div class="box" data-index="8" style="top:200px;left:200px;background-position:-200px -200px">8</div> 13 </div> 14 <div class="mask" id="maskbox"> 15 <div class="mask-info">成功</div> 16 </div>
注意这里需要加入移动端视口配置
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
下面是css简单的样式:
1 .imgbox{position:relative;width: 306px;height: 306px;margin:20px auto;border:2px solid #ccc;padding:2px;} 2 .box{position:absolute;width:100px;height:100px;border:1px solid #999;background-image:url(1.png);background-size: 300px 300px;transition: all .5s;} 3 #maskbox{display:none;position:absolute;top:0;left:0;bottom:0;right:0;background-color: rgba(0,0,0,.5);} 4 .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文件:
1 ;(function(){ 2 document.getElementById("btn").addEventListener("click",function(){ 3 //打散 4 console.info("开始") 5 //要交换元素的left,top值。 6 //例如:直接a,b元素的位置 7 //交换 10对元素的位置 8 for(var i = 1;i<20;i++){ 9 var a = Math.floor(Math.random()*1000) % 9; 10 var b = Math.floor(Math.random()*1000) % 9; 11 12 console.info(a,b); 13 if(a != b){ 14 //交换boxs[a] 与boxs[b] 15 // 16 var _left = boxs[a].style.left; 17 boxs[a].style.left = boxs[b].style.left; 18 boxs[b].style.left = _left; 19 20 var _top = boxs[a].style.top; 21 boxs[a].style.top = boxs[b].style.top; 22 boxs[b].style.top = _top; 23 24 var _index= boxs[a].getAttribute("data-index"); 25 boxs[a].setAttribute("data-index",boxs[b].getAttribute("data-index")); 26 boxs[b].setAttribute("data-index",_index); 27 } 28 } 29 30 }) 31 var maskbox = document.getElementById("maskbox"); 32 var boxs = document.querySelectorAll(".box"); 33 var imgBox = document.getElementById('imgbox'); 34 var info ={ 35 x:0,y:0,top:0,left:0 36 } 37 for (var i = 0; i < boxs.length; i++) { 38 boxs[i].addEventListener("touchstart",function(e){ 39 info.x = e.targetTouches[0].pageX; 40 info.y = e.targetTouches[0].pageY; 41 info.top = parseInt( this.style.top ); 42 info.left = parseInt( this.style.left ); 43 44 //缓存起点位置 给元素加了两个属性 45 this.oriLeft = info.left; 46 this.oriTop = info.top; 47 48 //不要动画 49 this.style.transition="none"; 50 51 }); 52 53 boxs[i].addEventListener("touchmove",function(e){ 54 //newTop - newY = top - Y 55 //newTop = top -y + newY 56 this.style["z-index"] = 1000; 57 var newTop = info.top - info.y + e.targetTouches[0].pageY; 58 var newLeft = info.left - info.x + e.targetTouches[0].pageX; 59 60 this.style.left = newLeft + "px"; 61 this.style.top = newTop + "px"; 62 63 }); 64 boxs[i].addEventListener("touchend",function(e){ 65 this.style.transition=" all .5s"; 66 this.style["z-index"] = 0; 67 //对每 个元素进行检测 68 // x > 元素的.offsetLeft && x <元素的.offsetLeft+ 100 69 // y > 元素的.offsetTop && x <元素的.offsetTop+ 100 70 var x = e.changedTouches[0].pageX -imgBox.offsetLeft , 71 y = e.changedTouches[0].pageY -imgBox.offsetTop; 72 console.info(x,y);//.targetTouches[0].pageX,e.targetTouches[0].pageY); 73 //通过当前 x,y来找到应该要交换的元素是哪个? 74 var obj = findSwtichBox(this,x,y); 75 76 if(obj === this) { //不要交换元素 77 //从哪里来就回到哪里去。 78 obj.style.left = obj.oriLeft +"px"; 79 obj.style.top = obj.oriTop +"px"; 80 } 81 else{ 82 swtichBoxs(this,obj); 83 setTimeout(function(){ 84 if( isOk() ){//完成了 85 //alert("ok"); 86 maskbox.style.display="block"; 87 88 } 89 },600) 90 91 } 92 console.info(obj); 93 }); 94 } 95 96 function isOk(){ 97 98 // 思路:对每一个box设置一个“序号”(data-index)属性。每次交换后,都检查一下当前的元素的顺序是否与成功的序号是一致的。 99 // 获取所有的元素的序号 100 var str =""; 101 for (var i = 0; i < boxs.length; i++) { 102 str += boxs[i].getAttribute("data-index"); 103 } 104 console.info(str); 105 return str == "012345678"; 106 107 } 108 //交换a,b元素的位置 109 function swtichBoxs(oriEle,targetEle){ 110 //debugger; 111 // var a = 10; 112 // var b = 20; 113 114 var _top = oriEle.oriTop; // var t = a; 115 oriEle.style.top = targetEle.style.top; // a = b; 116 targetEle.style.top = _top+"px"; // b = t; 117 118 //把targetEle的top设置为oriEle的oriTop; 119 var _left = oriEle.oriLeft; // var t = a; 120 oriEle.style.left = targetEle.style.left; // a = b; 121 targetEle.style.left = _left+"px"; // b = t; 122 //console.info(a); 123 //console.info(b); 124 // 125 //交换data-index值 126 var _index= oriEle.getAttribute("data-index"); 127 oriEle.setAttribute("data-index",targetEle.getAttribute("data-index")); 128 targetEle.setAttribute("data-index",_index); 129 130 } 131 //根据x,y的值,看当前的x,y落在box中的哪一个元素上。 132 function findSwtichBox(obj,x,y){ 133 //自己不参与检查 134 135 for (var i = 0; i < boxs.length; i++) { 136 if(obj !== boxs[i]){ 137 var t1 = x > boxs[i].offsetLeft && x < (boxs[i].offsetLeft+ 100); 138 var t2 = y > boxs[i].offsetTop && y < (boxs[i].offsetTop + 100); 139 if(t1 && t2 ){ 140 //console.info(boxs[i]); 找到目标 141 return boxs[i]; 142 } 143 } 144 145 } 146 return obj; //没有找到目标,即返回自己 147 } 148 })();