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中fade(),show()起始位置的一点小发现
Apr 25 jQuery
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 jQuery
基于JQuery的Ajax方法使用详解
Aug 16 jQuery
jQuery事件对象的属性和方法详解
Sep 09 jQuery
jQuery实现火车票买票城市选择切换功能
Sep 15 jQuery
jQuery实现html双向绑定功能示例
Oct 09 jQuery
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 jQuery
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 jQuery
jQuery实现的移动端图片缩放功能组件示例
May 01 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/04 星际争霸
PHP获取文件扩展名的4种方法
2015/11/24 PHP
PHP批量去除BOM头内容信息代码
2016/03/11 PHP
PHP中SQL查询语句的id=%d解释(推荐)
2016/12/10 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
Thinkphp极验滑动验证码实现步骤解析
2020/11/24 PHP
两个JavaScript jsFiddle JSBin在线调试器
2010/03/14 Javascript
使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能(含后台代码)
2011/07/10 Javascript
javascript 正则表达式相关应介绍
2012/11/27 Javascript
使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
2013/11/05 Javascript
如何从jQuery的ajax请求中删除X-Requested-With
2013/12/11 Javascript
JavaScript Function函数类型介绍
2015/04/08 Javascript
原生js仿jquery实现对Ajax的封装
2016/10/04 Javascript
AngularJS入门示例之Hello World详解
2017/01/04 Javascript
原生js实现验证码功能
2017/03/16 Javascript
详解Javascript 中的 class、构造函数、工厂函数
2017/12/20 Javascript
JS内部事件机制之单线程原理
2018/07/02 Javascript
JS返回页面时自动回滚到历史浏览位置
2018/09/26 Javascript
Vue中的vue-resource示例详解
2018/11/02 Javascript
js实现下拉框二级联动
2018/12/04 Javascript
JS实现动态添加外部js、css到head标签的方法
2019/06/05 Javascript
Vuejs通过拖动改变元素宽度实现自适应
2020/09/02 Javascript
vue组件入门知识全梳理
2020/09/21 Javascript
Python访问纯真IP数据库脚本分享
2015/06/29 Python
浅析Python编写函数装饰器
2016/03/18 Python
详解django中自定义标签和过滤器
2017/07/03 Python
pandas 实现将重复表格去重,并重新转换为表格的方法
2018/04/18 Python
python多线程分块读取文件
2019/08/29 Python
Jupyter Notebook打开任意文件夹操作
2020/04/14 Python
详解win10下pytorch-gpu安装以及CUDA详细安装过程
2021/01/28 Python
科茨沃尔德家居商店:Scotts of Stow
2018/06/29 全球购物
《小猪家的桃花树》教学反思
2014/04/11 职场文书
银行求职信范文
2014/05/26 职场文书
JavaScript实现登录窗体
2021/06/22 Javascript
Python实现打乒乓小游戏
2021/09/25 Python
RestTemplate如何通过HTTP Basic Auth认证示例说明
2022/03/17 Java/Android