JS快速實(shí)現(xiàn)移動(dòng)端拼圖游戲
更新時(shí)間：2016年09月05日 09:33:49 作者：心里的海
最近開發(fā)一個(gè)有關(guān)手機(jī)端拼圖游戲，是基于js實(shí)現(xiàn)的。今天小編抽時(shí)間把具體實(shí)現(xiàn)代碼分享到腳本之家平臺(tái)供大家參考，對(duì)js移動(dòng)端拼圖游戲感興趣的朋友參考下吧
最近做的一個(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,后者帶px
this.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ù)更新吧，今天先到這里，希望大家能夠喜歡！
您可能感興趣的文章:
- JS 拼圖游戲 面向?qū)ο螅⑨屚暾?/a>
- js+html5實(shí)現(xiàn)可在手機(jī)上玩的拼圖游戲
- JS實(shí)現(xiàn)拼圖游戲
- jQuery+vue.js實(shí)現(xiàn)的九宮格拼圖游戲完整實(shí)例【附源碼下載】
- 基于javascript制作經(jīng)典傳統(tǒng)的拼圖游戲
- 基于Vue.js實(shí)現(xiàn)數(shù)字拼圖游戲
- 利用原生的JavaScript實(shí)現(xiàn)簡單拼圖游戲
- javascript結(jié)合Flexbox簡單實(shí)現(xiàn)滑動(dòng)拼圖游戲
- 基于JS實(shí)現(xiàn)簡單滑塊拼圖游戲
- 使用js編寫實(shí)現(xiàn)拼圖游戲
相關(guān)文章
js defineSetter -給js的 "class"自動(dòng)增加一個(gè)set的屬性(方法)
js defineSetter -給js的 "class"自動(dòng)增加一個(gè)set的屬性(方法)...2007-06-06
JS實(shí)現(xiàn)瀏覽器點(diǎn)擊下載圖片功能案例分析【親測(cè)有效】
這篇文章主要介紹了JS實(shí)現(xiàn)瀏覽器點(diǎn)擊下載圖片功能,對(duì)比分析了同源與不同源兩種解決方案,并以實(shí)際案例形式分析了不同源情況下針對(duì)文件點(diǎn)擊下載的具體實(shí)現(xiàn)技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2023-04-04
javascript實(shí)現(xiàn)發(fā)送短信驗(yàn)證碼案例
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)發(fā)送短信驗(yàn)證碼案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
javascript實(shí)現(xiàn)自由編輯圖片代碼詳解
這篇文章主要介紹了javascript實(shí)現(xiàn)自由編輯圖片代碼詳解，在當(dāng)下的的前端項(xiàng)目中，圖片功能可以說是非常常見的，圖片的展示、圖片的裁剪編輯、圖片的上傳等，那么我們的項(xiàng)目便來了個(gè)需求。,需要的朋友可以參考下2019-06-06
一道超經(jīng)典js面試題Foo.getName()的故事
Foo.getName算是一道比較老的面試題了,大致百度了一下在17年就有相關(guān)文章在介紹它,下面這篇文章主要給大家介紹了關(guān)于一道超經(jīng)典js面試題Foo.getName()的相關(guān)資料,需要的朋友可以參考下2022-03-03
簡單獲取鍵盤的KeyCode...2006-09-09
理解JavaScript中的適配器模式Adapter?Pattern
這篇文章主要介紹了理解JavaScript中的適配器模式,適配器模式即Adapter?Pattern，是作為兩個(gè)不兼容的接口之間的橋梁。這種類型的設(shè)計(jì)模式屬于結(jié)構(gòu)型模式，下文更多相關(guān)介紹需要的小伙伴可以參考一下2022-04-04
EasyUi中的Combogrid 實(shí)現(xiàn)分頁和動(dòng)態(tài)搜索遠(yuǎn)程數(shù)據(jù)
jquery easyui中的combogrid比較特殊，算是combo和grid的組合，combogrid結(jié)合一個(gè)可編輯的文本框和下拉數(shù)據(jù)網(wǎng)格面板，可以讓用戶迅速找到并選擇，又可以進(jìn)行搜索，展示與當(dāng)前輸入的字符相匹配的數(shù)據(jù)。下面給大家介紹EasyUi中的Combogrid 實(shí)現(xiàn)分頁和動(dòng)態(tài)搜索遠(yuǎn)程數(shù)據(jù)2016-04-04
本文給大家介紹的是javascript中的靜態(tài)屬性和原型屬性，并附上示例分析，十分的實(shí)用，有需要的小伙伴可以參考下。2015-05-05
使用JS+XML（數(shù)據(jù)島）實(shí)現(xiàn)分頁）
使用JS+XML（數(shù)據(jù)島）實(shí)現(xiàn)分頁）...2007-01-01