首页 JS特效 jQuery特效 jQuery人物图片拼图游戏代码

jQuery人物图片拼图游戏代码

jQuery人物图片拼图游戏代码

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);
         };
       }
       })
   
     
     // 雪花
    函数changeP(ob,Arrps){
           var Ni=0;
           var Nj=0;
          for(var i=0;i            if ( Arrps [ i ] == ob )
           {
#             // 警报(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

相关文章

HTML5超逼真下雪场景效果 HTML5超逼真下雪场景效果

18 Jan 2017

这是一款基于jquery的超逼真下雪场景特效。该特效使用jquery代码来动态插件html5 canvas元素,然后在canvas中制作下雪特效。

jQuery和CSS3超炫汉堡包变形动画特效 jQuery和CSS3超炫汉堡包变形动画特效

18 Jan 2017

这是一款使用jQuery和CSS3来制作的炫酷汉堡包变形动画特效。该特效通过通过jQuery来附加按钮事件,并通过CSS3 transform和animation来制作动画特效。

jquery打字特效停止回删 jquery打字特效停止回删

23 May 2023

随着互联网的普及,打字特效的应用越来越广泛,jquery打字特效也成为了许多网站开发人员的首选。然而,在实现这种特效的过程中,细节问题经常会影响用户体验,比如打字特效的回删问题。本文将介绍如何利用jquery打字特效停止回删,提高用户的浏览体验。jquery打字特效的实现可以使用现成的插件,如typed.js和jQuery.Typewriter等。这些插件都是基于jquery的

jQuery动画特效实例教程_jquery jQuery动画特效实例教程_jquery

16 May 2016

这篇文章主要介绍了jQuery动画特效,详细叙述了jQuery动画特效的实现方法,非常实用,需要的朋友可以参考下

漂亮的jquery提示效果(仿腾讯弹出层)_jquery 漂亮的jquery提示效果(仿腾讯弹出层)_jquery

16 May 2016

jquery提示效果有很多,本文也提供一个超漂亮的仿腾讯弹出层效果,热爱特效的你可千万不要错过了啊,希望本文提供的案例对你学习jquery特效有所帮助

jQuery实现带玻璃流光质感的手风琴特效_jquery jQuery实现带玻璃流光质感的手风琴特效_jquery

16 May 2016

这篇文章主要介绍了jQuery实现带玻璃流光质感的手风琴特效,是一款基于jQuery+CSS3实现手风琴特效,希望你可以喜欢。

jQuery动画与特效详解 jQuery动画与特效详解

28 Nov 2017

jquery中我们最需要用的除了异步,就是动画和特效了吧,要想给用户更好的体验jquery是最好的选择,就让我们一起来看看jquery的动画、特效的详解吧

jquery手风琴特效步骤详解 jquery手风琴特效步骤详解

24 Apr 2018

这次给大家带来jquery手风琴特效步骤详解,jquery实现手风琴特效的注意事项有哪些,下面就是实战案例,一起来看一下。

jquery实现数字滚动特效 jquery实现数字滚动特效

24 Apr 2018

这次给大家带来jquery实现数字滚动特效,jquery实现数字滚动特效的注意事项有哪些,下面就是实战案例,一起来看一下。

See all articles See all articles

Hot Tools

jQuery2019情人节表白放烟花动画特效

jQuery2019情人节表白放烟花动画特效

一款抖音上很火的jQuery情人节表白放烟花动画特效,适合程序员、技术宅用来向心爱的姑娘表白,无论你选择愿意还是不愿意,到最后都得同意。

layui响应式动画登录界面模板

layui响应式动画登录界面模板

layui响应式动画登录界面模板

520情人节表白网页动画特效

520情人节表白网页动画特效

jQuery情人节表白动画、520表白背景动画

炫酷的系统登录页

炫酷的系统登录页

炫酷的系统登录页

HTML5磁带音乐播放器-CASSETTE PLAYER

HTML5磁带音乐播放器-CASSETTE PLAYER

HTML5磁带音乐播放器-CASSETTE PLAYER