拼图游戏,在ie7 ,火狐,谷歌 测试通过。<!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 runat="server">
<title>无标题页</title>
<script type="text/javascript">
var mapBlock=3; //3 * 3 个单元格
var mapWH=300; //地图的大小
var tabobj;
var imgsrc="http://i3.6.cn/cvbnm/35/b7/8f/4e78358bc9f1b80a62a749d04bf409d8.jpg";
var backgroundPositionArr; function createMap()
{
backgroundPositionArr=new Array();
document.getElementById("imgid").src=imgsrc; tabobj=document.createElement("table");
tabobj.style.width=mapWH+"px";
tabobj.style.height=mapWH+"px";
tabobj.border="0";
tabobj.cellspacing="0";
tabobj.style.backgroundColor="rgb(223,223,223)"; var tbodyobj=document.createElement("tbody");
for(var i=0;i<mapBlock;i++)
{
var trobj=document.createElement("tr");
for(var j=0;j<mapBlock;j++)
{
var tdobj=document.createElement("td");
tdobj.id=i+"_"+j if(!(i==mapBlock-1 && j==mapBlock-1))
{
tdobj.style.backgroundImage="url("+imgsrc+")";
tdobj.style.backgroundRepeat="no-repeat";
tdobj.style.backgroundPosition=(-j)*(mapWH/mapBlock)+"px "+(-i)*(mapWH/mapBlock)+"px"; backgroundPositionArr.push((-j)*(mapWH/mapBlock)+"px "+(-i)*(mapWH/mapBlock)+"px");
}
var txt=document.createTextNode(" ");
tdobj.appendChild(txt);
trobj.appendChild(tdobj);
}
tbodyobj.appendChild(trobj);
}
tabobj.appendChild(tbodyobj);
document.getElementById("map_div").appendChild(tabobj); randomMap(); setMessageDivSize(); startDate();
nowDate();
} function setMessageDivSize()
{
document.getElementById("message_div").style.width="180px";
document.getElementById("message_div").style.height=document.getElementById("map_div").offsetHeight-2+"px";
} function startDate()
{
document.getElementById("startDate").value=new Date().toLocaleTimeString();
} function nowDate()
{
document.getElementById("nowDate").value=new Date().toLocaleTimeString(); setTimeout("nowDate()",1000);
} function yxbs()
{
document.getElementById("yxbs").value=document.getElementById("yxbs").value-0+1;
}
function keyDown(e)
{
var keyvalue=e.keyCode; if(keyvalue==38) //上
{
blockMove(1,0);
}
else if(keyvalue==39) //右
{
blockMove(0,-1);
}
else if(keyvalue==40) //下
{
blockMove(-1,0);
}
else if(keyvalue==37) // 左
{
blockMove(0,1);
}
} function blockMove(x,y)
{
var blockx=-1;
var blocky=-1; for(var i=0;i<mapBlock;i++)
{
for(var j=0;j<mapBlock;j++)
{
if(document.getElementById(i+"_"+j).style.backgroundImage=="")
{
blockx=i;
blocky=j; break;
}
}
if(blockx!=-1 && blocky!=-1)
break;
} if(blockx+x>mapBlock-1 || blockx+x<0 || blocky+y>mapBlock-1 || blocky+y<0)
return;
else
{
document.getElementById(blockx+"_"+blocky).style.backgroundImage="url("+imgsrc+")";
document.getElementById(blockx+"_"+blocky).style.backgroundPosition=document.getElementById((blockx+x)+"_"+(blocky+y)).style.backgroundPosition;
document.getElementById((blockx+x)+"_"+(blocky+y)).style.backgroundImage=""; isWin();
yxbs();
}
} function randomMap()
{
var randomarr=new Array();
var maparr=new Array(); for(var i=0;i<mapBlock*mapBlock-1;i++)
{
randomarr[i]=i;
} for(var i=mapBlock*mapBlock-2;i>=0;i--)
{
var a=Math.round(Math.random()*i);
maparr.push(randomarr[a]);
randomarr.splice(a,1);
} for(var i=0;i<mapBlock;i++)
{
for(var j=0;j<mapBlock;j++)
{
if(!(i==mapBlock-1 && j==mapBlock-1))
{
document.getElementById(i+"_"+j).style.backgroundPosition=backgroundPositionArr[maparr.pop()];
}
}
}
} function isWin()
{
var k=0;
var iswin=false; for(var i=0;i<mapBlock;i++)
{
for(var j=0;j<mapBlock;j++)
{
if(!(i==mapBlock-1 && j==mapBlock-1))
{//alert(document.getElementById(i+"_"+j).style.backgroundPosition+" == "+backgroundPositionArr[k]);
if(document.getElementById(i+"_"+j).style.backgroundPosition==backgroundPositionArr[k])
{
iswin=true;
}
else
{
iswin=false;
break;
}
k++;
}
}
if(iswin==false)
break;
} if(iswin)
{
alert("恭喜你赢了!");
window.location.href=window.location.href;
}
} function setGameNan()
{
document.getElementById("map_div").removeChild(tabobj);
mapBlock=document.getElementById("yxn").options[document.getElementById("yxn").selectedIndex].value-0;
createMap(); tabobj.focus();
}
</script>
</head>
<body onload="createMap()" onkeydown="keyDown(event)" style="font-size:10pt;">
<form id="form1">
<center>
<br>
<table>
<tr>
<td>
<div id="map_div" style="border:rgb(231,24,220) solid 1px">
</div>
</td>
<td>
<div id="message_div" style="border:rgb(231,24,220) solid 1px" align="center">
<br><font color="red"><b>拼图游戏</b></font><br>
开始时间:<input type="text" id="startDate" readonly style="width:80px"><br>
现在时间:<input type="text" id="nowDate" readonly style="width:80px"><br>
游戏步数:<input type="text" id="yxbs" readonly value="0" style="width:80px"><br>
游戏难度:<select id="yxn" style="width:86px" onchange="setGameNan()">
<option value="3">3 * 3</option>
<option value="4">4 * 4</option>
<option value="5">5 * 5</option>
<option value="6">6 * 6</option>
<option value="10">10 * 10</option>
</select>
<br><br> <font color="red"><b>游戏规则</b></font><br>
(1)只要拼成如下图你就赢了:
<br><br>
<img id="imgid" width="100px" height="100px" border="1">
</div>
</td>
</tr>
</table>
<br>
</center>
</form>
</body>
</html>
<head runat="server">
<title>无标题页</title>
<script type="text/javascript">
var mapBlock=3; //3 * 3 个单元格
var mapWH=300; //地图的大小
var tabobj;
var imgsrc="http://i3.6.cn/cvbnm/35/b7/8f/4e78358bc9f1b80a62a749d04bf409d8.jpg";
var backgroundPositionArr; function createMap()
{
backgroundPositionArr=new Array();
document.getElementById("imgid").src=imgsrc; tabobj=document.createElement("table");
tabobj.style.width=mapWH+"px";
tabobj.style.height=mapWH+"px";
tabobj.border="0";
tabobj.cellspacing="0";
tabobj.style.backgroundColor="rgb(223,223,223)"; var tbodyobj=document.createElement("tbody");
for(var i=0;i<mapBlock;i++)
{
var trobj=document.createElement("tr");
for(var j=0;j<mapBlock;j++)
{
var tdobj=document.createElement("td");
tdobj.id=i+"_"+j if(!(i==mapBlock-1 && j==mapBlock-1))
{
tdobj.style.backgroundImage="url("+imgsrc+")";
tdobj.style.backgroundRepeat="no-repeat";
tdobj.style.backgroundPosition=(-j)*(mapWH/mapBlock)+"px "+(-i)*(mapWH/mapBlock)+"px"; backgroundPositionArr.push((-j)*(mapWH/mapBlock)+"px "+(-i)*(mapWH/mapBlock)+"px");
}
var txt=document.createTextNode(" ");
tdobj.appendChild(txt);
trobj.appendChild(tdobj);
}
tbodyobj.appendChild(trobj);
}
tabobj.appendChild(tbodyobj);
document.getElementById("map_div").appendChild(tabobj); randomMap(); setMessageDivSize(); startDate();
nowDate();
} function setMessageDivSize()
{
document.getElementById("message_div").style.width="180px";
document.getElementById("message_div").style.height=document.getElementById("map_div").offsetHeight-2+"px";
} function startDate()
{
document.getElementById("startDate").value=new Date().toLocaleTimeString();
} function nowDate()
{
document.getElementById("nowDate").value=new Date().toLocaleTimeString(); setTimeout("nowDate()",1000);
} function yxbs()
{
document.getElementById("yxbs").value=document.getElementById("yxbs").value-0+1;
}
function keyDown(e)
{
var keyvalue=e.keyCode; if(keyvalue==38) //上
{
blockMove(1,0);
}
else if(keyvalue==39) //右
{
blockMove(0,-1);
}
else if(keyvalue==40) //下
{
blockMove(-1,0);
}
else if(keyvalue==37) // 左
{
blockMove(0,1);
}
} function blockMove(x,y)
{
var blockx=-1;
var blocky=-1; for(var i=0;i<mapBlock;i++)
{
for(var j=0;j<mapBlock;j++)
{
if(document.getElementById(i+"_"+j).style.backgroundImage=="")
{
blockx=i;
blocky=j; break;
}
}
if(blockx!=-1 && blocky!=-1)
break;
} if(blockx+x>mapBlock-1 || blockx+x<0 || blocky+y>mapBlock-1 || blocky+y<0)
return;
else
{
document.getElementById(blockx+"_"+blocky).style.backgroundImage="url("+imgsrc+")";
document.getElementById(blockx+"_"+blocky).style.backgroundPosition=document.getElementById((blockx+x)+"_"+(blocky+y)).style.backgroundPosition;
document.getElementById((blockx+x)+"_"+(blocky+y)).style.backgroundImage=""; isWin();
yxbs();
}
} function randomMap()
{
var randomarr=new Array();
var maparr=new Array(); for(var i=0;i<mapBlock*mapBlock-1;i++)
{
randomarr[i]=i;
} for(var i=mapBlock*mapBlock-2;i>=0;i--)
{
var a=Math.round(Math.random()*i);
maparr.push(randomarr[a]);
randomarr.splice(a,1);
} for(var i=0;i<mapBlock;i++)
{
for(var j=0;j<mapBlock;j++)
{
if(!(i==mapBlock-1 && j==mapBlock-1))
{
document.getElementById(i+"_"+j).style.backgroundPosition=backgroundPositionArr[maparr.pop()];
}
}
}
} function isWin()
{
var k=0;
var iswin=false; for(var i=0;i<mapBlock;i++)
{
for(var j=0;j<mapBlock;j++)
{
if(!(i==mapBlock-1 && j==mapBlock-1))
{//alert(document.getElementById(i+"_"+j).style.backgroundPosition+" == "+backgroundPositionArr[k]);
if(document.getElementById(i+"_"+j).style.backgroundPosition==backgroundPositionArr[k])
{
iswin=true;
}
else
{
iswin=false;
break;
}
k++;
}
}
if(iswin==false)
break;
} if(iswin)
{
alert("恭喜你赢了!");
window.location.href=window.location.href;
}
} function setGameNan()
{
document.getElementById("map_div").removeChild(tabobj);
mapBlock=document.getElementById("yxn").options[document.getElementById("yxn").selectedIndex].value-0;
createMap(); tabobj.focus();
}
</script>
</head>
<body onload="createMap()" onkeydown="keyDown(event)" style="font-size:10pt;">
<form id="form1">
<center>
<br>
<table>
<tr>
<td>
<div id="map_div" style="border:rgb(231,24,220) solid 1px">
</div>
</td>
<td>
<div id="message_div" style="border:rgb(231,24,220) solid 1px" align="center">
<br><font color="red"><b>拼图游戏</b></font><br>
开始时间:<input type="text" id="startDate" readonly style="width:80px"><br>
现在时间:<input type="text" id="nowDate" readonly style="width:80px"><br>
游戏步数:<input type="text" id="yxbs" readonly value="0" style="width:80px"><br>
游戏难度:<select id="yxn" style="width:86px" onchange="setGameNan()">
<option value="3">3 * 3</option>
<option value="4">4 * 4</option>
<option value="5">5 * 5</option>
<option value="6">6 * 6</option>
<option value="10">10 * 10</option>
</select>
<br><br> <font color="red"><b>游戏规则</b></font><br>
(1)只要拼成如下图你就赢了:
<br><br>
<img id="imgid" width="100px" height="100px" border="1">
</div>
</td>
</tr>
</table>
<br>
</center>
</form>
</body>
</html>
解决方案 »
- 初学:jquery中的callback没有被调用到
- 页面后退,数据重复提交问题?大家帮帮我,谢谢了!
- 求助javascript求100以内素数代码
- 怎么限制用户选择次数?(100分)
- System.Web.UI.WebControls.Menu控件能不能用JavaScript做它的点击,这样点击时不会提交页面
- 怎么样实现类似EXCLE的效果
- 请教一下confirm()函数的问题 谢谢各位了
- 用window.open('http://61.175.132.105/broad/speedwordList.jsp',650,480.)弹出的窗口怎样控制父窗口
- 在javascript中如何对数字进行四舍五入取整?
- ShowModalDialog对话框似乎没有History,如何解决?
- 动态添加的blur事件失效
- 不知道采用哪种播放器合适?
方便大家学习
特别是俺这种JS菜鸟...
上面的80%JS代码看不懂.....
可惜,大部分JS代码看不懂...
我还配合着百度在看...
有点晕...郁闷 怪自己JS水平几乎为0...楼主下次在发布游戏的时候,可以把注释多写点嘛?最好是写满,哈哈...弄成的好像JS学习代码.
我一直想找个像某网站那样的在线拼图游戏,不是这种计算步数的,就是用户自己上传图片,然后可以自定义切成某个数量的碎片,操作是用鼠标拖(碎片位置初始化是杂乱无章的,会互相覆盖,不是每个碎片占一个格子这种),然后有时间统计和记录,以及用户排名等,
可惜游戏是flash的,用图片生成游戏是php写的