<html>
<head>
<style>
#message{
position:absolute;
top:500px;
}
#refer{
position:absolute;
}
#dis{
font-size:40px;
position:absolute;
line-height:100%
}
input
{
font-size:20px;
font-weight:900;
cursor:pointer;
}
img{
position:absolute;
left:0px;
top:0px;
height=500;
}
td{
border:4px
}
</style>
<script language="javascript">
// var img=new Array(
// "rect(0px 100px 100px 0px)",
// "rect(0px 200px 100px 100px)",
// "rect(0px 300px 100px 200px)",
// "rect(0px 400px 100px 300px)",
// "rect(0px 500px 100px 400px)",
//
//
// "rect(100px 100px 200px 0px)",
// "rect(100px 200px 200px 100px)",
// "rect(100px 300px 200px 200px)",
// "rect(100px 400px 200px 300px)",
// "rect(100px 500px 200px 400px)",
//
// "rect(200px 100px 300px 0px)",
// "rect(200px 200px 300px 100px)",
// "rect(200px 300px 300px 200px)",
// "rect(200px 400px 300px 300px)",
// "rect(200px 500px 300px 400px)",
//
//
// "rect(300px 100px 400px 0px)",
// "rect(300px 200px 400px 100px)",
// "rect(300px 300px 400px 200px)",
// "rect(300px 400px 400px 300px)",
// "rect(300px 500px 400px 400px)",
//
//
// "rect(400px 100px 500px 0px)",
// "rect(400px 200px 500px 100px)",
// "rect(400px 300px 500px 200px)",
// "rect(400px 400px 500px 300px)",
// "rect(500px 600px 600px 500px)"
// );
var img=new Array();
var rand=new Array(
0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24
);
var ddd=0; //方向
var finish=false;
var newgame=false;
var step=0;
var hhh=document.getElementById("score");
var fff; //图像文件的路径
function getfile()
{
fff=document.getElementById("imgfile").value;
}
function file_ok()
{
fff=document.getElementById("imgfile").value;
preview();
document.getElementById(0).style.width="auto";
document.getElementById(0).style.height="auto";
www=document.getElementById(0).width;
hhh=document.getElementById(0).height;
k=www/hhh;
document.getElementById(0).style.width=500*k;
document.getElementById(0).style.height=500;
//每一列的间隔为dwidth,每一行的间隔为100px
dwidth=Math.floor(500*k/5);
}
//见图像切割成5行5列
function init_img_array()
{
file_ok();
for(i=0;i<25;i++)
{
hang=Math.floor(i/5);
lie=i%5;
document.getElementById(i).style.width=dwidth*5;
document.getElementById(i).src=fff;
img[i]="rect(" + hang*100+ "px " + dwidth*(lie+1) +"px " +(hang*100+100) +"px "+dwidth*lie+"px "+")";
}
img[24]="rect(1000px "+dwidth*11 +"px " +"1100px "+ dwidth*10+"px "+")";
document.getElementById("refer").src=fff;
document.getElementById("refer").style.left=dwidth*5+10;
document.getElementById("refer").style.width=400;
document.getElementById("refer").style.height=400/k;
document.getElementById("dis").style.left=dwidth*5+10;
document.getElementById("dis").style.top=400/k+10;
}
//如果数字为一位数,在前面加0,用于显示时间
function checkdata(i)
{
if(i<10){return "0"+i;}
else return i;
}
function preview()
{
document.getElementById(0).src=fff;
document.getElementById("info").innerHTML="说明:</br>1.浏览文件</br>2.选定文件</br>3.开始游戏"
}
//将图片打乱
function initpos()
{
init_img_array();
for(i=0;i<25;i++)
{
if(Math.round(Math.random()))
{
a=Math.round(24*Math.random());
b=rand[i];
rand[i]=rand[a];
rand[a]=b;
}
}
//rand[23]=24;
//rand[24]=23;
for(i=0;i<25;i++)
{
hang1=Math.floor(i/5);
lie1=i%5;
hang=Math.floor(rand[i]/5);
lie=rand[i]%5;
document.getElementById(i).style.top=
hang1*100-hang*100;
document.getElementById(i).style.left=
lie1*dwidth-lie*dwidth;
}
}
//游戏初始化
function init()
{
initpos();
for(i=0;i<25;i++)
{
document.getElementById(i).src=fff;
document.getElementById(i).style.clip=img[rand[i]];
}
}
//确定方向
function check(i)
{
//up
if(finish){ddd=0;return;}
if(i>4)
{
if(rand[i-5]==24)
{
ddd=1;
return true;
}
}
//down
if(i<20)
{
if(rand[i+5]==24)
{
ddd=3;
return true ;
}
}
//left
if(i%5)
{
if(rand[i-1]==24)
{
ddd=4;
return true;
}
}
//right
if((i+1)%5)
{
if(rand[i+1]==24)
{
ddd=2;
return true;
}
}
return false;
}
//移动图像
function move(i)
{
check(i);
if(check(i)&&(!finish));
{
switch(ddd)
{
//up
case 1:
{
document.getElementById(i).style.clip=img[24];
document.getElementById(i).style.top=((Math.floor(i/5-1))*100-(Math.floor(24/5))*100+100);
document.getElementById(i).style.left=(((i-5)%5)*dwidth-((24%5))*dwidth);
document.getElementById(i-5).style.clip=img[rand[i]];
document.getElementById(i-5).style.top=((Math.floor(i/5))*100-(Math.floor(rand[i]/5))*100-100);
document.getElementById(i-5).style.left=((i%5)*dwidth-((rand[i]%5))*dwidth);
rand[i-5]=rand[i];
rand[i]=24;
break;
}
//right
case 2:
{
document.getElementById(i).style.clip=img[24];
document.getElementById(i).style.top=((Math.floor((i+1)/5))*100-(Math.floor(24/5))*100);
document.getElementById(i).style.left=(((i+1)%5)*dwidth-((24%5))*dwidth-dwidth);
document.getElementById(i+1).style.clip=img[rand[i]];
document.getElementById(i+1).style.top=((Math.floor(i/5))*100-(Math.floor(rand[i]/5))*100);
document.getElementById(i+1).style.left=((i%5)*dwidth-((rand[i]%5))*dwidth+dwidth);
rand[i+1]=rand[i];
rand[i]=24;
break;
}
//down
case 3:
{
document.getElementById(i).style.clip=img[24];
document.getElementById(i).style.top=((Math.floor(i/5+1))*100-(Math.floor(24/5))*100-100);
document.getElementById(i).style.left=(((i+5)%5)*dwidth-((24%5))*dwidth);
document.getElementById(i+5).style.clip=img[rand[i]];
document.getElementById(i+5).style.top=((Math.floor(i/5))*100-(Math.floor(rand[i]/5))*100+100);
document.getElementById(i+5).style.left=((i%5)*dwidth-((rand[i]%5))*dwidth);
rand[i+5]=rand[i];
rand[i]=24;
break;
}
//left
case 4:
{
document.getElementById(i).style.clip=img[24];
document.getElementById(i).style.top=((Math.floor((i-1)/5))*100-(Math.floor(24/5))*100);
document.getElementById(i).style.left=(((i-1)%5)*dwidth-((24%5))*dwidth+dwidth);
document.getElementById(i-1).style.clip=img[rand[i]];
document.getElementById(i-1).style.top=((Math.floor(i/5))*100-(Math.floor(rand[i]/5))*100);
document.getElementById(i-1).style.left=((i%5)*dwidth-((rand[i]%5))*dwidth-dwidth);
rand[i-1]=rand[i];
rand[i]=24;
break;
}
}
ddd=0;
}
}
//是否开始新游戏
function gameflag()
{
newgame=true;
}
//检查游戏是否结束
function checkfinish()
{
for(i=0;i<25;i++)
{
if(rand[i]!=i){finish=false;return;}
}
finish=true;
}
//通过game()不断的检测游戏是否完成
function game()
{
if(newgame)
{
document.getElementById("score").innerHTML="";
init();
document.getElementById("info").style.color="black";
document.getElementById("info").innerHTML="开始拼图";
newgame=false;
}
checkfinish();
if(!finish)
{setTimeout("game()",100);}
if(finish)
{
document.getElementById("info").style.color="b
没有合适的资源?快使用搜索试试~ 我知道了~
拼图游戏,可选图(html+javascript)
共1个文件
html:1个
4星 · 超过85%的资源 需积分: 10 33 下载量 60 浏览量
2011-06-06
01:08:41
上传
评论 3
收藏 2KB RAR 举报
温馨提示
首先批评一下这个网站,刚才我写的东西就因为标题过长就被清掉了,很不爽。其次如题,自学者自己编写的5*5拼图游戏,还有很多地方须待改进。里面有一些注释,自己看吧。基本思想就是创建25个<img>标签 ,控制每个的切割位置和左上角位置。
资源推荐
资源详情
资源评论
收起资源包目录
拼图(可选图).rar (1个子文件)
拼图(可选图).html 9KB
共 1 条
- 1
资源评论
- PROC_WORD2013-11-20为什么我的不能显示图片、是要用特定的图片格式吗?
mecqt
- 粉丝: 0
- 资源: 1
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功