移动端的拼图游戏

最新推荐文章于 2022-04-16 07:01:28 发布

weixin_34112900

最新推荐文章于 2022-04-16 07:01:28 发布

阅读量314

点赞数 1

文章标签： javascript 游戏移动开发 ViewUI

原文链接：http://www.cnblogs.com/starryqian/p/6085684.html

版权

在大家眼里，做开发都是比较枯燥无味的事情，但是开发不全是枯燥无味的；也很多的乐趣。今天就给大家分享一下移动端的拼图游戏，希望你们在娱乐中学到新的知识。

移

在开始之前，我们首先来总结一下移动端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>

注意这里需要加入移动端视口配置

下面是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     })();