上次我们已经讲解了制作的原理，并且展示了主要代码。
这次我将完整的代码给大家，仅供参考。
HTML部分如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拼图游戏——初级</title>
<link rel="stylesheet" href="css/button.css">
<script src="js/jquery.js"></script>
<script src="js/level1.js"></script>
</head>
<body>
<div class="main">
<div class="left">
<h3>目标图</h3>
<div class="pic" id="mainpic"></div>
<br><br>
<h3>所用时间</h3>
<p id="timer">0分0秒</p>
</div>
<div class="center">
<table class="picbox" cellspacing="0" cellpadding="1">
<tbody id="picbox">
</tbody>
</table>
</div>
<div class="right">
<a href="javascript:startgame()" class="btn btn-sm animated-button victoria-one">开始</a>
<a href="level1.html" class="btn btn-sm animated-button victoria-two">初级</a>
<a href="level2.html" class="btn btn-sm animated-button victoria-three">中级</a>
<a href="level3.html" class="btn btn-sm animated-button victoria-four">高级</a>
</div>
</div>
<div class="wingame">
<h2>恭喜你完成拼图！</h2>
<div class="pic pic2"></div>
<p>完成耗时：<b id="timer2">0分0秒</b></p>
</div>
</body>
</html>
CSS代码如下
body
{
background-color: #E8E8E8;
}
.main
{
margin:0 auto;
width: 1250px;
height: 720px;
}
.left
{
width: 300px;
height: 700px;
float: left;;
}
.center
{
width: 700px;
height: 700px;
float: left;
}
.right
{
width: 250px;
height: 700px;
color: red;
float: right; }
.picbox
{
margin: 0 auto;
border: 1px solid black;
width: 650px;
height: 650px;
}
.picbpx td
{
padding:;
}
.border_bg
{
background-image:url(../img/border_bg.jpg);
width: 100px;
height: 100px;
background-repeat: repeat;
}
.left h3
{
text-align: center;;
}
#timer
{
color: #D24D57;
text-align: center;
font-size:23px;
font-weight: bold;
}
.pic
{
margin: 20px auto;
background-size: cover;
width: 270px;
height: 250px;
border: 2px solid #FFF;
}
.wingame
{
display: none;
width: 600px;
height: 300px;
background-color: rgba(80,100,120,0.5);
position: fixed;
top:25vh;
left: 32vw;
}
.pic2
{
width: 150px;
height: 150px;
}
.pic2:hover
{
cursor:pointer;
}
.wingame h2
{
text-align: center;
}
.wingame p
{
font-size: 20px;
text-align: center;
}
.wingame p b
{
color: rgb(200,60,60);
} /*按钮美化*/
a.animated-button:link, a.animated-button:visited {
position: relative;
display: block;
margin: 30px auto 0;
padding: 14px 15px;
color: #fff;
font-size:14px;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
letter-spacing: .08em;
border-radius:;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
a.animated-button:link:after, a.animated-button:visited:after {
content: "";
position: absolute;
height: 0%;
left: 50%;
top: 50%;
width: 150%;
z-index: -1;
-webkit-transition: all 0.75s ease 0s;
-moz-transition: all 0.75s ease 0s;
-o-transition: all 0.75s ease 0s;
transition: all 0.75s ease 0s;
}
a.animated-button:link:hover, a.animated-button:visited:hover {
color: #FFF;
text-shadow: none;
}
a.animated-button:link:hover:after, a.animated-button:visited:hover:after {
height: 450%;
}
a.animated-button:link, a.animated-button:visited {
position: relative;
display: block;
margin: 30px auto 0;
padding: 14px 15px;
color: #000;
font-size:25px;
border-radius:;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
letter-spacing: .08em;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
} /* Victoria Buttons */
a
{
width: 200px;
height: 50px;
}
a.animated-button.victoria-one {
border: 2px solid #D24D57;
}
a.animated-button.victoria-one:after {
background: #D24D57;
-moz-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
-ms-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
-webkit-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
transform: translateX(-50%) translateY(-50%) rotate(-25deg);
}
a.animated-button.victoria-two {
border: 2px solid #D24D57;
}
a.animated-button.victoria-two:after {
background: #D24D57;
-moz-transform: translateX(-50%) translateY(-50%) rotate(25deg);
-ms-transform: translateX(-50%) translateY(-50%) rotate(25deg);
-webkit-transform: translateX(-50%) translateY(-50%) rotate(25deg);
transform: translateX(-50%) translateY(-50%) rotate(25deg);
}
a.animated-button.victoria-three {
border: 2px solid #D24D57;
}
a.animated-button.victoria-three:after {
background: #D24D57;
opacity: .5;
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
a.animated-button.victoria-three:hover:after {
height: 140%;
opacity:;
}
a.animated-button.victoria-four {
border: 2px solid #D24D57;
}
a.animated-button.victoria-four:after {
background: #D24D57;
opacity: .5;
-moz-transform: translateY(-50%) translateX(-50%) rotate(90deg);
-ms-transform: translateY(-50%) translateX(-50%) rotate(90deg);
-webkit-transform: translateY(-50%) translateX(-50%) rotate(90deg);
transform: translateY(-50%) translateX(-50%) rotate(90deg);
}
a.animated-button.victoria-four:hover:after {
opacity:;
height: 600% !important;
}
a.animated-button.victoria-five {
border: 2px solid red;
}
a.animated-button.victoria-five:after {
background: #D24D57;
-moz-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
-ms-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
-webkit-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
transform: translateX(-50%) translateY(-50%) rotate(-25deg);
}
最后式Js代码：
var picnum=5;
var picData=[];
var a_num=[];
var level="level1";
var isstart=false;
$(document).ready(function(){
showpicmain();//显示需要拼的目标图
for(var i=0;i<picnum;i++)//创建拼图表格的行
{
$('#picbox').append("<tr></tr>");
}
for(var i=0;i<picnum;i++)//创建拼图表格的列
{
$('#picbox').children().append("<td></td>");
}
$('#startgame').attr("onclick","startgame()");//开始按钮监听事件
var tds=$('#picbox').children().children();//获得td的数组
//console.log(tds.length); for(var i=0;i<tds.length;i++)//为每个td加id和点击事件
{
id=i+1;
tds[i].setAttribute("id",id);
tds[i].setAttribute("onclick","movepic("+id+")")
}
init();
saveData();
setBorder();
setendpic();
});
function setendpic()//加入最后一张图片
{
temp=picnum*(picnum-1)-1;
$('#'+temp).css("background-image","url(img/"+level+"/_0"+(picnum-2)*(picnum-2)+".jpg)")
}
function iskong(id)//判断改标签是否为空
{ var bg=$('#'+id).css("background-image");
if(bg=="none"){
return true;
}else
{
return false;
}
}
function movepic(id)//移动图片
{
if(iskong(id-picnum))
{
//alert("moveup");
move(id,id-picnum);
}
else if(iskong(id+picnum))
{
//alert("movedown");
move(id,id+picnum);
}
else if(iskong(id-1))
{
//alert("moveleft");
move(id,id-1);
}
else if(iskong(id+1))
{
//alert("moveright");
move(id,id+1);
}
if(isstart)
{
isWin();
}
}
function setBorder()//设置边界
{
for(var i=0;i<=picnum;i++)
{
$("#"+i).attr({"onclick":null,"class":"border_bg"});
$("#"+i).css("height","1px");
}
for(var i=1;i<=picnum*picnum;i+=picnum)
{
$("#"+i).attr({"onclick":null,"class":"border_bg"});
$("#"+i).css("width","1px");
}
for(var i=picnum*(picnum-1)+1;i<=picnum*picnum;i++)
{
$("#"+i).attr({"onclick":null,"class":"border_bg"});
$("#"+i).css("height","1px");
}
for(var i=picnum;i<=picnum*picnum;i+=picnum)
{
$("#"+i).attr({"onclick":null,"class":"border_bg"});
$("#"+i).css("width","1px");
}
} function move(id,target)//移动
{
//var temp=$('#'+id).css("background-image");
//temp=$('#'+id).css("background-image","");
$('#'+target).css("background-size","cover");
$('#'+target).css("background-image",$('#'+id).css("background-image"));
$('#'+id).css("background-image","none");
}
var pic=1;
function init()//初始化图片
{
for(var i=1;i<picnum-1;i++)
{
for(var id=1;id<picnum*picnum;id++)
{
if(id>picnum*i+1&&id<picnum*(i+1))
{
$('#'+id).css("background-size","cover");
$('#'+id).css("background-image","url(img/"+level+"/_0"+pic+".jpg)");
if(id==((picnum-1)*picnum)-1)
{
$('#'+id).css("background-image","none");
}
pic++;
//console.log(pic);
}
}
}
}
function saveData()//保存初始数据
{
for(var i=1;i<picnum-1;i++)
{
for(var id=1;id<picnum*picnum;id++)
{
if(id>picnum*i+1&&id<picnum*(i+1))
{
var temp=$('#'+id).css("background-image");
picData.push(temp);
}
}
}
}
function startgame()//开始游戏，打乱图片顺序
{
clearTimeout(timer);
times=0;timem=0;
isstart=true;
var k=0;times=0;timem=0;
var temp=[];
for(var i=1;i<(picnum-2)*(picnum-2);i++)
{
temp[i-1]=i;
}
a_num=getnum(temp);
for(var i=1;i<picnum-1;i++)
{
for(var id=1;id<picnum*picnum;id++)
{
if(id>picnum*i+1&&id<picnum*(i+1))
{
var temp=$('#'+id).css("background-image","url(img/"+level+"/_0"+a_num[k]+".jpg)");
k++;
}
}
}
var temp=picnum*(picnum-1)-1;
$('#'+temp).css("background-image","none"); gotime(); } function getnum(array) //打乱顺序函数
{
var tmp, current, top =array.length;
if(top) while(--top){
current =Math.floor(Math.random() * (top + 1));
tmp =array[current];
array[current] =array[top];
array[top] = tmp;
}
return array;
}
function isWin()//判断是否胜利
{
k=0;
for(var i=1;i<picnum-1;i++)
{
for(var id=1;id<picnum*picnum;id++)
{
if(id>picnum*i+1&&id<picnum*(i+1))
{
var temp=$('#'+id).css("background-image");
if(temp==picData[k])
{
k++;
}
}
}
}
if(k==(picnum-2)*(picnum-2))
{
clearTimeout(timer);
windo();
}
} var timem=0;
var times=0;
var timer=null;
function gotime()//开始计时
{
timer=setTimeout(function(){
times++;
if(times>59)
{
timem++;
times=0;
}
$('#timer').text(timem+"分"+times+"秒");
gotime();
},1000);
}
function showpicmain()//显示样本图
{
$('.pic').css("background-image","url(img/"+level+"/main.jpg)");
} function windo()
{
$('.wingame').css("display","block");
$('.pic2').click(function(){
$('.wingame').css("display","none");
startgame();
});
$('#timer2').text($('#timer').text());
}
OK，就这样吧，不懂得小伙伴看前面两篇文章。
欢迎学习交流。
by 本该如此