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);
};
}
})
// 雪花
函数changeP(ob,Arrps){
var Ni=0;
var Nj=0;
for(var i=0;i
{
# // 警报(OB)
Ni=i;
}
if(Arrps[i].getAttribute("src")=="images/201.png")
{
# Nj=i;
}
}
// 背景### if ( Math .abs( Ni - Nj ) == 3 )
{
# var tempOb=ob.getAttribute("src");
ob.setAttribute("src","images/201.png"); Arrps[Nj].setAttribute("src",temperOb);
次;
ifright();
}否则 if((If-Nj)==1&&(If%3)!=0){
var tempOb=ob.getAttribute("src");
ob.setAttribute("src","images/201.png"); Arrps[Nj].setAttribute("src",temperOb);
次;
ifright();
}否则 if((If-Nj)==-1&&(If%3)!=2){
var tempOb=ob.getAttribute("src");
ob.setAttribute("src","images/201.png"); Arrps[Nj].setAttribute("src",temperOb);
次;
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
相关文章
25 Apr 2018
这次给大家带来jQuery实现表单里文字按钮特效合集,jQuery实现表单里文字按钮特效的注意事项有哪些,下面就是实战案例,一起来看一下。
06 Dec 2024
使用 jQuery 和 JavaScript 解析 JSON 数据这个简短的教程解决了有效操作 JSON 数据的挑战,特别是...
20 Nov 2020
jQuery与Zepto区别:1、添加id时jQuery不会生效而Zepto会生效;2、zepto中没有为原型定义extend方法而jquery有;3、zepto由盒模型决定,而jquery会忽略盒模型。
28 Apr 2022
css3动画和jquery动画的区别:1、css3可以设置3d动画,jquery不能实现3d动画;2、css的2d矩阵动画效率较高,其他属性动画效率低,jquery利用margin和left、top模拟的矩阵动画效率低,其他属性动画效率高。
26 Aug 2020
1. jQuery是一个JavaScript函数库。jQuery是一个轻量级的"写的少,做的多"的JavaScript库。jQuery库包含以下功能:HTML 元素选取HTML 元素操作CSS 操作HTML 事件函数JavaScript 特效和动画HTML DOM 遍历和修改AJAXUtilities2.jQury优势 轻量级、强大...
Hot Tools
jQuery2019情人节表白放烟花动画特效
一款抖音上很火的jQuery情人节表白放烟花动画特效,适合程序员、技术宅用来向心爱的姑娘表白,无论你选择愿意还是不愿意,到最后都得同意。
layui响应式动画登录界面模板
layui响应式动画登录界面模板
520情人节表白网页动画特效
jQuery情人节表白动画、520表白背景动画
炫酷的系统登录页
炫酷的系统登录页
HTML5磁带音乐播放器-CASSETTE PLAYER
HTML5磁带音乐播放器-CASSETTE PLAYER