下载地址:http://download.csdn.net/source/268138
闲来无事,写了一个拼图游戏,算法很简单,由js实现;主要的是使用一张完整的图片,用js+css进行图片截取是以前没有做过的;
当然这只是一个初步产品,还有待加工,增加功能使其更加完善,同时作美化使其更好看一些!
准备增加如下功能:
1 动态读取拼图图片;
2 难度调整:通过时间限制,分格个数,是否记忆模式等元素增加难度;
3 试玩过的朋友帮我想想,欢迎留言!
附上代码:
<!
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
>
<
HTML
>
<
HEAD
>
<
TITLE
>
拼图游戏
</
TITLE
>
</
HEAD
>
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
<
STYLE
>
...
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
TABLE {...}{
width :210px;
height :210px;
}
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
TD {...}{
width :50px;
height :50px;
border :1px solid red;
cursor :hand;
}
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
DIV {...}{
position:absolute;
overflow:hidden;
border :1px solid red;
width :50px;
height :50px;
}
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
IMG {...}{
position:absolute;
overflow:hidden;
width :200px;
height :200px;
}
</
STYLE
>
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
<
SCRIPT
>
...
var myArr = [[0,1,2,3],[4,5,6,7],[8,9,10,11],[12,13,14,15]];
var tempArr = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
function init()...{
initIt();
drawIt();
}
//随机排序
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
function randomIt()...{
var temp=0;
var random=0;
var s="";
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
for(i=1;i<16;i++)...{
random=Math.ceil(15*Math.random())
temp=tempArr[i];
tempArr[i]=tempArr[random];
tempArr[random]=temp;
}
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
for(i=0;i<16;i++)...{
var m=Math.floor(i/4);
var n=i%4;
myArr[m][n]=tempArr[i];
}
}
//画图(拼图)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
function drawIt()...{
var v=0;
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
for (i=0;i<4;i++)...{
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
for (j=0;j<4;j++)...{
v=myArr[i][j];
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
if(v!=0)...{
document.getElementById('r'+i+'c'+j).style.display="block";
document.getElementById('r'+i+'c'+j).scrollTop=Math.floor(v/4)*50;
document.getElementById('r'+i+'c'+j).scrollLeft=(v%4)*50;
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
}else...{
document.getElementById('r'+i+'c'+j).style.display="none";
}
}
}
}
//画图(原图)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
function initIt()...{
var v=0;
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
for (i=0;i<4;i++)...{
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
for (j=0;j<4;j++)...{
v=myArr[i][j];
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
if(v!=0)...{
//document.getElementById('r'+i+'c'+j+'t').style.display="block";
document.getElementById('r'+i+'c'+j+'t').scrollTop=Math.floor(v/4)*50;
document.getElementById('r'+i+'c'+j+'t').scrollLeft=(v%4)*50;
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
}else...{
//document.getElementById('r'+i+'c'+j+'t').style.display="none";
}
}
}
}
//随机洗牌
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
function changeIt()...{
randomIt();
drawIt();
}
//判断是否成功
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
function judgeIt()...{
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
for (i=0;i<4;i++)...{
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
for (j=0;j<4;j++)...{
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
if(myArr[i][j]!=(i*4+j))...{
return false;
}
}
}
return true;
}
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
function moveIt(m,n)...{
var i=parseInt(m);
var j=parseInt(n);
var temp;
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
if(i-1>=0&&myArr[i-1][j]==0)...{
temp=myArr[i][j];
myArr[i][j]=myArr[i-1][j];
myArr[i-1][j]=temp;
drawIt();
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
if(judgeIt())...{
alert("You win!");
return;
}
return;
}
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
if(i+1<4&&myArr[i+1][j]==0)...{
temp=myArr[i][j];
myArr[i][j]=myArr[i+1][j];
myArr[i+1][j]=temp;
drawIt();
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
if(judgeIt())...{
alert("You win!");
return;
}
return;
}
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
if(j-1>=0&&myArr[i][j-1]==0)...{
temp=myArr[i][j];
myArr[i][j]=myArr[i][j-1];
myArr[i][j-1]=temp;
drawIt();
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
if(judgeIt())...{
alert("You win!");
return;
}
return;
}
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
if(j+1<4&&myArr[i][j+1]==0)...{
temp=myArr[i][j];
myArr[i][j]=myArr[i][j+1];
myArr[i][j+1]=temp;
drawIt();
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
if(judgeIt())...{
alert("You win!");
return;
}
return;
}
}
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
function clickIt(id)...{
var i=id.substring(1,2);
var j=id.substring(3,4);
moveIt(i,j);
}
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
function chooseIt(imgSrc)...{
var imgs=document.getElementsByTagName('img');
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
for(i=0;i<imgs.length;i++)...{
imgs[i].src=imgSrc;
}
}
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
function reflashIt(imgSrc)...{
myArr = [[0,1,2,3],[4,5,6,7],[8,9,10,11],[12,13,14,15]];
drawIt();
}
</
SCRIPT
>
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
<
BODY
onload
="init();"
>
原图:
<
SELECT
onchange
="chooseIt(this.value)"
>
<
OPTION
value
="img/default.jpg"
>
默认
<?
OPTION>
<OPTION value="img/tuzi.wmf">兔子<?OPTION>
<OPTION value="img/tiger.wmf">老虎<?OPTION>
<OPTION value="img/diqiuyi.wmf">地球仪<?OPTION>
</SELECT>
<BR>
<TABLE>
<TR>
<TD><DIV id="r0c0t"><img src="img/default.jpg"></DIV></TD>
<TD><DIV id="r0c1t"><img src="img/default.jpg"></DIV></TD>
<TD><DIV id="r0c2t"><img src="img/default.jpg"></DIV></TD>
<TD><DIV id="r0c3t"><img src="img/default.jpg"></DIV></TD>
</TR>
<TR>
<TD><DIV id="r1c0t"><img src="img/default.jpg"></DIV></TD>
<TD><DIV id="r1c1t"><img src="img/default.jpg"></DIV></TD>
<TD><DIV id="r1c2t"><img src="img/default.jpg"></DIV></TD>
<TD><DIV id="r1c3t"><img src="img/default.jpg"></DIV></TD>
</TR>
<TR>
<TD><DIV id="r2c0t"><img src="img/default.jpg"></DIV></TD>
<TD><DIV id="r2c1t"><img src="img/default.jpg"></DIV></TD>
<TD><DIV id="r2c2t"><img src="img/default.jpg"></DIV></TD>
<TD><DIV id="r2c3t"><img src="img/default.jpg"></DIV></TD>
</TR>
<TR>
<TD><DIV id="r3c0t"><img src="img/default.jpg"></DIV></TD>
<TD><DIV id="r3c1t"><img src="img/default.jpg"></DIV></TD>
<TD><DIV id="r3c2t"><img src="img/default.jpg"></DIV></TD>
<TD><DIV id="r3c3t"><img src="img/default.jpg"></DIV></TD>
</TR>
</TABLE>
<br><br>
拼图:
<input type="button" value="随机拼图" οnclick="changeIt();"></input>
<input type="button" value="刷新" οnclick="reflashIt();"></input>
<TABLE>
<TR>
<TD><DIV id="r0c0" οnclick="clickIt(this.id)" οnmοuseοver="this.style.border='2px solid red'" οnmοuseοut="this.style.border='1px solid red'"><img src="img/default.jpg"></DIV></TD>
<TD><DIV id="r0c1" οnclick="clickIt(this.id)" οnmοuseοver="this.style.border='2px solid red'" οnmοuseοut="this.style.border='1px solid red'"><img src="img/default.jpg"></DIV></TD>
<TD><DIV id="r0c2" οnclick="clickIt(this.id)" οnmοuseοver="this.style.border='2px solid red'" οnmοuseοut="this.style.border='1px solid red'"><img src="img/default.jpg"></DIV></TD>
<TD><DIV id="r0c3" οnclick="clickIt(this.id)" οnmοuseοver="this.style.border='2px solid red'" οnmοuseοut="this.style.border='1px solid red'"><img src="img/default.jpg"></DIV></TD>
</TR>
<TR>
<TD><DIV id="r1c0" οnclick="clickIt(this.id)" οnmοuseοver="this.style.border='2px solid red'" οnmοuseοut="this.style.border='1px solid red'"><img src="img/default.jpg"></DIV></TD>
<TD><DIV id="r1c1" οnclick="clickIt(this.id)" οnmοuseοver="this.style.border='2px solid red'" οnmοuseοut="this.style.border='1px solid red'"><img src="img/default.jpg"></DIV></TD>
<TD><DIV id="r1c2" οnclick="clickIt(this.id)" οnmοuseοver="this.style.border='2px solid red'" οnmοuseοut="this.style.border='1px solid red'"><img src="img/default.jpg"></DIV></TD>
<TD><DIV id="r1c3" οnclick="clickIt(this.id)" οnmοuseοver="this.style.border='2px solid red'" οnmοuseοut="this.style.border='1px solid red'"><img src="img/default.jpg"></DIV></TD>
</TR>
<TR>
<TD><DIV id="r2c0" οnclick="clickIt(this.id)" οnmοuseοver="this.style.border='2px solid red'" οnmοuseοut="this.style.border='1px solid red'"><img src="img/default.jpg"></DIV></TD>
<TD><DIV id="r2c1" οnclick="clickIt(this.id)" οnmοuseοver="this.style.border='2px solid red'" οnmοuseοut="this.style.border='1px solid red'"><img src="img/default.jpg"></DIV></TD>
<TD><DIV id="r2c2" οnclick="clickIt(this.id)" οnmοuseοver="this.style.border='2px solid red'" οnmοuseοut="this.style.border='1px solid red'"><img src="img/default.jpg"></DIV></TD>
<TD><DIV id="r2c3" οnclick="clickIt(this.id)" οnmοuseοver="this.style.border='2px solid red'" οnmοuseοut="this.style.border='1px solid red'"><img src="img/default.jpg"></DIV></TD>
</TR>
<TR>
<TD><DIV id="r3c0" οnclick="clickIt(this.id)" οnmοuseοver="this.style.border='2px solid red'" οnmοuseοut="this.style.border='1px solid red'"><img src="img/default.jpg"></DIV></TD>
<TD><DIV id="r3c1" οnclick="clickIt(this.id)" οnmοuseοver="this.style.border='2px solid red'" οnmοuseοut="this.style.border='1px solid red'"><img src="img/default.jpg"></DIV></TD>
<TD><DIV id="r3c2" οnclick="clickIt(this.id)" οnmοuseοver="this.style.border='2px solid red'" οnmοuseοut="this.style.border='1px solid red'"><img src="img/default.jpg"></DIV></TD>
<TD><DIV id="r3c3" οnclick="clickIt(this.id)" οnmοuseοver="this.style.border='2px solid red'" οnmοuseοut="this.style.border='1px solid red'"><img src="img/default.jpg"></DIV></TD>
</TR>
</TABLE>
</BODY>
</HTML>