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-block9;/*兼容IE9/10*/
  vertical-align: top9;/*兼容IE9/10*/								 
 1/3    1 2 3 下一页 尾页