jQuery之-拼图小游戏_Linux编程_Linux公社-Linux系统门户网站
你好，游客
jQuery之-拼图小游戏
来源：Linux社区&
作者：focuslgy
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 = [],
for(var n=0;n&this.nCn++){
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.nLi++){
// this.nLen 是为 16
　　　　　　
var t = parseInt(i/this.nCol),
k = i - this.nCol*t,
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. //图片数据
this.opt =
this.nLen = option. //多少张拼图
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.
this.nRow = this.aRowLayout.
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 newA
setPos:function(){
for(var i=0;i&this.nLi++){
var t = parseInt(i/this.nCol),
l = i - this.nCol*t,
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,
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]){
createDom:function(){
var layout = this.getRand(this.aLayout,this.nLen);
// console.log(layout);
for(var n=0;n&this.nLn++){
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;
hasElem = function(){
var t = false;
$div.each(function(){
if($(this).hasClass("on")){
$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().
$(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});
if($this.hasClass("on")){
$this.removeClass("on");
$this.find('span').remove();
$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权威指南 PDF版中文+配套源代码
jQuery实战 中文PDF+源码
《jQuery即学即用（双色）》 PDF+源代码
锋利的jQuery(第2版) 完整版PDF+源码
jQuery完成带复选框的表格行高亮显示
jQuery基础教程(第4版) PDF 完整高清版+配套源码
--------------------------------------分割线 --------------------------------------
jQuery 的详细介绍：jQuery 的下载地址：
本文永久更新链接地址：
相关资讯 & & &
　　　同意评论声明
　　　发表
尊重网上道德，遵守中华人民共和国的各项有关法律法规
承担一切因您的行为而直接或间接导致的民事或刑事法律责任
本站管理人员有权保留或删除其管辖留言中的任意内容
本站有权在网站内转载或引用您的评论
参与本评论即表明您已经阅读并接受上述条款使用提示：
小提示：如果是HTML5 / CSS3特效请使用高级浏览器查看，如：chrome,Firefox,IE9及以上版本浏览器！
版权声明：
大头网为非营利性站点，所有资源均是网上搜集或网友上传仅供学习参考之用，请勿用于商业用途，否则产生的一切后果将由您自己承担，本站将不对任何资源负法 律责任。除部分原创作品外，本站不享有版权，如果侵犯了您的版权，请及时与我们联系admin#datouwang.com(#换成@),我们将在72小时内删除。
热门特效推荐
您可能喜欢的/Xihuan没有更多推荐了，
不良信息举报
举报内容：
jquery 实现拼图小游戏
举报原因：
原文地址：
原因补充：
最多只允许输入30个字
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！jQuery制作可自定义大小的拼图游戏
转载 &发布时间：日 16:00:01 & 投稿：hebedich
这篇文章主要介绍了jQuery制作可自定义大小的拼图游戏的代码，非常的简单实用，虽然还只是局限于数字顺序的拼图，后续慢慢完善上图片，但还是分享给大家，有需要的小伙伴可以参考下。
我把大小限制在了3-10之间，实在闲的，或者有自虐倾向的可以试试改下。。
本来准备弄图片上去的，还没弄..
pintu.html
&!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"&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&title&拼图&/title&
&style type="text/css"&
border:2px solid #000;}
text-align:}
#pt_main div{
line-height:200
font-size:100
text-align:}
#pt_main div:hover{
background:#CCC;}
&script src="http://code.jquery.com/jquery-latest.js"&&/script&
&script type="text/javascript"&
//div边框宽度
var border_w=2;
var size=50;
//是否过关
//背景图片地址（功能还没写）
var imgurl='';
//灰色块的位置
var hui=0;
//游戏宽高
var width=3;
var height=3;
$(function(){
//判断两个数字能不能交换
function ut_jh(a,b){
if(Math.abs(a-b)==width){
if(Math.abs(a-b)==1&& ut_line(a,b,width) ){
//判断两个数字是否在同一行
function ut_line(a,b,width){
if(parseInt(a/width)==parseInt(b/width)){
//生成可交换的集合（可与灰色块交换的集合）
function ut_sc(a){
//最多为4个
var li=new Array();
if(a-width&=0){
li[i++]=a-
if(a+width&=width*height-1){
li[i++]=a+
if(ut_line(a,a-1,width) && a-1&=0){
li[i++]=a-1;
if(ut_line(a,a+1,width) && a+1&=width*height-1){
li[i++]=a+1;
//alert(a+'-length:'+li.length)
//块的点击事件
function pt_click(){
//点击块的索引
var index=get().index($(this));
if(ut_jh(hui,index)){
jh(hui,index);
//判断是否过关
//两块交换
function jh(hui_,index_){
//alert(hui+1+","+(index_+1));
var list=get();//所有块
var h=list.eq(hui_);//灰色块
var d=list.eq(index_);//点击的块
//交换样式
h.removeClass();
d.addClass('hui');
h.html(d.html());
d.html('');
hui=index_;
//交换各自属性
tg=h.attr('tg');
h.attr('tg',d.attr('tg'));
d.attr('tg',tg);
function init(){
//不能太小...
if(width&3||height&3){
hui=width*height-1;
var pp=$("#pt_main");
pp.html('');
//创建并初始化
var k=width*size+border_w*width*2;
var g=height*size+border_w*height*2;
pp.css({'width':k,'height':g});
for(i=0;i&width*i++){
var n=$("&div&"+(i+1)+"&/div&");
n.css({'width':size,
'height':size,
border:border_w+'px solid #000',
lineHeight:size+'px',
fontSize:parseInt(size/3)+'px'
if(imgurl!=''){
pp.append(n);
//alert(i)
get().last().html('');
get().last().addClass('hui');
get().on('click',pt_click);
//为每个块附加属性，记录当前的值
$("#pt_main div").each(function(index, element) {
$(element).attr('tg',index);
//判断是否通过(当每个块的值与自身的下标对应)
function pd(){
get().each(function(index, element) {
if($(element).attr('tg')!=index){
alert("恭喜过关！");
//获取集合
function get(){
return $("#pt_main div");
function dl(){
//打乱次数
var count=width*width*
for(i =0;i&i++){
//可交换集合
var li=ut_sc(hui);
var num=parseInt((li.length)*Math.random());
jh(hui,li[num]);
//初始化按钮的点击事件
function csh(){
var dxv=$('#dx').val();
if(!parseInt(dxv)){
alert('请输入3-10之间的数字');
$('#dx').val('');
var v=parseInt(dxv);
if(v&3||v&10){
alert('请输入3-10之间的数字');
$('#dx').val('');
&div id='menu'&
大小:&input id='dx' style="text-align:width:40"/&
&button onclick="csh()"&初始化&/button&
&button onclick="init()"&刷新&/button&
&div id="pt_main"&
以上就是本文给大家分享的全部内容了，希望大家能够喜欢。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具可将任意图片转换为拼图游戏的jQuery插件
当前位置： >
> 可将任意图片转换为拼图游戏的jQuery插件
jQuery-snapPuzzle是一款非常有趣的可以将任意图片转换为九宫格拼图游戏的jQuery插件。该插件通过jQueryUI来实现图片的拖拽，你可以设置图片的碎片数量来控制游戏的难度。并且它可以兼容IE7+浏览器。
浏览器兼容性
jQuery-snapPuzzle是一款非常有趣的可以将任意图片转换为九宫格拼图游戏的。该插件通过jQueryUI来实现图片的拖拽，你可以设置图片的碎片数量来控制游戏的难度。并且它可以兼容IE7+浏览器。它的特点有：
可以调游戏的整难度级别
可以在响应式设计的页面中使用
提供游戏成功后的回调函数
该图片拼图游戏插件依赖于jQueryUI，在使用时需要引入jQuery，jQueryUI和jquery.snap-puzzle.min.js文件。
&script src="js/jquery.min.js"&&/script&
&script src="js/jquery-ui.min.js"&&/script&
&script src="js/jquery.snap-puzzle.js"&&/script&
在页面DOM元素加载完毕之后，你可以在任何图片上调用snapPuzzle()方法来初始化该拼图游戏插件。
$(selector).snapPuzzle({key1: value1, key2: value2});
该拼图游戏插件接收键值对对象作为参数，下面是可用的配置参数。
pile：默认值：null。图片碎片容器的选择器。
containment：默认值：'document'。限制图片碎片在某个元素中。
rows：默认值：5。图片碎片的行数。
columns：默认值：5。图片碎片的列数。
onComplete(elem)：当拼图游戏成功完成之后的回调函数。
$('img.puzzle').snapPuzzle({ rows: 4, columns: 3 })
本文版权属于jQuery之家，转载请注明出处：
您已经顶过了哦！