A股上市公司传智教育（股票代码 003032）旗下技术交流社区北京昌平校区

传智教育官网黑马程序员官网

 找回密码
 加入黑马

QQ登录

只需一步，快速开始

论坛首页 › 隐藏归类 › 黑马那些年 › 第15届Android交流区 › 正文

用js写的拼图，能看懂算你牛。

© 李琼 中级黑马   /  2012-10-16 14:21  /  1014 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

  1. <!doctype>
  2. <html>
  3. <head>
  4. <title>game</title>
  5. <style>
  6.     .containor{border:1px solid #999;position:absolute;background-color:#ffffff;width:600px;height:402px;}
  7.     .kuai{float:left;background:url(http://www.baby611.com/pic/091225/5/1240011761148288374.jpg) no-repeat;cursor:pointer;position:relative;}
  8. </style>
  9. <script>
  10.     var game = {
  11.         last : null,
  12.         row : undefined,
  13.         col : undefined,
  14.         enabled : true,
  15.         init : function(row,col){
  16.             this.row = row;
  17.             this.col = col;
  18.             var main = document.getElementByIdx_x_x_x("main");
  19.             var height = main.clientHeight/row;
  20.             var width = main.clientWidth/col;
  21.             var arr = [];
  22.             var tmpI = 0;
  23.             for(var i=0;i<row;i++){
  24.                 for(var j=0;j<col;j++){
  25.                     var posLeft = -width*j;
  26.                     var posTop = -height*i;
  27.                     arr.push('<div class="kuai" index="'+tmpI+'" style="width:'+width+'px;height:'+height+'px;background-position:'+posLeft+'px '+posTop+'px"></div>');
  28.                     tmpI++;
  29.                 }
  30.             }
  31.             main.innerHTML = arr.join("");
  32.             var list = main.getElementsByTagName_r("div");
  33.             this.random(list); //随机打乱顺序
  34.             this.click(list); //绑定click事件
  35.         },
  36.         random : function(list){
  37.             var len = list.length;
  38.             var m = Math;
  39.             //打乱顺序
  40.             for(var i=0;i<len/2;i++){
  41.                 var rNum1 = parseInt(m.random()*len);
  42.                 var rNum2 = parseInt(m.random()*len);
  43.                 var r1Obj = list[rNum1];
  44.                 var r2Obj = list[rNum2];
  45.                 r1Obj.parentNode.insertBefore(r1Obj,r2Obj);
  46.             }
  47.             this.last = list[len-1]; //记下它
  48.             this.last.style.visibility = "hidden";
  49.         },
  50.         click : function(list){
  51.             var len = list.length;
  52.             var game = this;
  53.             for(var i=0;i<len;i++){
  54.                 list[i].newIndex = i;
  55.                 list[i].onclick = function(){
  56.                     if(!game.enabled){
  57.                         return false;
  58.                     }
  59.                     var index = this.getAttribute("index");
  60.                     var newIndex = this.newIndex;
  61.                     var col = game.col;
  62.                     var lObj,rObj,tObj,bObj;
  63.                     if(newIndex-1>=0){
  64.                         lObj = list[newIndex-1];
  65.                     }
  66.                     if(newIndex+1<len){
  67.                         rObj = list[newIndex+1];
  68.                     }
  69.                     if(newIndex-col>=0){
  70.                         tObj = list[newIndex-col];
  71.                     }
  72.                     if(newIndex+col<len){
  73.                         bObj = list[newIndex+col];
  74.                     }
  75.                     var math = Math;
  76.                   
  77.                     if(rObj && rObj.style.visibility=="hidden" && math.ceil((newIndex+1)/game.col) == math.ceil((rObj.newIndex+1)/game.col)){ //向右移
  78.                         var tmpIndex = this.newIndex;
  79.                         this.newIndex = rObj.newIndex;
  80.                         rObj.newIndex = tmpIndex;
  81.                         rObj.parentNode.insertBefore(rObj,this);
  82.                     }else if(lObj && lObj.style.visibility=="hidden" && math.ceil((newIndex+1)/game.col) == math.ceil((lObj.newIndex+1)/game.col)){ //向左移
  83.                         var tmpIndex = this.newIndex;
  84.                         this.newIndex = lObj.newIndex;
  85.                         lObj.newIndex = tmpIndex;
  86.                         lObj.parentNode.insertBefore(this,lObj);            
  87.                     }else if(bObj && bObj.style.visibility=="hidden"){ //向下移
  88.                         var tmpIndex = this.newIndex;
  89.                         bObj.parentNode.insertBefore(bObj,list[tmpIndex+1]);
  90.                         bObj.parentNode.insertBefore(this,list[bObj.newIndex]);
  91.                         bObj.parentNode.insertBefore(list[bObj.newIndex],this);
  92.                         this.newIndex = bObj.newIndex;
  93.                         bObj.newIndex = tmpIndex;
  94.                     }else if(tObj && tObj.style.visibility=="hidden"){ //向上移
  95.                         var tmpIndex = this.newIndex;
  96.                         tObj.parentNode.insertBefore(this,list[tObj.newIndex]);
  97.                         tObj.parentNode.insertBefore(tObj,list[tmpIndex]);
  98.                         tObj.parentNode.insertBefore(list[tmpIndex],tObj);
  99.                         this.newIndex = tObj.newIndex;
  100.                         tObj.newIndex = tmpIndex;
  101.                     }
  102.                     if(game.isSuccess(list)){
  103.                         game.enabled = false; //已经成功！停止游戏
  104.                         alert("恭喜你完成任务！");
  105.                         game.last.style.visibility = "visible";
  106.                         game.animate(game.last,{
  107.                             opacity : 0
  108.                         },{
  109.                             opacity : 1
  110.                         },500);
  111.                     }
  112.                 }
  113.             }
  114.         },
  115.         animate : function(elt,p1,p2,speed){
  116.             
  117.         },
  118.         isSuccess : function(list){
  119.             var len = list.length;
  120.             var bl = true;
  121.             for(var i=0;i<len;i++){
  122.                 var o = list[i];
  123.                 if(o.newIndex!=o.getAttribute("index")){
  124.                     bl = false;
  125.                     break;
  126.                 }
  127.             }
  128.             return bl;
  129.         }
  130.     }
  131.     onload = function(){
  132.         game.init(3,3); //几行几列
  133.     };
  134. </script>
  135. </head>
  136. <body>
  137.     <div id="main" class="containor">
  138.         
  139.     </div>
  140. </body>
  141. </html>
复制代码
copy下来，做个html，玩一下。

评分

参与人数 1技术分 +1 收起 理由
韩军博 + 1 赞一个!

查看全部评分

拼图牛

0 个回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 加入黑马