代码之家(www.adminjie.com)精品网站源码,微信源码,游戏源码分享平台。《交流群:1037940574》
当前位置:网站首页 免费源码 html5 css3 正文

jQuery手机夹娃娃机小游戏代码

时间:2020-06-13 [html5 css3]作者:adminjie 浏览:163 次

jQuery手机夹娃娃机小游戏代码

特效描述:jQuery 手机夹娃娃机 小游戏代码,jQuery手机端实现的抓娃娃机游戏,夹娃娃小游戏源码。容易扩展,拿来就能用。ps:请手机扫码演示。

list-style: none; font-family: 微软雅黑, 宋体, "Helvetica Neue", Arial, Helvetica, sans-serif; font-weight: 500; line-height: 1.1; color: rgb(100, 100, 100); font-size: 24px; border-bottom: 1px solid rgb(235, 235, 235); background-color: rgb(255, 255, 255);">代码结构

1. 引入JS

number1 index0 alt2" class="page_speeder_725640515">1
<script src=string" class="page_speeder_1041339079">"js/jquery-1.11.0.min.js"></script>

2. HTML代码

<!--盒子-->  <div class="box">      <!--爪子-->      <div class="paw">          <div class="pawer"></div>          <div class="pawerPic">              <img src="images/jiazi.png"/ class="lose">              <div class="win">                  <img src="images/mks1.png">              </div>          </div>      </div>      <!--区域-->      <div class="area">          <!--娃娃滚动-->          <div id="pack">              <div id="sel1">                  <img src="images/mks1.png" tr="1"/>                  <img src="images/mks2.png" tr="2"/>                  <img src="images/mks3.png" tr="3"/>                  <img src="images/mks4.png" tr="4"/>                  <img src="images/mks5.png" tr="5"/>                  <img src="images/mks6.png" tr="6"/>                  <img src="images/mks7.png" tr="7"/>                  <img src="images/mks8.png" tr="8"/>              </div>              <div id="sel2"></div>          </div>      </div>      <!--按钮(真)-->      <div class="btn">          <!--点击前-->          <div class="btn_star"></div>          <!--点击后-->          <div class="btn_end"></div>      </div>  </div>  <script>  window.onload=function(){      var k=0;//可以点击      var c=0;//娃娃的      scrollLeft();//娃娃滚动      var talon=$(".pawerPic").offset().left+55//首先获取爪子的位置(这里是固定的)      console.log(talon)      /*声明变量*/      var areaHeight=$("body").height()-150//活动区域的高      var long=areaHeight-115//爪子伸长的距离(目前娃娃的高度暂定为115px;)      /*赋值给活动区域高度*/      $(".area").css({height:areaHeight})      /*娃娃滚动*/      function scrollLeft(){      var speed=20;      var yu=$("#sel1").html();      $("#sel2").html(yu);          function Marquee(){          c++          if($("#sel2").width()-$("#pack").scrollLeft()<=0){          c=0                  $("#pack").scrollLeft(c);              }else{              $("#pack").scrollLeft(c);              }          }//Marquee结束          var timer=setInterval(Marquee,speed);          /*点击按钮*/          $(".btn_star").bind('touchstart',function(){              $(this).css({display:"none"})//单纯的按钮样式              $(".pawer").animate({height:long},2000);//伸下去(绳子)              $(".pawerPic").animate({top:long+20},2000);//伸下去(爪子)              /*抓到娃娃*/              function fn(t_img){              $(".pawerPic").addClass("on");              $(".win img").attr("src",t_img)          };              /*娃娃消失*/              function end(){              $(".pawerPic").removeClass("on")              }              /*按钮点击*/              function btn(){              $(".btn_star").css({display:"block"})              }//控制按钮是否可以点击              /*判断抓没抓到娃娃*/              if_ok=setTimeout(ok_no,2000);              function ok_no(){                  /*打印出此时此刻每个娃娃的位置*/                  for(var i=0;i<$("#pack img").length;i++){                  var l=$("#pack img").eq(i).offset().left+41.61//此时此刻每个娃娃的位置                  if(l-20<=talon&&talon<=l+20){                      alert("你抓到了狗屎")                      var t_img=$("#pack img").eq(i).attr("src")                      time_zz=setTimeout(fn(t_img),0)                      return                  }                  /*然后和爪子的位置进行比较*/                      console.log("狗屎都没抓到")                  }              }              /*事件调用*/              //time_zz=setTimeout(fn,2000);//抓到娃娃              time_xs=setTimeout(end,4000);//娃娃消失              time_ww=setTimeout(btn,4000);//按钮点击              $(".pawer").animate({height:20},2000);//缩回来(绳子)              $(".pawerPic").animate({top:40},2000);//缩回来(爪子)              })      }//scrollLeft结束  }//window.onload结束  </script>

jQuery手机夹娃娃机小游戏代码


大小 : 276 KB |  下载量 : 0  |  文件类型 : 压缩文件  

转载请注明来源:jQuery手机夹娃娃机小游戏代码

本文永久链接地址:https://www.adminjie.com/post/2823.html

免责声明:
本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

附:
二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!

版权声明:
一、本站致力于为软件爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的部分源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的,若有侵犯你的权益请:点此维权 站长会进行审查之后,情况属实的会在三个工作日内为您删除。

  • 代码之家会员升级
  • 最新文章
    • 紫色店铺商家信息后台管理模板

      紫色店铺商家信息后台管理模板

      紫色店铺商家信息后台管理模板紫色店铺商家信息后台管理模板基于Bootstrap2.3.2制作,DIV+CSS布局,全套模板,包括登录、模块设置、样式模板设置、文...

    • 蓝色企业CMS网站后台管理模板

      蓝色企业CMS网站后台管理模板

      蓝色企业CMS网站后台管理模板蓝色企业CMS响应式后台管理模板基于Bootstrap3.0.0制作,自适应分辨率,兼容PC端和移动端,全套模板,包括产品管理、资...

    • 简洁商城系统后台管理模板

      简洁商城系统后台管理模板

      简洁商城系统后台管理模板简洁商城系统后台管理模板,简单,大气,全套模板,包括登录、旅游管理、系统管理、信息管理等后台模板页面。...

    • 公司网站发展时间轴特效

      公司网站发展时间轴特效

      公司网站发展时间轴特效一款简洁、美观的公司网站发展时间轴特效。...

    • 原生js日历控件年月日时间选择器代码

      原生js日历控件年月日时间选择器代码

      原生js日历控件年月日时间选择器代码特效描述:原生js日历控件年月日时间选择器,代码结构1.引入JS1<scriptsrc="laydat...

  • 阿里云大优惠
  • 热门文章