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

2024-10-12 06:22:37

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

先看下效果图:

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

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

js实现九宫格拼图小游戏

效果如下: 代码如下: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>九宫格拼图</title> <style> *{ padding: 0; margin: 0; border: 0; } /* *是通配符,给所有的元素去掉默认样式,因为有的浏览器会默认加上一些样式,这可能会给布局带来问题 */ body{ width: 100
js+html5实现可在手机上玩的拼图游戏

本文实例讲述了js+html5实现可在手机上玩的拼图游戏.分享给大家供大家参考.具体如下: 手机版的拼图.pc上用Chrome 或者 Firefox var R=(function(){ /*右边菜单*/ function fa(){ if(mo.style.right!='0px'){ mo.style.right='0px'; mco.rcss('','cmck'); }else{ mo.style.right='-100px'; mco.rcss('cmck',''); } } on(mc
基于javascript实现九宫格大转盘效果

本文实例为大家分享了js实现幸运抽奖九宫格大转盘效果,供大家参考,具体内容如下实现代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>九宫格大转盘</title> <style type="text/css"> /*reset*/ *{ padding:0; margin:0} body{ height:
JS 拼图游戏面向对象，注释完整。

在线演示 http://img.jb51.net/online/pintu/pintu.htm 复制代码代码如下: <html> <head> <title>JS拼图游戏</title> <style> body{ font-size:9pt; } table{ border-collapse: collapse; } input{ width:20px; } </style> </he
javascript实现九宫格相加数值相等

本文实例介绍了javascript实现九宫格的对应方法,分享给大家供大家参考,具体内容如下实现思路: 1.每个格子输入的数值必须为数字: 2.输入数值不能重复: 3.输入数值不能小于1或大于9: 4.数值不能为空: 5.相加方式共8个,分别为横向三个.纵向三个.两条对角线两个值.详情如下: 解释: 以每个格子所标记序号为标识: 横向三个值:0-2,3-4,6-8: 纵向三个值:[0,3,6].[1,4,7].[2,5,8]: 对角线两个值:[0,4,8].[2,4,6] 实现过程: 很简单,
javascript解三阶幻方（九宫格）

谜题:三阶幻方, 试将1~9这9个不同整数填入一个3×3的表格,使得每行.每列以及每条对角线上的数字之和相同. 策略:穷举搜索.列出所有的整数填充方案,然后进行过滤. 亮点为递归函数getPermutation的设计,文章最后给出了几个非递归算法 // 递归算法,很巧妙,但太费资源 function getPermutation(arr) { if (arr.length == 1) { return [arr]; } var permutation = []; for (var i = 0;
JS模仿手机端九宫格登录功能实现代码

最近没有项目做,闲来无事写了一个小demo,特此分享到我们平台,供大家参考下,本文写的不好还请各位大侠见谅! 功能及方法逻辑都注释在代码中.所以麻烦大家直接看代码. 效果如下: 话不多说直接上代码: js部分: 首先我们先画出两个九宫格,一个用于登录和首次设置滑动密码使用,另个用于再次设置滑动密码,用于与第一次输入的滑动密码进行对比,判断两次密码是否一致第一个九宫格 $("#gesturepwd").GesturePasswd({ backgroundColor: "#25
javascript+canvas制作九宫格小程序

js核心代码复制代码代码如下: /* *canvasid:html canvas标签id *imageid:html img 标签id *gridcountX:x轴图片分割个数 *gridcountY:y轴图片分割个数 *gridspace:宫格空隙 *offsetX:x*y宫格相对canvas(0,0)X坐标偏移量 **offsetX:x*y宫格相对canvas(0,0)Y坐标偏移量 *isanimat:是否启用动画显示 */ function ImageGrid(can
js实现九宫格图片半透明渐显特效的方法

本文实例讲述了js实现九宫格图片半透明渐显特效的方法.分享给大家供大家参考.具体实现方法如下: 复制代码代码如下: <html> <title>九宫格图片半透明渐显效果</title> <body> <STYLE type=text/css>.invisible { FILTER: alpha(opacity=0) } </STYLE> <SCRIPT language=JavaScript1.2> <!-- f
JS写的数字拼图小游戏代码[学习参考]

复制代码代码如下: <html> <head> <title>拼图</title> <style> td.numTd{ width : 20px ; height : 20px ; } div.numDiv{ width : 100% ; height : 100% ; background-color : #000 ; color : #FFF ; text-align : center ; vertical-align : middle ;

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

相关推荐

随机推荐