搜索

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

jQuery人物图片拼图游戏代码

jQuery人物图片拼图游戏代码

jQuery人物图片拼图游戏代码
分类:   js特效 / jQuery特效 发布时间:  2018-02-22 访问量:  1370
下载量:  56
点击下载 预览效果
更多>

最新下载

jQuery企业留言表单联系代码

jQuery企业留言表单联系代码是一款简洁实用的企业留言表单和联系我们介绍页面代码。
118 2024-02-29

HTML5 MP3音乐盒播放特效

HTML5 MP3音乐盒播放特效是一款基于html5+css3制作可爱的音乐盒表情,点击开关按钮mp3音乐播放器。
112 2024-02-29

HTML5炫酷粒子动画导航菜单特效

HTML5炫酷粒子动画导航菜单特效是一款导航菜单采用鼠标悬停变色的特效。
142 2024-02-29

jQuery可视化表单拖拽编辑代码

jQuery可视化表单拖拽编辑代码是一款基于jQuery和bootstrap框架制作可视化表单。
102 2024-02-29

VUE.JS仿酷狗音乐播放器代码

VUE.JS仿酷狗音乐播放器代码是一款基于js跟css3实现的仿酷狗网页音乐播放器特效。
84 2024-02-29

经典html5推箱子小游戏

经典html5推箱子小游戏总共有100关,移动方式有上下左右按键。
134 2024-02-29
更多>

最新教程

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

相关推荐

jQuery人物图片拼图游戏代码

jQuery人物图片拼图游戏代码
jQuery特效
2018-02-22

jQuery-人物拼图游戏代码

jQuery-人物拼图游戏代码
jQuery特效
2018-06-30

jQuery人物图片拼图小游戏代码

jQuery人物图片拼图小游戏代码
html5特效
2018-05-25

jQuery游戏人物图片切换代码

jQuery游戏人物图片切换代码
jQuery特效
2018-06-27

jQuery全屏游戏人物图片淡出淡进切换代码

jQuery全屏游戏人物图片淡出淡进切换代码
jQuery特效
2018-05-16

JS拼图游戏代码

JS拼图游戏代码,点击选中一个区块,在点击到其它区块,图片互相替换过程。
图片特效
2017-09-01

H5+3D魔方旋转拼图小游戏代码

H5+3D魔方旋转拼图小游戏代码
html5特效
2018-06-06

jQuery人物头像消消乐游戏代码

jQuery人物头像消消乐游戏代码是一款类似宝石迷阵类的方块消除类型小游戏。
jQuery特效
2017-03-27

热门下载

jQuery左侧下拉导航菜单后台框架模板

jQuery制作左侧垂直下拉导航栏,内嵌iframe导航菜单后台页面模板。
菜单导航
2021-02-04

科技感的数字时钟vue特效

时钟,html5时钟,vue
时间日期
2021-06-17

炫酷的光标丝带鼠标移动特效

基于canvas制作炫酷的鼠标移动线条动画,丝带光标动画特效。
鼠标特效
2021-02-22

canvas音谱可视化mp3音乐播放器代码

html5 canvas通过AudioContext对获取audio标签播放的音域和音高,调用js绘制相应高度的矩形或线条。
播放器特效
2021-03-10

创意的时间轮盘时钟特效

js css3制作全屏的轮盘时钟,时间轮盘旋转动画特效。
时间日期
2021-01-20

迷你音乐播放器vue特效

html5 vue制作多功能mp3音乐播放器,带专辑图片,点赞收藏,上一首/下一首/开始/暂停切换,社交转载,播放进度条等功能演示特效。
播放器特效
2021-02-18
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号