jQuery实现拼图小游戏(实例讲解)


Posted in jQuery onJuly 24, 2017

小熊维尼拼图

jQuery代码实现拼图小游戏,鼠标选中拼块,用上下左右键移动拼块。

jQuery实现拼图小游戏(实例讲解)jQuery实现拼图小游戏(实例讲解)jQuery实现拼图小游戏(实例讲解)
jQuery实现拼图小游戏(实例讲解)jQuery实现拼图小游戏(实例讲解)jQuery实现拼图小游戏(实例讲解)
jQuery实现拼图小游戏(实例讲解)jQuery实现拼图小游戏(实例讲解)jQuery实现拼图小游戏(实例讲解)

html代码

<div id="box-div">
  <!--走不通时的提示!-->
  <div id="tips">
    <p>\(?-?)/ 哎呦,走不通啦!</p>
  </div>
  <div id="container">
    <div class="row">
      <div class="unit"><img src="http://yn321.cn3v.net/images/weini_part_01.png" alt="photo1"/></div>
      <div class="unit"><img src="http://yn321.cn3v.net/images/weini_part_02.gif" alt="photo2"/></div>
      <div class="unit"><img src="http://yn321.cn3v.net/images/weini_part_03.gif" alt="photo3"/></div>
    </div>
    <div class="row">
      <div class="unit"><img src="http://yn321.cn3v.net/images/weini_part_04.gif" alt="photo4"/></div>
      <div class="unit"><img src="http://yn321.cn3v.net/images/weini_part_05.gif" alt="photo5"/></div>
      <div class="unit"><img src="http://yn321.cn3v.net/images/weini_part_06.gif" alt="photo6"/></div>
    </div>
    <div class="row">
      <div class="unit"><img src="http://yn321.cn3v.net/images/weini_part_07.gif" alt="photo7"/></div>
      <div class="unit"><img src="http://yn321.cn3v.net/images/weini_part_08.gif" alt="photo8"/></div>
      <div class="unit"><img src="http://yn321.cn3v.net/images/weini_part_09.gif" alt="photo9"/></div>
    </div>
  </div>
</div
#box-div {
  position: relative;
  width: 508px;
  height: 631px;
  margin: 0 auto;
}

#container {
  width: 508px;
  height: 631px;
  margin: 0 auto;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #d5e0e6;
}

#container > .row {
  display: -webkit-box;
  white-space: nowrap;
}

#container > .row > .unit {
  width: 169px;
  height: 209px;
  display: inline-block\9;/*兼容IE9/10*/
  vertical-align: top\9;/*兼容IE9/10*/
  box-sizing: border-box;
  border: 1px solid rgba(7, 157, 239, 0);
}

#container > .row > .unit.move {
  border: 1px solid rgba(7, 157, 239, 1);
}

#tips {
  width: 200px;
  height: 50px;
  background: rgb(152, 206, 50);
  position: absolute;
  z-index: 5;
  top: -50px;
  left: calc(50% - 100px);
  opacity: 0;
}

#tips > p {
  margin: 0;
  line-height: 50px;
  text-align: center;
  color: white;
}
.directions{
  width:50%;
  margin:0 auto;
  text-align: center;
  line-height: 30px;
  color: white;
  background-color: #a7cbf0;
}

jquery代码

$("#container>.row>.unit>img").each(function () {
  $(this).click(function (event) {
    event.stopPropagation();
    $(".unit").removeClass("move");
    $(this).parent(".unit").addClass("move");
  })
});
move(".move","#tips");
function move(className,idName) {
  /* 提示信息 */
  function tipsAlert(idName) {
    $(idName).animate({top: "0", opacity: "1"}, 500);
    setTimeout(function () {
      $(idName).animate({top: "-50px", opacity: "0"}, 800);
    }, 1000)
  }
  /* 上下左右按键移动 */
  $(document).keydown(function (e) {
    var code = e.keyCode;
    if (code > 40 || code < 37) {
      return false;
    }
    var prev = $(className)[0].previousElementSibling;//选中元素前置位元素是否存在,以此判断元素是否还可以左右移动
    var next = $(className)[0].nextElementSibling;//选中元素后置位元素是否存在,以此判断元素是否还可以左右移动
    var paprev = $(className).parent()[0].previousElementSibling;//选中元素父级前置位元素是否存在,以此判断元素是否还可以上下移动
    var panext = $(className).parent()[0].nextElementSibling;//选中元素父级后置位元素是否存在,以此判断元素是否还可以上下移动
    var index = $(className).index();//根据选中元素的索引值,来确定上下移动时对换的位置
    var movenDiv = $(className).next()[0];//以此确定上下对换元素添加方式
    var movepDiv = $(className).prev()[0];//以此确定上下对换元素添加方式
    switch (code) {
      case 37://左
        if (prev) {
          $(className).insertBefore(prev);
        } else {
          tipsAlert(idName);
        }
        break;
      case 38://上
        if (paprev) {
          var exchangeTop = $(paprev).children()[index];
          $(className).insertBefore(exchangeTop);
          if (movenDiv) {
            $(exchangeTop).insertBefore(movenDiv);
          } else {
            $(exchangeTop).insertAfter(movepDiv)
          }

        } else {
          tipsAlert(idName);
        }
        break;
      case 39://右
        if (next) {
          $(className).insertAfter(next);
        } else {
          tipsAlert(idName)
        }
        break;
      case 40://下
        if (panext) {
          var exchangeBottom = $(panext).children()[index];
          $(className).insertBefore(exchangeBottom);
          if (movenDiv) {
            $(exchangeBottom).insertBefore(movenDiv);
          } else {
            $(exchangeBottom).insertAfter(movepDiv)
          }
        } else {
          tipsAlert(idName);
        }
        break;

    }
  });


}

