JQuery实现拼图数字游戏 

  1 <html>
  2 <head>
  3     <title>test</title>
  4     <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
  5     <script type="text/javascript">
  6         $(function () {
  7             //第一步：画界面
  8             var sHtml = "<tr>";
  9             var max = 16;
 10             for (var i = 1; i <= max; i++) {
 11                 if (i < max) {
 12                     sHtml += "<td>" + i + "</td>";
 13                     if (i % 4 == 0) {
 14 
 15                         sHtml += "</tr><tr>";
 16                     }
 17                 } else {
 18                     sHtml += "<td></td>";
 19                     sHtml += "</tr>";
 20 
 21                 }
 22 
 23             }
 24 
 25              $("#grid").html(sHtml);
 26 
 27             //第二步：处理数字的移动
 28             $("#grid td").click(function (e) {
 29                 //在处理事件之前找到要移动的元素
 30                 $td = $(this); //得到当前对象
 31 
 32                 var idx = $td.prevAll().length; //查找当前元素之前的同辈元素的长度
 33 
 34                 var $left = $td.prev(); //查找当前元素之前的一个同辈元素
 35 
 36                 var $right = $td.next(); //查找当前之后的一个同辈元素
 37 
 38                 var $top = $td.parent().prev().children('td:eq(' + idx + ')'); //查找当前元素上一行对应的位置td
 39 
 40                 var $bottom = $td.parent().next().children('td:eq(' + idx + ')'); //查找当前元素下一行对应的的位置td
 41 
 42  
 43 
 44                 var $target = null; //定义一个目标元素
 45 
 46                 //如果目标位置存在并且内容为空,则确定目标元素的位置
 47                 if ($top && $top.html() == '') {
 48                     $target = $top;
 49 
 50                 } else if ($right && $right.html() == '') {
 51                     $target = $right;
 52 
 53                 } else if ($bottom && $bottom.html() == '') {
 54                     $target = $bottom;
 55 
 56                 } else if ($left && $left.html() == '') {
 57                     $target = $left;
 58 
 59                 }
 60 
 61               
 62                 //如果目标元素不为空
 63                 if ($target) {
 64                     //设置目标元素的内容为当前点击td的内容
 65                     $target.html($td.html());
 66                     $td.html(""); //清空点击的td
 67                 }
 68 
 69             });
 70         });
 71     </script>
 72 
 73     <style type="text/css">
 74         #grid
 75         {
 76             margin-top: 2em;
 77             margin-bottom: 1em;
 78             border-collapse: separate;
 79             border-spacing: 2px;
 80             font-size: 26px;
 81             border:2px;
 82             padding:2px;
 83         }
 84         #grid td
 85         {
 86             border-bottom: soild 1px #B2B2B2;
 87             border-right: soild 1px #B2B2B2;
 88             background: #F3F3F3;
 89             text-align: center;
 90             white-space: nowrap;
 91             cursor: pointer;
 92             padding: 4px;
 93             width: 30px;
 94             empty-cells: show;
 95             border:2px;
 96             
 97         }
 98     </style>
 99 </head>
100 <body>
101     <div>
102         <center>
103             <table id="grid">
104             </table>
105         </center>
106     </div>
107 </body>
108 </html>

 

posted @ 2012-09-20 14:21  全力以赴001  阅读(438)  评论(0)    收藏  举报