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
相关文章
18 Jan 2017
这是一款基于jquery的超逼真下雪场景特效。该特效使用jquery代码来动态插件html5 canvas元素,然后在canvas中制作下雪特效。
18 Jan 2017
这是一款使用jQuery和CSS3来制作的炫酷汉堡包变形动画特效。该特效通过通过jQuery来附加按钮事件,并通过CSS3 transform和animation来制作动画特效。
23 May 2023
随着互联网的普及,打字特效的应用越来越广泛,jquery打字特效也成为了许多网站开发人员的首选。然而,在实现这种特效的过程中,细节问题经常会影响用户体验,比如打字特效的回删问题。本文将介绍如何利用jquery打字特效停止回删,提高用户的浏览体验。jquery打字特效的实现可以使用现成的插件,如typed.js和jQuery.Typewriter等。这些插件都是基于jquery的
16 May 2016
jquery提示效果有很多,本文也提供一个超漂亮的仿腾讯弹出层效果,热爱特效的你可千万不要错过了啊,希望本文提供的案例对你学习jquery特效有所帮助
16 May 2016
这篇文章主要介绍了jQuery实现带玻璃流光质感的手风琴特效,是一款基于jQuery+CSS3实现手风琴特效,希望你可以喜欢。
28 Nov 2017
jquery中我们最需要用的除了异步,就是动画和特效了吧,要想给用户更好的体验jquery是最好的选择,就让我们一起来看看jquery的动画、特效的详解吧
Hot tools Tags
Hot Tools
jQuery2019情人节表白放烟花动画特效
一款抖音上很火的jQuery情人节表白放烟花动画特效,适合程序员、技术宅用来向心爱的姑娘表白,无论你选择愿意还是不愿意,到最后都得同意。
layui响应式动画登录界面模板
layui响应式动画登录界面模板
520情人节表白网页动画特效
jQuery情人节表白动画、520表白背景动画
炫酷的系统登录页
炫酷的系统登录页
HTML5磁带音乐播放器-CASSETTE PLAYER
HTML5磁带音乐播放器-CASSETTE PLAYER