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版本 1.x? 2.x? 3.x?
Apr 01 jQuery
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 jQuery
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 jQuery
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 jQuery
JQuery复选框全选效果如何实现
May 08 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中反射的应用
2013/06/18 PHP
简单的php文件上传(实例)
2013/10/27 PHP
PHP上传Excel文件导入数据到MySQL数据库示例
2016/10/25 PHP
Jquery数独游戏解析(一)-页面布局
2010/11/05 Javascript
JavaScript中的函数(二)
2015/12/23 Javascript
angularjs封装bootstrap时间插件datetimepicker
2016/06/20 Javascript
功能强大的jquery.validate表单验证插件
2016/11/07 Javascript
Javascript面试经典套路reduce函数查重
2017/03/23 Javascript
用Vue编写抽象组件的方法
2019/05/06 Javascript
layui递归实现动态左侧菜单
2019/07/26 Javascript
javascript实现计算器功能
2020/03/30 Javascript
python中随机函数random用法实例
2015/04/30 Python
详解Python字符串对象的实现
2015/12/24 Python
Python的Django框架中使用SQLAlchemy操作数据库的教程
2016/06/02 Python
python的unittest测试类代码实例
2017/12/07 Python
pandas读取CSV文件时查看修改各列的数据类型格式
2019/07/07 Python
python 命令行传入参数实现解析
2019/08/30 Python
如何使用python进行pdf文件分割
2019/11/11 Python
python实现滑雪游戏
2020/02/22 Python
Python编程快速上手——正则表达式查找功能案例分析
2020/02/28 Python
django处理select下拉表单实例(从model到前端到post到form)
2020/03/13 Python
HTML5 canvas实现的静态循环滚动播放弹幕
2021/01/05 HTML / CSS
ONLY瑞典官网:世界知名服装品牌
2018/06/19 全球购物
电气自动化大学生求职信
2013/10/16 职场文书
理工科学生的自我评价
2013/12/15 职场文书
保安队长职务说明书
2014/02/23 职场文书
夜不归宿检讨书
2014/02/25 职场文书
校园联欢晚会主持词
2014/03/17 职场文书
车辆转让协议书
2014/04/15 职场文书
2014党员整改措施思想汇报
2014/10/07 职场文书
2014年行政助理工作总结
2014/11/19 职场文书
2014年财务个人工作总结
2014/12/08 职场文书
妈妈再爱我一次观后感
2015/06/08 职场文书
Go归并排序算法的实现方法
2022/04/06 Golang
SQL Server中的游标介绍
2022/05/20 SQL Server
MySQL数据库实验实现简单数据库应用系统设计
2022/06/21 MySQL