欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-11-20 08:54:49
小熊维尼拼图 jquery代码实现拼图小游戏,鼠标选中拼块,用上下左右键移动拼块。 html代码
...

小熊维尼拼图

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实现拼图小游戏(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。