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 相关文章推荐
JavaScript移除数组元素减少长度的方法
Sep 05 Javascript
Javascript学习笔记之函数篇(五) : 构造函数
Nov 23 Javascript
AngularJS中的Directive自定义一个表格
Jan 25 Javascript
实例讲解jQuery EasyUI tree中state属性慎用
Apr 01 Javascript
js老生常谈之this,constructor ,prototype全面解析
Apr 05 Javascript
Bootstrap3学习笔记(三)之表格
May 20 Javascript
jQuery删除节点用法示例(remove方法)
Sep 08 Javascript
JS中用childNodes获取子元素换行会产生一个子元素
Dec 08 Javascript
微信小程序实现顶部选项卡(swiper)
Jun 19 Javascript
AngularJS日期格式化常见操作实例分析
May 17 Javascript
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
May 30 Javascript
uniapp与webview之间的相互传值的实现
Jun 29 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开发中常用的字符串操作函数
2011/02/08 PHP
一组PHP加密解密函数分享
2014/06/05 PHP
PHP中file_exists()判断中文文件名无效的解决方法
2014/11/12 PHP
php使用memcoder将视频转成mp4格式的方法
2015/03/12 PHP
PHP 9 大缓存技术总结
2015/09/17 PHP
php实现统计二进制中1的个数算法示例
2018/01/23 PHP
jQuery 动态酷效果实现总结
2009/12/27 Javascript
jQuery实现的文字hover颜色渐变效果实例
2016/02/20 Javascript
js弹出框、对话框、提示框、弹窗实现方法总结(推荐)
2016/05/31 Javascript
微信小程序 devtool隐藏的秘密
2017/01/21 Javascript
js编写简单的聊天室功能
2017/08/17 Javascript
node.js+captchapng+jsonwebtoken实现登录验证示例
2017/08/17 Javascript
vue2.0项目实现路由跳转的方法详解
2018/06/21 Javascript
Vue.js实现开发购物车功能的方法详解
2019/02/22 Javascript
vue项目中使用fetch的实现方法
2019/04/25 Javascript
基于JavaScript判断两个对象内容是否相等
2020/01/10 Javascript
[03:02]2014DOTA2西雅图邀请赛 让队员自己告诉你DK NAVI备战情况
2014/07/08 DOTA
python判断windows隐藏文件的方法
2014/03/21 Python
Python基类函数的重载与调用实例分析
2015/01/12 Python
Python中有趣在__call__函数
2015/06/21 Python
Python使用迭代器捕获Generator返回值的方法
2017/04/05 Python
在python中创建指定大小的多维数组方式
2019/11/28 Python
Pytorch的mean和std调查实例
2020/01/02 Python
python实现超级玛丽游戏
2020/03/18 Python
python实现凯撒密码、凯撒加解密算法
2020/06/11 Python
python openssl模块安装及用法
2020/12/06 Python
Sunglasses Shop荷兰站:英国最大的太阳镜独立在线零售商和供应商
2017/01/08 全球购物
银行实习生的自我评价
2014/01/13 职场文书
国旗下演讲稿
2014/05/08 职场文书
文明市民先进事迹
2014/05/15 职场文书
禁止高声喧哗的标语
2014/06/11 职场文书
解除劳动合同证明书模板
2014/11/20 职场文书
教师个人年终总结
2015/02/11 职场文书
2015年暑期见闻
2015/07/14 职场文书
解析高可用Redis服务架构分析与搭建方案
2021/06/20 Redis
java代码实现空间切割
2022/01/18 Java/Android