jQuery制作可自定义大小的拼图游戏

2024-05-06 16:17:51

字体：大中小

来源：转载

供稿：网友

这篇文章主要介绍了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">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>拼图</title>

<style type="text/css">

#pt_main{

margin:0 auto;

border:2px solid #000;}

#menu{

text-align:center;}

#pt_main div{

padding:0px;

margin:0px;

float:left;

line-height:200px;

font-size:100px;

text-align:center;}

#pt_main div:hover{

cursor:pointer;}

.hui{

background:#CCC;}

</style>

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">

//div边框宽度

var border_w=2;

//div大小

var size=50;

//是否过关

var st=false;

//背景图片地址（功能还没写）

var imgurl='';

//灰色块的位置

var hui=0;

//游戏宽高

var width=3;

var height=3;

$(function(){

init();

});

//判断两个数字能不能交换

function ut_jh(a,b){

if(Math.abs(a-b)==width){

return true;

}

if(Math.abs(a-b)==1&& ut_line(a,b,width) ){

return true;

}

return false;

}

//判断两个数字是否在同一行

function ut_line(a,b,width){

if(parseInt(a/width)==parseInt(b/width)){

return true;

}else{

return false;

}

}

//生成可交换的集合（可与灰色块交换的集合）

function ut_sc(a){

//最多为4个

var li=new Array();

var i=0;

if(a-width>=0){

li[i++]=a-width;

}

if(a+width<=width*height-1){

li[i++]=a+width;

}

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)

return li;

}

//块的点击事件

function pt_click(){

if(!st){

return false;

}

//点击块的索引

var index=get().index($(this));

if(ut_jh(hui,index)){

jh(hui,index);

//判断是否过关

pd();

}

}

//两块交换

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){

return false;

}

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*height;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);

});

dl();

st=true;

}

//判断是否通过(当每个块的值与自身的下标对应)

function pd(){

var b=true;

get().each(function(index, element) {

if($(element).attr('tg')!=index){

b=false;

return false;

}

});

if(b){

st=false;

alert("恭喜过关！");

return true;

}else{

return false;

}

}

//获取集合

function get(){

return $("#pt_main div");

}

//打乱

function dl(){

//打乱次数

var count=width*width*width;

for(i =0;i<count;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('');

return false;

}

var v=parseInt(dxv);

if(v<3||v>10){

alert('请输入3-10之间的数字');

$('#dx').val('');

return false;

}

width=v;

height=v;

init();

}

</script>

</head>

<body>

<div id='menu'>

大小:<input id='dx' style="text-align:center;width:40px;"/>

<button onclick="csh()">初始化</button>

<button onclick="init()">刷新</button>

</div>

<div id="pt_main">

</div>

</body>

</html>