以上这篇jQuery实现拼图小游戏(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
jQuery实现的简单在线计算器功能
May 11 jQuery
jQuery实现手势解锁密码特效
Aug 14 jQuery
jQuery实现的简单前端搜索功能示例
Oct 28 jQuery
jquery animate动画持续运动的实例
Nov 29 jQuery
jquery radio 动态控制选中失效问题的解决方法
Feb 28 jQuery
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 jQuery
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
jQuery pjax 应用简单示例
Sep 20 jQuery
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 jQuery
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 jQuery
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 jQuery
jquery实现下拉菜单的手风琴效果
Jul 23 #jQuery
jQuery.Ajax()的data参数类型详解
Jul 23 #jQuery
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 #jQuery
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 #jQuery
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 #jQuery
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 #jQuery
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 #jQuery
You might like
这部好评如潮的动漫 知名梗频出 但是画风劝退很多人
2020/03/08 日漫
php json_encode奇怪问题说明
2011/09/27 PHP
PHP实现的memcache环形队列类实例
2015/07/28 PHP
thinkPHP框架通过Redis实现增删改查操作的方法详解
2019/05/13 PHP
JS获取农历日期具体实例
2013/11/14 Javascript
js charAt的使用示例
2014/02/18 Javascript
JavaScript通过prototype给对象定义属性用法实例
2015/03/23 Javascript
Eclipse引入jquery报错如何解决
2015/12/01 Javascript
EasyUi中的Combogrid 实现分页和动态搜索远程数据
2016/04/01 Javascript
Bootstrap的modal拖动效果
2016/12/25 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
2017/03/06 Javascript
jQuery鼠标悬停内容动画切换效果
2017/04/27 jQuery
vue mint-ui学习笔记之picker的使用
2017/10/11 Javascript
vue v-model实现自定义样式多选与单选功能
2018/07/05 Javascript
微信小程序 高德地图路线规划实现过程详解
2019/08/05 Javascript
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
2019/09/04 Javascript
elementUI同一页面展示多个Dialog的实现
2020/11/19 Javascript
[02:40]DOTA2超级联赛专访430 从小就爱玩对抗性游戏
2013/06/18 DOTA
使用Python脚本和ADB命令实现卸载App
2017/02/10 Python
python opencv之分水岭算法示例
2018/02/24 Python
pytorch 把MNIST数据集转换成图片和txt的方法
2018/05/20 Python
pip命令无法使用的解决方法
2018/06/12 Python
Python 使用matplotlib模块模拟掷骰子
2019/08/08 Python
Python中正反斜杠(‘/’和‘\’)的意义与用法
2019/08/12 Python
详解基于python-django框架的支付宝支付案例
2019/09/23 Python
selenium+Chrome滑动验证码破解二(某某网站)
2019/12/17 Python
英国鞋网:Rubber Sole
2020/03/03 全球购物
商务日语毕业生自荐信
2013/11/23 职场文书
西门豹教学反思
2014/02/04 职场文书
新闻专业毕业生英文求职信
2014/03/19 职场文书
党校培训自我鉴定范文
2014/03/20 职场文书
工商企业管理专业自荐信范文
2014/04/12 职场文书
2014大四本科生自我鉴定总结
2014/10/04 职场文书
教代会开幕词
2015/01/28 职场文书
2015羊年春节慰问信
2015/02/14 职场文书
学校食堂食品安全承诺书
2015/04/29 职场文书