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 ajax提交表单数据的两种方式
Nov 24 Javascript
Javascript图像处理—为矩阵添加常用方法
Dec 27 Javascript
JQuery动画与特效实例分析
Feb 02 Javascript
js实现鼠标感应向下滑动隐藏菜单的方法
Feb 20 Javascript
javascript实现一个简单的弹出窗
Feb 22 Javascript
基于Javascript实现返回顶部按钮
Feb 29 Javascript
JS匿名函数类生成方式实例分析
Nov 26 Javascript
Node.js  事件循环详解及实例
Aug 06 Javascript
JavaScript实现的数字与字符串转换功能示例
Aug 23 Javascript
jquery实现图片跟随鼠标的实例
Oct 17 jQuery
vue视图不更新情况详解
May 16 Javascript
微信小程序上传帖子的实例代码(含有文字图片的微信验证)
Jul 11 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/04/17 PHP
php入门学习知识点八 PHP中for循环基本应用之九九乘法口绝表
2011/07/14 PHP
PHP常用函数和常见疑难问题解答
2014/03/05 PHP
CI框架整合widget(页面格局)的方法
2016/05/17 PHP
Laravel实现自定义错误输出内容的方法
2016/10/10 PHP
IE6下出现JavaScript未结束的字符串常量错误的解决方法
2010/11/21 Javascript
JQuery页面的表格数据的增加与分页的实现
2013/12/10 Javascript
jQuery切换所有复选框选中状态的方法
2015/07/02 Javascript
angular.bind使用心得
2015/10/26 Javascript
基于Node.js的强大爬虫 能直接发布抓取的文章哦
2016/01/10 Javascript
微信小程序 css使用技巧总结
2017/01/09 Javascript
Vue.directive自定义指令的使用详解
2017/03/10 Javascript
vue 2.0组件与v-model详解
2017/03/27 Javascript
JavaScript简单实现合并两个Json对象的方法示例
2017/10/16 Javascript
js中apply和Math.max()函数的问题及区别介绍
2018/03/27 Javascript
微信小程序云开发实现云数据库读写权限
2019/05/17 Javascript
微信小程序实现列表的横向滑动方式
2020/07/15 Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
2020/07/31 Javascript
在Python下利用OpenCV来旋转图像的教程
2015/04/16 Python
Python读取网页内容的方法
2015/07/30 Python
Pycharm设置去除显示的波浪线方法
2018/10/28 Python
django 类视图的使用方法详解
2019/07/24 Python
简单瞅瞅Python vars()内置函数的实现
2019/09/27 Python
Python hashlib模块加密过程解析
2019/11/05 Python
使用jupyter Nodebook查看函数或方法的参数以及使用情况
2020/04/14 Python
Python 实现RSA加解密文本文件
2020/12/30 Python
一款利用纯css3实现的超炫3D表单的实例教程
2014/12/01 HTML / CSS
屈臣氏越南官网:Watsons越南
2021/01/14 全球购物
创业者是否需要商业计划书?
2014/02/07 职场文书
缅怀革命先烈演讲稿
2014/05/14 职场文书
奥巴马就职演讲稿
2014/05/15 职场文书
学校党委干部个人对照检查材料思想汇报
2014/10/09 职场文书
任命通知范文
2015/04/21 职场文书
关于感恩的素材句子(38句)
2019/11/11 职场文书
使用pytorch实现线性回归
2021/04/11 Python
CSS 制作波浪效果的思路
2021/05/18 HTML / CSS