JS快速實現移動端拼圖游戲
編輯：關於JavaScript
最近做的一個簡陋的手機端拼圖游戲，代碼簡單易懂，廢話不多說了，讓大家證明一切吧！
先看下效果圖:
<!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');//定時。用於擴展
var dx,dy,newLeft,newtop,startTime,endTime;
go.addEventListener('touchstart',function(){
startTime=Date.parse(new Date()); //獲取到期1970年1月1日到當前時間的毫秒數，這個方法不常見，這裡為試用
for (var i = 0; i < pic.length; i++) {
pic[i].style.display="block"; //設置顯示拼圖，游戲開始
}
picbox.style.background="#fff";
for(var i=0;i<20;i++){ //隨機打亂
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; //設置拖拽元素的z-index值，使其在最上面。
dx=e.targetTouches[0].pageX-this.offsetLeft; //記錄觸發拖拽的水平狀態發生改變時的位置
dy=e.targetTouches[0].pageY-this.offsetTop; //記錄觸發拖拽的垂直狀態發生改變時的位置
this.startX=this.offsetLeft;//記錄當前初始狀態水平發生改變時的位置
this.startY=this.offsetTop;//offsetTop等取得的值與this.style.left獲取的值區別在於前者不帶px,後者帶px
this.style.transition='none';
});
pic[i].addEventListener('touchmove',function(e){
newLeft=e.targetTouches[0].pageX-dx; //記錄拖拽的水平狀態發生改變時的位置
newtop=e.targetTouches[0].pageY-dy;
if(newLeft<=-picWidth/2){ //限制邊界代碼塊，拖拽區域不能超出邊界的一半
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'; //設置目標元素的left,top
});
pic[i].addEventListener('touchend',function(e){
this.style.zIndex=0;
this.style.transition='all 0.5s ease 0s'; //添加css3動畫效果
this.endX=e.changedTouches[0].pageX-dx;
this.endY=e.changedTouches[0].pageY-dy; //記錄滑動結束時的位置，與進入元素對比，判斷與誰交換
var obj=change(e.target,this.endX,this.endY); //調用交換函數
if(obj==e.target){ //如果交換函數返回的是自己
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); //交換函數部分，可提取
}
});
pic[i].addEventListener('transitionend',function(){
if(isSuccess()){
console.log('成功了！'); //此處監聽事件有bug，會添加上多次事件。
}else{
// pic[i].removeEventListener('transitionend');
}
})
}
function change(obj,x,y){ //交換函數，判斷拖動元素的位置是不是進入到目標原始1/2，這裡采用絕對值得方式
for(var i=0;i<pic.length;i++){ //還必須判斷是不是當前原素本身。將自己排除在外
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; //返回當前
}
function random(a,b){ //隨機打亂函數，其中交換部分，可以提取出來封裝
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(){ //判斷成功標准
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(){ //定時函數，額。。。待續。
endTime=Date.parse(new Date());
times.innerHTML=(endTime-startTime)/1000||'';
},1000)
</script>
</body>
</html>
代碼還有很多可以優化的地方，比如增加定時功能，游戲成功效果和聲音特效，手指滑動的自定義事件，左劃右劃，上劃下劃，進一步的封裝等，額，這樣一想又忍不住想試試敲敲代碼了。。後續小編在給大家持續更新吧，今天先到這裡，希望大家能夠喜歡！
小編推薦
熱門推薦