当前位置：首页 > 下载站 > js特效 > jQuery特效 > jQuery人物图片拼图游戏代码

jQuery人物图片拼图游戏代码

分类: js特效 / jQuery特效	发布时间: 2018-02-22	访问量: 1442
下载量: 56

点击下载预览效果

更多>

最新下载

JS带提示登录表单验证代码

JS带提示登录表单验证代码是一款原生js实现，用户名首字符只能为小写字母6到20位，密码至少6位。

0 2026-01-18

jQuery鼠标悬停九宫格图片延伸效果

jQuery鼠标悬停九宫格图片延伸效果是一款鼠标悬停在任意一个宫格内，分别上下左右四个方向延伸出四个图片，且当前宫格内显示半透明链接效果。

0 2026-01-18

jQuery表单美化实例代码

jQuery表单美化实例代码是一款制作input输入框，select下拉框，复选框，单选框表单美化实例代码。

0 2026-01-18

jQuery实现点击替换图片

jQuery实现点击替换图片是一款基于jquery实现的点击图片自动切换到下一张图片。本作品由【站长素材】收集整理，转载请注明出处！

0 2026-01-18

jQuery下拉单选多选城市选择代码

jQuery下拉单选多选城市选择代码是一款select下拉框美化和下拉城市选择插件。

1 2026-01-18

jquery背景图片轮播特效

jquery背景图片轮播特效是一款支持图片左右滑动，图片自动播放，带左右控制按钮。

0 2026-01-18

24小时阅读排行榜

更多>

最新教程

最新Python教程从入门到精通

Node.js 教程

15719 2025-08-28
CSS3 教程

1545372 2025-08-27
Rust 教程

22948 2025-08-27
Vue 教程

25428 2025-08-22
PostgreSQL 教程

21972 2025-08-21
Git 教程

8983 2025-08-21

jQuery人物图片拼图游戏代码

这是一款简单好玩的jQuery人物图片拼图游戏代码，点击开始游戏随机打乱图片，有时间和操作步数记录。

js代码
<script type="text/javascript">
$(function(){
var tt=null;
// 游戏完成时间和步数
var times=0;
var time=0;
// 打乱之前的图片数组准备加油
var src= Array();
src.push("images/201.png");
src.push("images/202.png");
src.push("images/203.png");
src.push("images/204.png");
src.push("images/205.png");
src.push("images/206.png");
src.push("images/207.png");
src.push("images/208.png");
src.push("images/209.png");
// 按钮事件加油。。。开始游戏

$('#button').click(function(){
clearInterval(tt)
// 时间归0
time=0;
times=0;
// 来来来设置时间；了
tt=setInterval(shij,1000)
function shij(){
time++;
$(".time>p>span").text(time)
}
// 乱序排列
var srcUsing= new Array();
for(var p=0; p<src.length;p++){
srcUsing[p]=src[p];
}
var newArry= new Array();
for(var i=0;i< $("#box img").length;i++){
newArry.push(srcUsing.splice(Math.floor(Math.random()*srcUsing.length), 1));
}
for(var j=0;j<newArry.length;j++){
$("#box img").eq(j).attr("src",String(newArry[j]));
}

// 设置一个空白图片，
var Arrps=document.getElementById("box").getElementsByTagName("img");
for(var i=0;i<Arrps.length;i++){
Arrps[i].onclick=function(){
if (this.getAttribute("src")=="images/201.png");
changeP(this,Arrps);
};
}
})

// 判断位置
function changeP(ob,Arrps){
var Ni=0;
var Nj=0;

for(var i=0;i<Arrps.length;i++){
if(Arrps[i]==ob)
{
// alert(ob)
Ni=i;
}

if(Arrps[i].getAttribute("src")=="images/201.png")
{
Nj=i;
}

}
// 绝对值
if(Math.abs(Ni-Nj)==3)
{
var temperOb=ob.getAttribute("src");
ob.setAttribute("src","images/201.png");
Arrps[Nj].setAttribute("src",temperOb);
times++;
ifright();

}else if((Ni-Nj)==1&&(Ni%3)!=0){
var temperOb=ob.getAttribute("src");
ob.setAttribute("src","images/201.png");
Arrps[Nj].setAttribute("src",temperOb);
times++;
ifright();

}else if((Ni-Nj)==-1&&(Ni%3)!=2){
var temperOb=ob.getAttribute("src");
ob.setAttribute("src","images/201.png");
Arrps[Nj].setAttribute("src",temperOb);
times++;
ifright();
}
$(".bu>p>span").text(times)
}

function ifright(){
var ps=document.getElementById("box");
var Arrps=ps.getElementsByTagName("img");
for(var i=0;i<src.length;i++){
if(src[i]!=Arrps[i].getAttribute("src")) return;
}
alert("恭喜，你成功了。。"+"\n"+"用了"+times+"步")
}
})

</script>