jQuery之-拼图小游戏
在线实例:http://lgy.1zwq.com/puzzleGame/
源代码思路分析:
【一】如何生成图片网格,我想到两种方法:
(1)把这张大图切成16张小图,然后用img标签的src
(2)只有一张大图,然后每个元素的背景图用css的background-position进行切割定位,这样就需要16个数组[0,0],[-150,0],[-300,0]..........(我采用这种)
【二】图片背景定位数组与布局定位数组
在选择了使用CSS定位切图,就需要生成数据。
需要的css背景 定位数组为:[0,0],[-150,0],[-300,0],[-450,0],
[0,-150],[-150,-150],[-300,-150],[-450,-150],
[0,-300],[-150,-300],[-300,-300],[-450,-300],
[0,-450],[-150,-450],[-300,-450],[-450,-450]
它们当中都用到了[0,-150,-300,-450]其中的值(就是我定义图片高,宽150的倍数值),所以就利用这个值通过for(){}自动生成数组
//this.nCol在这里是4 --- 因为我的拼图是4*4
// this.nArea是150,是每张图片的宽,高(600px/4)--大图是600*600
var l = [],
p = [];
for(var n=0;n<this.nCol;n++){
l.push(n*(this.nArea+1)); //生成[0,151,302,453] 网格的布局定位数组,因为我的效果需要边框(图中的绿色边框),所以与css背景定位数组就不一样了
p.push(-n*this.nArea); // 生成了[0,-150,-300,-450]就是上面说的,CSS背景定位值
}
for(var i=0;i<this.nLen;i++){ // this.nLen 是为 16
var t = parseInt(i/this.nCol),
k = i - this.nCol*t,
aP = [],
aL = [];
aP.push(p[k],p[t],i); //这里我给css背景定位数组额外加了i,是为第3步判断用的,不需要拿来设置css属性的,我把它设置为标签的属性里[bg-i]
aL.push(l[k],l[t]);
this.aBgp[i] = aP;
this.aLayout[i] = aL;
}
【三】判断是否完成
第二个元素(div)应用了css背景定位 this.aBgp[1] (值为[-150,0,1]) ,而随机分配的布局定位假如是this.aLayout[3] (这里的3是随机生成的)(值为[453,0]),那么left:453px,top:0;
挪动这个元素,改变的是它的letf,top值,而不是本身结构的顺序,获取这个元素的left,top的值(假如是挪到left:151px,top:0),然后拿来与this.aLayout[1]的值[151,0](里面的1索引,就是本身标签属性的[bg-i]=1也是this.aBgp[1] 的索引)判断,相等就说明这个元素挪动后的位置是正确。
详细代码:
/*
version:2.0
*/
function GyPuzzleGame(option){
this.target = $(option.target);
this.data = option.data; //图片数据
this.opt = option;
this.nLen = option.count; //多少张拼图
this.aColLayout = option.aColLayout || [0,151,302,453];//布局横向数组
this.aRowLayout = option.aRowLayout || [0,151];//布局竖向数组
this.aColBgp = option.aColBgp || [0,-150,-300,-450];//布局横向数组
this.aRowBgp = option.aRowBgp || [0,-150];//布局竖向数组 this.nCol = this.aColLayout.length;
this.nRow = this.aRowLayout.length; this.aLayout = []; //布局数组
this.aBgp = []; //css背景定位数组
this.init();
}
GyPuzzleGame.prototype = {
getRand:function(a,r){
var arry = a.slice(0),
newArry = [];
for(var n=0;n<r;n++){
var nR = parseInt(Math.random()*arry.length);
newArry.push(arry[nR]);
arry.splice(nR,1);
}
return newArry;
},
setPos:function(){
for(var i=0;i<this.nLen;i++){
var t = parseInt(i/this.nCol),
l = i - this.nCol*t,
aP = [],
aL = [];
aP.push(this.aColBgp[l],this.aRowBgp[t],i);
aL.push(this.aColLayout[l],this.aRowLayout[t]);
this.aBgp[i] = aP;
this.aLayout[i] = aL;
}
},
isPass:function(item){
var _that = this,
is = 0;
item.each(function(){
var l = parseInt($(this).css('left')),
t = parseInt($(this).css('top')),
i = parseInt($(this).attr('data-bgi')); if(l==_that.aLayout[i][0]&&t==_that.aLayout[i][1]){
is ++;
}
});
return is;
},
createDom:function(){
var layout = this.getRand(this.aLayout,this.nLen);
// console.log(layout);
for(var n=0;n<this.nLen;n++){
var t = parseInt(n/this.nCol),
l = n - this.nCol*t;
var html = $('<div data-bgi="'+this.aBgp[n][2]+'" class="puzzle_list"></div>').
css({'left':layout[n][0]+'px',
'top':layout[n][1]+'px',
'background-image':'url('+this.data+')',
'background-position':this.aBgp[n][0]+'px'+' '+this.aBgp[n][1]+'px'
}); this.target.append(html);
}
},
move:function(){
var $div = this.target.find('.puzzle_list'),
_that = this;
var hasElem = function(){
var t = false;
$div.each(function(){
if($(this).hasClass("on")){
t = true;
}
});
return t;
};
// click
$div.click(function(){
var $this = $(this);
if(hasElem()&&!$this.hasClass("on")){
var index = $('.on').index();
if($div.eq(index).is(':animated')||$this.is(':animated')){
return false;
}
var l = $div.eq(index).position().left,
t = $div.eq(index).position().top,
myl = $this.position().left,
myt = $this.position().top; $(this).animate({'left':l,'top':t});
$div.eq(index).css({'z-index':'1'}).animate({'left':myl,'top':myt},function(){
$(this).removeClass("on");
$(this).find('span').remove();
$(this).css({'z-index':'0'});
if(_that.isPass($div) == _that.nLen){
if(typeof _that.opt.success == 'function'){
_that.opt.success({target:_that.target});
}
}
});
}
else {
if($this.hasClass("on")){
$this.removeClass("on");
$this.find('span').remove();
}
else {
$this.addClass("on").append("<span></span>");
}
} }); },
init:function(){
// 设置CSS背景定位与元素布局数组
this.setPos();
// 创建元素
this.createDom();
// 挪动图片
this.move();
}
}
//实例调用
new GyPuzzleGame({
'data':'images/03.jpg',
'target':'#pA',
'count':8,
'success':function(opt){
opt.target.append('<div class="puzzle_mask"></div><div class="puzzle_pass">恭喜过关</div>');
}
});
jQuery之-拼图小游戏的更多相关文章
- jQuery实现拼图小游戏
小熊维尼拼图 2017-07-23 ...
- 在HTML页面中有jQuery实现实现拼图小游戏
1.用jQuery实现拼图小游戏 2.首先获得td的点击事件.再进行交换位置 3.下面这种仅供参考 4.下面这些是HTMl标签 当这个世界变得越来越复杂的时候,内心最需保持一份简单一份纯真:
- jQuery拼图小游戏
jQuery拼图小游戏 最后样式 核心代码部分 <script type="text/javascript" > $(function () { $("td& ...
- JavaScript版拼图小游戏
慕课网上准备开个新的jQuery教程,花了3天空闲时间写了一个Javascript版的拼图小游戏,作为新教程配套的分析案例 拼图游戏网上有不少的实现案例了,但是此源码是我自己的实现,所以不做太多的比较 ...
- 使用NGUI实现拖拽功能(拼图小游戏)
上一次用UGUI实现了拼图小游戏,这次,我们来用NGUI来实现 实现原理 NGUI中提供了拖拽的基类UIDragDropItem,所以我们要做的就是在要拖拽的图片上加一个继承于该类的脚本,并实现其中的 ...
- 仿苹果电脑任务栏菜单&&拼图小游戏&&模拟表单控件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- swift 拼图小游戏
依据这位朋友的拼图小游戏改编 http://tangchaolizi.blog.51cto.com/3126463/1571616 改编主要地方是: 原本着我仁兄的代码时支持拖动小图块来移动的,我參照 ...
- 教你用Python自制拼图小游戏,一起来制作吧
摘要: 本文主要为大家详细介绍了python实现拼图小游戏,文中还有示例代码介绍,感兴趣的小伙伴们可以参考一下. 开发工具 Python版本:3.6.4 相关模块: pygame模块: 以及一些Pyt ...
- 打造专属自己的html5拼图小游戏
最近公司刚好有个活动是要做一版 html5的拼图小游戏,于是自己心血来潮,自己先实现了一把,也算是尝尝鲜了.下面就把大体的思路介绍一下,希望大家都可以做出一款属于自己的拼图小游戏,必须是更炫酷,更好玩 ...
随机推荐
- boost单元测试框架
头文件: #include <boost/test/unit_test.hpp> 编译加:-lboost_unit_test_framework 单元测试: 需要定义BOOST_TEST_ ...
- HTML5游戏开发系列教程8(译)
原文地址:http://www.script-tutorials.com/html5-game-development-lesson-8/ 这是我们最新一篇HTML5游戏开发系列文章.我们将继续使用c ...
- memcache服务端与客户端的安装部署
1)安装memcached前需要先安装libevent [root@aliyun tools]# tar -zxf libevent-1.4.13-stable.tar.gz [root@aliyun ...
- Django-session中间件源码简单分析
Django-session中间件源码简单分析 settings里有关中间件的配置 MIDDLEWARE = [ 'django.middleware.security.SecurityMiddlew ...
- 记Tfs2010 Tfs_Warehouse路径配置更新
继上一次tfs数据库迁移问题续. Tfs数据库迁移成功后遗留了部分问题,本次记录问题处理过程: 原服务器地址10.58.8.231,迁移至新服务器10.58.1.230后TFS管理控制台中 应用层 – ...
- java poi解析excel日期为数字的问题
这个数字是什么呢?是以1900年为原点,到2015年8月21日,之间经过的天数. 知道这个后,就很好处理了,我们拿到1900年的日期,在这个日期上加上42237天即可.如下: Calendar cal ...
- Python的socket网络编程(一)
(注:本文部分内容摘自互联网,由于作者水平有限,不足之处,还望留言指正.) 先写首诗,抒抒情. 一. 食堂.校园 见过你那么多次 卑微的我 只敢偷偷瞄上一眼 心扑通 扑通 春天真好 不是么 二. 学子 ...
- lightGallery 一个视屏不播放 解决方法
这次使用了lightGallery,感觉还不错.样式比较美观,并且支持响应式. 使用过程中,我遇到了下面的问题: 当我 .picsgallery里面只有一个 .gItem的时候.点击弹出幻灯片,再点击 ...
- Decker hello world
Docker 允许在容器内运行应用程序, 使用 docker run 命令来在容器内运行一个应用程序. 输出Hello world root@ranxf:/home/ranxf# docker run ...
- 【MSDN_C#】C#版本介绍
C# 1,Visual Studio .NET 2002 首次发布 C# 1.1,Visual Studio .NET 2003 #line 杂注和 xml 文档注释 C# 2,Visual Stud ...