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实现简单的抽奖游戏
May 05 jQuery
jquery replace方法去空格
May 08 jQuery
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
jQuery鼠标移动图片上实现放大效果
Jun 25 jQuery
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 jQuery
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 jQuery
jQuery中$原理实例分析
Aug 13 jQuery
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 jQuery
JQuery发送ajax请求时中文乱码问题解决
Nov 14 jQuery
jquery检测上传文件大小示例
Apr 26 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
php开发微信支付获取用户地址
2015/10/04 PHP
js脚本学习 比较实用的基础
2006/09/07 Javascript
js 发个判断字符串是否为符合标准的函数
2009/04/27 Javascript
JavaScript 异步调用框架 (Part 2 - 用例设计)
2009/08/03 Javascript
Visual Studio中的jQuery智能提示设置方法
2010/03/27 Javascript
jQuery fadeTo方法调整图片的透明度使用介绍
2013/05/06 Javascript
通过Javascript读取本地Excel文件内容的代码示例
2014/04/08 Javascript
javascript刷新父页面的各种方法汇总
2014/09/03 Javascript
基于html5和nodejs相结合实现websocket即使通讯
2015/11/19 NodeJs
jQuery实现form表单基于ajax无刷新提交方法详解
2015/12/08 Javascript
基于javascript数组实现图片轮播
2016/05/02 Javascript
Struts2+jquery.form.js实现图片与文件上传的方法
2016/05/05 Javascript
javascript实现随机生成DIV背景色
2016/06/20 Javascript
seajs学习之模块的依赖加载及模块API的导出
2016/10/20 Javascript
详解AngularJS中的表单验证(推荐)
2016/11/17 Javascript
vue指令以及dom操作详解
2017/03/04 Javascript
JS 实现banner图片轮播效果(鼠标事件)
2017/08/04 Javascript
浅析node Async异步处理模块用例分析及常用方法介绍
2017/11/17 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
2018/08/28 Javascript
Python Django框架防御CSRF攻击的方法分析
2019/10/18 Python
Python图片的横坐标汉字实例
2019/12/04 Python
python实现串口通信的示例代码
2020/02/10 Python
python实现四人制扑克牌游戏
2020/04/22 Python
CSS的background属性及CSS3的背景图片设置总结
2016/06/13 HTML / CSS
美国复古街头服饰精品店:Need Supply Co.
2017/02/22 全球购物
英国在线汽车和面包车零件商店:Car Parts 4 Less
2018/08/15 全球购物
C,C++的几个面试题小集
2013/07/13 面试题
高中自我评价范文
2014/01/27 职场文书
幼儿园六一儿童节文艺汇演主持词
2014/03/21 职场文书
人大调研汇报材料
2014/08/14 职场文书
写给父母的感谢信
2015/01/22 职场文书
北京导游词
2015/02/12 职场文书
元宵节寄语大全
2015/02/27 职场文书
python opencv人脸识别考勤系统的完整源码
2021/04/26 Python
Pytorch中Softmax与LogSigmoid的对比分析
2021/06/05 Python
图片批量处理 - 尺寸、格式、水印等
2022/03/07 杂记