這篇文章主要介紹了jQuery制作可自定義大小的拼圖游戲的代碼，非常的簡單實用，雖然還只是局限于數字順序的拼圖，后續慢慢完善上圖片，但還是分享給大家，有需要的小伙伴可以參考下。
我把大小限制在了3-10之間，實在閑的，或者有自虐傾向的可以試試改下。。
本來準備弄圖片上去的，還沒弄..
pintu.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<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=">
<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>
以上就是本文給大家分享的全部內容了，希望大家能夠喜歡。
更多信息請查看IT技術專欄
公眾號
事業單位
當前位置：
公考類
招聘類
各類考試
