<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>拼图游戏</TITLE>
</HEAD>
<STYLE>
TABLE {
width :210px;
height :210px;
}
TD {
width :50px;
height :50px;
border :1px solid red;
cursor :hand;
}
DIV {
position:absolute;
overflow:hidden;
border :1px solid red;
width :50px;
height :50px;
}
IMG {
position:absolute;
overflow:hidden;
width :200px;
height :200px;
}
</STYLE>
<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];
function init(){
initIt();
drawIt();
}
//随机排序
function randomIt(){
var temp=0;
var random=0;
var s="";
for(i=1;i<16;i++){
random=Math.ceil(15*Math.random())
temp=tempArr[i];
tempArr[i]=tempArr[random];
tempArr[random]=temp;
}
for(i=0;i<16;i++){
var m=Math.floor(i/4);
var n=i%4;
myArr[m][n]=tempArr[i];
}
}
//画图(拼图)
function drawIt(){
var v=0;
for (i=0;i<4;i++){
for (j=0;j<4;j++){
v=myArr[i][j];
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;
}else{
document.getElementById('r'+i+'c'+j).style.display="none";
}
}
}
}
//画图(原图)
function initIt(){
var v=0;
for (i=0;i<4;i++){
for (j=0;j<4;j++){
v=myArr[i][j];
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;
}else{
//document.getElementById('r'+i+'c'+j+'t').style.display="none";
}
}
}
}
//随机洗牌
function changeIt(){
randomIt();
drawIt();
}
//判断是否成功
function judgeIt(){
for (i=0;i<4;i++){
for (j=0;j<4;j++){
if(myArr[i][j]!=(i*4+j)){
return false;
}
}
}
return true;
}
function moveIt(m,n){
var i=parseInt(m);
var j=parseInt(n);
var temp;
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();
if(judgeIt()){
alert("You win!");
return;
}
return;
}
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();
if(judgeIt()){
alert("You win!");
return;
}
return;
}
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();
if(judgeIt()){
alert("You win!");
return;
}
return;
}
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();
if(judgeIt()){
alert("You win!");
return;
}
return;
}
}
function clickIt(id){
var i=id.substring(1,2);
var j=id.substring(3,4);
moveIt(i,j);
}
function chooseIt(imgSrc){
var imgs=document.getElementsByTagName('img');
for(i=0;i<imgs.length;i++){
imgs[i].src=imgSrc;
}
}
function reflashIt(imgSrc){
myArr = [[0,1,2,3],[4,5,6,7],[8,9,10,11],[12,13,14,15]];
drawIt();
}
</SCRIPT>
<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="随机拼图" onClick="changeIt();"></input>
<input type="button" value="刷新" onClick="reflashIt();"></input>
<TABLE>
<TR>
<TD><DIV id="r0c0" onClick="clickIt(this.id)" onMouseOver="this.style.border='2px solid red'" onMouseOut="this.style.border='1px solid red'"><img src="img/default.jpg"></DIV></TD>
<TD><DIV id="r0c1" onClick="clickIt(this.id)" onMouseOver="this.style.border='2px solid red'" onMouseOut="this.style.border='1px solid red'"><img src="img/default.jpg"></DIV></TD>
<TD><DIV id="r0c2" onClick="clickIt(this.id)" onMouseOver="this.style.border='2px solid red'" onMouseOut="this.style.border='1px solid red'"><img src="img/default.jpg"></DIV></TD>
<TD><DIV id="r0c3" onClick="clickIt(this.id)" onMouseOver="this.style.border='2px solid red'" onMouseOut="this.style.border='1px solid red'"><img src="img/default.jpg"></DIV></TD>
</TR>
<TR>
<TD><DIV id="r1c0" onClick="clickIt(this.id)" onMouseOver="this.style.border='2px solid red'" onMouseOut="this.style.border='1px solid red'"><img src="img/default.jpg"></DIV></TD>
<TD><DIV id="r1c1" onClick="clickIt(this.id)" onMouseOver="this.style.border='2px solid red'" onMouseOut="this.style.border='1px solid red'"><img src="img/default.jpg"></DIV></TD>
<TD><DIV id="r1c2" onClick="clickIt(this.id)" onMouseOver="this.style.border='2px solid red'" onMouseOut="this.style.border='1px solid red'"><img src="img/default.jpg"></DIV></TD>
<TD><DIV id="r1c3" onClick="clickIt(this.id)" onMouseOver="this.style.border='2px solid red'" onMouseOut="this.style.border='1px solid red'"><img src="img/default.jpg"></DIV></TD>
</TR>
<TR>
<TD><DIV id="r2c0" onClick="clickIt(this.id)" onMouseOver="this.style.border='2px solid red'" onMouseOut="this.style.border='1px solid red'"><img src="img/default.jpg"></DIV></TD>
<TD><DIV id="r2c1" onClick="clickIt(this.id)" onMouseOver="this.style.border='2px solid red'" onMouseOut="this.style.border='1px solid red'"><img src="img/default.jpg"></DIV></TD>
<TD><DIV id="r2c2" onClick="clickIt(this.id)" onMouseOver="this.style.border='2px solid red'" onMouseOut="this.style.border='1px solid red'"><img src="img/default.jpg"></DIV></TD>
<TD><DIV id="r2c3" onClick="clickIt(this.id)" onMouseOver="this.style.border='2px solid red'" onMouseOut="this.style.border='1px solid red'"><img src="img/default.jpg"></DIV></TD>
</TR>
<TR>
<TD><DIV id="r3c0" onClick="clickIt(this.id)" onMouseOver="this.style.border='2px solid red'" onMouseOut="this.style.border='1px solid red'"><img src="img/default.jpg"></DIV></TD>
<TD><DIV id="r3c1" onClick="clickIt(this.id)" onMouseOver="this.style.border='2px solid red'" onMouseOut="this.style.border='1px solid red'"><img src="img/default.jpg"></DIV></TD>
<TD><DIV id="r3c2" onClick="clickIt(this.id)" onMouseOver="this.style.border='2px solid red'" onMouseOut="this.style.border='1px solid red'"><img src="img/default.jpg"></DIV></TD>
<TD><DIV id="r3c3" onClick="clickIt(this.id)" onMouseOver="this.style.border='2px solid red'" onMouseOut="this.style.border='1px solid red'"><img src="img/default.jpg"></DIV></TD>
</TR>
</TABLE>
</BODY>
</HTML>
