JS快速实现移动端拼图游戏


Posted in Javascript onSeptember 05, 2016

最近做的一个简陋的手机端拼图游戏,代码简单易懂,废话不多说了,让大家证明一切吧!

先看下效果图:

JS快速实现移动端拼图游戏

<!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>

代码还有很多可以优化的地方,比如增加定时功能,游戏成功效果和声音特效,手指滑动的自定义事件,左划右划,上划下划,进一步的封装等,额,这样一想又忍不住想试试敲敲代码了。。后续小编在给大家持续更新吧,今天先到这里,希望大家能够喜欢!

Javascript 相关文章推荐
jquery tools之tabs 选项卡/页签
Jul 25 Javascript
将两个div左右并列显示并实现点击标题切换内容
Oct 22 Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
Aug 07 Javascript
原生JavaScript实现滚动条效果
Mar 24 Javascript
新入门node.js必须要知道的概念(必看篇)
Aug 10 Javascript
Bootstrap精简教程中秋大放送
Sep 15 Javascript
layer弹窗插件操作方法详解
May 19 Javascript
浅谈gulp创建完整的项目流程
Dec 20 Javascript
vue技术分享之你可能不知道的7个秘密
Apr 09 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
Mar 05 Javascript
layui复选框的全选与取消实现方法
Sep 02 Javascript
openlayers 3实现车辆轨迹回放
Sep 24 Javascript
jQuery实现的tab标签切换效果示例
Sep 05 #Javascript
Vue.js每天必学之构造器与生命周期
Sep 05 #Javascript
Js查找字符串中出现次数最多的字符及个数实例解析
Sep 05 #Javascript
JS查找字符串中出现次数最多的字符
Sep 05 #Javascript
node网页分段渲染详解
Sep 05 #Javascript
js对象浅拷贝和深拷贝详解
Sep 05 #Javascript
JS实现隐藏同级元素后只显示JS文件内容的方法
Sep 04 #Javascript
You might like
php+mysql分页代码详解
2008/03/27 PHP
php数组转成json格式的方法
2015/03/09 PHP
php实现购物车功能(以大苹果购物网为例)
2017/03/09 PHP
Javascript 通过json自动生成Dom的代码
2010/04/01 Javascript
JQuery实现当鼠标停留在某区域3秒后自动执行
2014/09/09 Javascript
提升PHP安全:8个必须修改的PHP默认配置
2014/11/17 Javascript
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
2014/12/15 Javascript
jQuery调用ajax请求的常见方法汇总
2015/03/24 Javascript
js获取form的方法
2015/05/06 Javascript
JavaScript编程中window的location与history对象详解
2015/10/26 Javascript
jQuery实现的AJAX简单弹出层效果代码
2015/11/26 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
2016/04/29 Javascript
浅谈javascript中的数据类型转换
2016/12/27 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
2017/05/02 Javascript
JS库之Waypoints的用法详解
2017/09/13 Javascript
基于VUE.JS的移动端框架Mint UI的使用
2017/10/11 Javascript
如何能分清npm cnpm npx nvm
2019/01/17 Javascript
微信小程序开发打开另一个小程序的实现方法
2020/05/17 Javascript
Python二维码生成库qrcode安装和使用示例
2014/12/16 Python
python使用webbrowser浏览指定url的方法
2015/04/04 Python
详解Python中用于计算指数的exp()方法
2015/05/14 Python
使用python和Django完成博客数据库的迁移方法
2018/01/05 Python
树莓派+摄像头实现对移动物体的检测
2019/06/22 Python
简单了解python变量的作用域
2019/07/30 Python
Python 根据数据模板创建shapefile的实现
2019/11/26 Python
CSS3混合模式mix-blend-mode/background-blend-mode简介
2018/03/15 HTML / CSS
CSS3实现文字描边的2种方法(小结)
2020/02/14 HTML / CSS
美国中小型企业领先的办公家具供应商:Office Designs
2016/11/26 全球购物
迷你唐卡软皮鞋:Minnetonka Moccasin
2018/05/01 全球购物
英语教师自荐信
2014/05/26 职场文书
艺术学院毕业生求职信
2014/07/09 职场文书
指导教师推荐意见
2015/06/05 职场文书
研讨会致辞
2015/07/31 职场文书
写作技巧:如何撰写一份优秀的营销策划书
2019/08/13 职场文书
Python图片处理之图片裁剪教程
2021/05/27 Python
详解Python中__new__方法的作用
2022/03/31 Python