更多>
最新下载
24小时阅读排行榜
- 1 喜马拉雅电脑版安装版_喜马拉雅电脑安装版获取与安装
- 2 Python 实战:博客内容管理系统雏形
- 3 家具积灰怎么擦更省力?
- 4 如何理解JavaScript中的对象创建模式?
- 5 PHP动态网页RSS订阅生成_PHP动态网页RSSfeed订阅源创建指南
- 6 如何通过JavaScript实现星级评分组件?
- 7 谷歌地球pro专业版免费下载_谷歌卫星地图2025超清版直接进入
- 8 扫描全能王怎么分类文档_扫描全能王文件夹分类管理指南
- 9 poki跑酷游戏免费体验_poki小游戏休闲跑酷免下载玩
- 10 喜马拉雅山录音导电脑_喜马拉雅录音导出到电脑教程
- 11 使用Python检测Ctrl+R组合键并重启程序
- 12 电脑上搜狗输入法怎么调出来_电脑搜狗输入法呼出与切换
- 13 万兴数据管家功能详解 微信记录恢复与数据管理教程
- 14 phpcms模板中截取字符串方法
- 15 哈啰出行账号注册指南_一步步教你注册哈啰出行APP账号
更多>
最新教程
-
- Node.js 教程
- 3007 2025-08-28
-
- CSS3 教程
- 345743 2025-08-27
-
- Rust 教程
- 3739 2025-08-27
-
- Vue 教程
- 4506 2025-08-22
-
- PostgreSQL 教程
- 4639 2025-08-21
-
- Git 教程
- 3479 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>
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>


本站所有资源都是由网友投搞发布,或转载各大下载站,请自行检测软件的完整性!本站所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!如有侵权请联系我们删除下架,联系方式:admin@php.cn