最近做的一個(gè)簡陋的手機(jī)端拼圖游戲，代碼簡單易懂，廢話不多說了，讓大家證明一切吧！
先看下效果圖:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><meta name="viewport" id="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"><style type="text/css">html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img{margin:0;padding:0}body{background: pink;}#picbox{width: 300px;height: 300px;background: url('img/300.jpg');position: relative;margin: 50px auto;}.pic{width: 97px;height: 97px;float: left;background: url('img/300.jpg');position: absolute;transition: all 0.5s ease 0s;}.controller{text-align: center;position: relative;}#times{position: absolute;color: red;top: 15px;left: 300px;font-size: 20px;}</style></head><body><div class='controller'><h1>拼圖游戲</h1><button id='go'>go</button><span id='times'></span></div><div id='picbox'><div class="pic" data-index='1' style='background-position:0px 0px;left:0px;top:0px;'></div><div class="pic" data-index='2' style='background-position:-100px 0px;left:100px;top:0px;'></div><div class="pic" data-index='3' style='background-position:-200px 0px;left:200px;top:0px;'></div><div class="pic" data-index='4' style='background-position:0px -100px;left:0px;top:100px;'></div><div class="pic" data-index='5' style='background-position:-100px -100px;left:100px;top:100px;'></div><div class="pic" data-index='6' style='background-position:-200px -100px;left:200px;top:100px;'></div><div class="pic" data-index='7' style='background-position:0px -200px;left:0px;top:200px;'></div><div class="pic" data-index='8' style='background-position:-100px -200px;left:100px;top:200px;'></div><div class="pic" data-index='9' style='background-position:-200px -200px;left:200px;top:200px;'></div></div><script>var picbox=document.getElementById('picbox');var pic=document.querySelectorAll('.pic');var picWidth=pic[0].offsetWidth;var picHeight=pic[0].offsetHeight;var picboxWidth=picbox.offsetWidth;var picboxHeight=picbox.offsetHeight;var go=document.getElementById('go');var times=document.getElementById('times');//定時(shí)。用于擴(kuò)展var dx,dy,newLeft,newtop,startTime,endTime;go.addEventListener('touchstart',function(){startTime=Date.parse(new Date()); //獲取到期1970年1月1日到當(dāng)前時(shí)間的毫秒數(shù)，這個(gè)方法不常見，這里為試用for (var i = 0; i < pic.length; i++) {pic[i].style.display="block"; //設(shè)置顯示拼圖，游戲開始}picbox.style.background="#fff";for(var i=0;i<20;i++){ //隨機(jī)打亂var a = Math.floor(Math.random()*9);var b = Math.floor(Math.random()*9);if(a != b){random(a,b);}}})for(var i=0;i<pic.length;i++){pic[i].addEventListener('touchstart',function(e){this.style.zIndex=100; //設(shè)置拖拽元素的z-index值，使其在最上面。dx=e.targetTouches[0].pageX-this.offsetLeft; //記錄觸發(fā)拖拽的水平狀態(tài)發(fā)生改變時(shí)的位置dy=e.targetTouches[0].pageY-this.offsetTop; //記錄觸發(fā)拖拽的垂直狀態(tài)發(fā)生改變時(shí)的位置this.startX=this.offsetLeft;//記錄當(dāng)前初始狀態(tài)水平發(fā)生改變時(shí)的位置this.startY=this.offsetTop;//offsetTop等取得的值與this.style.left獲取的值區(qū)別在于前者不帶px,后者帶pxthis.style.transition='none';});pic[i].addEventListener('touchmove',function(e){newLeft=e.targetTouches[0].pageX-dx; //記錄拖拽的水平狀態(tài)發(fā)生改變時(shí)的位置newtop=e.targetTouches[0].pageY-dy;if(newLeft<=-picWidth/2){ //限制邊界代碼塊，拖拽區(qū)域不能超出邊界的一半newLeft=-picWidth/2;}else if(newLeft>=(picboxWidth-picWidth/2)){newLeft=(picboxWidth-picWidth/2);}if(newtop<=-picHeight/2){newtop=-picWidth/2;}else if(newtop>=(picboxHeight-picHeight/2)){newtop=(picboxHeight-picHeight/2);}this.style.left=newLeft+'px';this.style.top=newtop+'px'; //設(shè)置目標(biāo)元素的left,top});pic[i].addEventListener('touchend',function(e){this.style.zIndex=0;this.style.transition='all 0.5s ease 0s'; //添加css3動(dòng)畫效果this.endX=e.changedTouches[0].pageX-dx;this.endY=e.changedTouches[0].pageY-dy; //記錄滑動(dòng)結(jié)束時(shí)的位置，與進(jìn)入元素對(duì)比，判斷與誰交換var obj=change(e.target,this.endX,this.endY); //調(diào)用交換函數(shù)if(obj==e.target){ //如果交換函數(shù)返回的是自己obj.style.left=this.startX+'px';obj.style.top=this.startY+'px';}else{ //否則var _left=obj.style.left;obj.style.left=this.startX+'px';this.style.left=_left;var _top=obj.style.top;obj.style.top=this.startY+'px';this.style.top=_top;var _index=obj.getAttribute('data-index');obj.setAttribute('data-index',this.getAttribute('data-index'));this.setAttribute('data-index',_index); //交換函數(shù)部分，可提取}});pic[i].addEventListener('transitionend',function(){if(isSuccess()){console.log('成功了！'); //此處監(jiān)聽事件有bug，會(huì)添加上多次事件。}else{// pic[i].removeEventListener('transitionend');}})}function change(obj,x,y){ //交換函數(shù)，判斷拖動(dòng)元素的位置是不是進(jìn)入到目標(biāo)原始1/2，這里采用絕對(duì)值得方式for(var i=0;i<pic.length;i++){ //還必須判斷是不是當(dāng)前原素本身。將自己排除在外if(Math.abs(pic[i].offsetLeft-x)<=picWidth/2&&Math.abs(pic[i].offsetTop-y)<=picHeight/2&&pic[i]!=obj)return pic[i]; }return obj; //返回當(dāng)前}function random(a,b){ //隨機(jī)打亂函數(shù)，其中交換部分，可以提取出來封裝var aEle = pic[a];var bEle = pic[b];var _left ;_left = aEle.style.left;aEle.style.left = bEle.style.left;bEle.style.left = _left;var _top ;_top = aEle.style.top;aEle.style.top = bEle.style.top;bEle.style.top = _top;var _index;_index = aEle.getAttribute("data-index");aEle.setAttribute("data-index",bEle.getAttribute("data-index") );bEle.setAttribute("data-index",_index);}function isSuccess(){ //判斷成功標(biāo)準(zhǔn)var str=''for(var i=0;i<pic.length;i++){str+=pic[i].getAttribute('data-index');}if(str=='123456789'){return true;}return false;}var time;setInterval(function(){ //定時(shí)函數(shù)，額。。。待續(xù)。endTime=Date.parse(new Date());times.innerHTML=(endTime-startTime)/1000||'';},1000)</script></body></html>代碼還有很多可以優(yōu)化的地方，比如增加定時(shí)功能，游戲成功效果和聲音特效，手指滑動(dòng)的自定義事件，左劃右劃，上劃下劃，進(jìn)一步的封裝等，額，這樣一想又忍不住想試試敲敲代碼了。。后續(xù)小編在給大家持續(xù)更新吧，今天先到這里，希望大家能夠喜歡！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
