jQuery制作拼图小游戏

 这篇文章主要介绍了jQuery制作拼图小游戏,思路与源码都分享给大家,需要的朋友可以参考下

 
 

源代码思路分析:

【一】如何生成图片网格,我想到两种方法:

   (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>');
}
});

时间: 2024-12-20 17:01:02

jQuery制作拼图小游戏的相关文章

jQuery制作拼图小游戏_jquery

源代码思路分析: [一]如何生成图片网格,我想到两种方法: (1)把这张大图切成16张小图,然后用img标签的src (2)只有一张大图,然后每个元素的背景图用css的background-position进行切割定位,这样就需要16个数组[0,0],[-150,0],[-300,0]..........(我采用这种) [二]图片背景定位数组与布局定位数组 在选择了使用CSS定位切图,就需要生成数据.      需要的css背景 定位数组为:[0,0],[-150,0],[-300,0],[-4

webapp-WEBAPP拼图小游戏问题

问题描述 WEBAPP拼图小游戏问题 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-e

c#-项目赏析:21点游戏 利用C#制作 控制台小游戏

问题描述 项目赏析:21点游戏 利用C#制作 控制台小游戏 # 21点功能分析 功能点 ****1. 初始化界面 玩家(游戏几个人玩)(2-5) 属性:名字 ,钱 2. 随机发牌功能 3. 追加赌注 4. 叫牌 5. 停牌 6. 查看输赢 7. 是否继续 8. 计算牌的点数 9. show牌 10.自动发牌(庄家点数<17,) 11.重新开始游戏 12.游戏说明 要求: 1:用visual studio 2:C#控制台 3:不要求太好,代码简单易懂就行 4:本人大一 解决方案 网上很多源码和参考

JS编程一个拼图小游戏

问题描述 如何用Javascript编写一个简单的拼图小游戏. 解决方案

用vb.net制作一个小游戏

问题描述 学了vb.net大概两个月了,想自己做一个小游戏试试.我想参考一下一下游戏的代码及思路,希望大神们帮助. 解决方案 解决方案二:正规游戏的基本框架思路,需要你有3年以上的程序开发经验,再学.你说的那种游戏,如果是初中生电脑兴趣班那种设计,那么其实多多留意各种讨论并且亲自上机实践(最好还能自己认证回复两句)即可获得体验.那并不是真正的"游戏",只是一般的编程体验.解决方案三:在google里面搜site:download.csdn.netvb.net游戏答案立刻就有解决方案四:

海外玩家制作Flash小游戏嘲讽伍兹风流情事

(编译/林洁伊)美国大师赛当地时间4月7日将开幕,一年前因性丑闻而掀起轩然大波的老虎伍兹也将出赛.不过人们似乎对他那些花边新闻依然念念不忘,有海外"八卦"人士特地做一个Flash游戏,用来"嘲讽"伍兹的情事. 在这个游戏中,玩家扮演的是一个狙击手的角色,需要在伍兹比赛维持球场治安,把那些前来骚扰老虎打球的滋事者一一击毙.游戏一共有三个场景,第一个场景中有一些抗议者以及在国外赛场常见的裸奔者,第二个场景中则有各色的热辣女郎,而第三个场景--小编试了三次都没过关,还是留

JS写的数字拼图小游戏代码[学习参考]_javascript技巧

复制代码 代码如下: <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 ;

jQuery实现简易的天天爱消除小游戏_jquery

今天分享一枚小demo:<天天爱消除游戏>,我想大家对这个游戏不陌生吧!?近期挺火的一款手游 妙味的讲师也很喜欢玩这款游戏 ,课余时间就写了个简易版天天的爱消除,除了PC端以外,试试在iPad.iPhone上玩吧~ 涉及知识点:JS.HTML5; 游戏截图: CSS: *{ margin:0; padding:0;} #ul1{ position:relative; margin:20px auto; background:#1b1f2b; overflow:hidden;} #ul1 li{

韩政府要求所有小游戏申请评级引来骂声一片

近日,韩国游戏等级委员会正式宣布Valve的Steam服务及业余玩家自制的所有小游戏均需申请等级评定,引来骂声一片. 韩国游戏等级委员会称:"我们根据调查发现,目前市面上很多个人或小团体自制的小游戏不经等级评定就上市流通,而所有游戏不经等级评定私自上市将被视为非法游戏."游戏等级委员会相关人士称:"现行法律只对游戏展示.宗教.教育等公益目的游戏设有特例条款,使这部分游戏无需通过等级评定.但是游戏爱好者自制游戏尚无相关特例条款,因此我们也是照章行事而已."此外,Val