鲜蛋网 2015-01-26 07:56 采纳率: 0%
浏览 2003

WEBAPP拼图小游戏问题

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>网友涛涛分享原生js实现美女拼图游戏特效</title>
    <SCRIPT language=javascript src="js/jquery-2.1.1.min" type=text/javascript></SCRIPT>
    <style>
    *{margin:0;padding: 0;}
    input{margin: 10px;}
    img{border: none;height: 100%;width: 100%}
    div.container{width: 600px;height: 600px;position: absolute;left: 50%;top
    30px;margin-left: -300px}
    .container .active{border: 1px solid #00f;width: 148px;height: 148px;}
  .thumb{display: block;width: 200px;margin-left: 100px}
    </style>
</head>
<body>
      <center><input type='button'  value='开始' id='start'/></center>

      <div class="container" id='container'></div>
     <img class="thumb" src='./img/bg.jpg'/>
      <script>
    /*
    *author:涛涛
    *website:http://www.webrhai.com
    *data:2013/9/3
    */
       function Game(row,col){
           this.con=document.getElementById('container');
           this.item=[];
           this.conwidth=600;
           this.conheight=600;
           this.row=row||3;
           this.col=col||3;
           this.minwidth=this.conwidth/this.col;
           this.minheight=this.conheight/this.row;
           this.num=this.row*this.col;
           this.arr=[];//初始化数组;
           this.newarr=[];//随机图片数组;
           this.pos=[];//存放位置的
           this.init();
               this.len=this.arr.length;
           this.minIndex=10;    
       };
       Game.prototype.init=function(){
              for(var i=1;i<=this.num;i++){
                this.arr.push(i);
              };
              this.newarr=this.arr.slice(0);
              var oFrag=document.createDocumentFragment();
              for(var i=0;i<this.num;i++){
                 var div=document.createElement('div');  
                 div.style.cssText='cursor:move;background:url(./img/bg.jpg) no-repeat -'+(i%this.col)*this.minwidth+'px -'+Math.floor((i)/this.col)*this.minheight+'px;float:left;height:'+this.minheight+'px;width:'+this.minwidth+'px;';
                 this.item.push(div);
                 oFrag.appendChild(div);
              };
              this.con.appendChild(oFrag);
       };
      Game.prototype.isSuccess=function(){
           for(var i=0;i<this.len-1;i++){
              if(this.newarr[i]!=this.arr[i])
              { 
                 return false;
              }
           };
           return true;
       };
       Game.prototype.startGame=function(){
           this.newarr.sort(function(a,b){
              return Math.random() > 0.5 ? 1 :-1;
           });
           for(var i=0;i<this.len;i++){

               this.pos[i]=[this.item[i].offsetLeft,this.item[i].offsetTop];
           };
           for(var i=0;i<this.len;i++){
              var n=this.newarr[i]-1;
              this.item[i].style.left=this.pos[i][0]+'px';
              this.item[i].style.top=this.pos[i][1]+'px';
              this.item[i].style.backgroundPosition='-'+(n % this.col)*this.minwidth+'px -'+Math.floor((n)/this.col)*this.minheight+'px';
              this.item[i].style.position='absolute';
              this.item[i].index=i;
              this.drag(this.item[i]);
           }
       }
       Game.prototype.drag=function(o){
          var self=this,near=null;
          o.addEventListener('touchmove', function (e) {
              //alert(11)
              var ev=window.event||e,
                  disX=ev.clientX-o.offsetLeft,
                  disY=ev.clientY-o.offsetTop;
              o.style.zIndex=self.minIndex++;
              document.addEventListener('touchend', function (e) {

                  var ev=window.event||e,
                  l=ev.clientX-disX,
                  t=ev.clientY-disY;

                  near=self.findNear(o);
                  if(near){
                      near.className='active';
                  }
                  o.style.left=l+'px';
                  o.style.top=t+'px';
              });
              document.addEventListener('touchend', function (e) {
                  if(near){
                      near.className='';
                      self.move(o,{left:self.pos[near.index][0],top:self.pos[near.index][1]});
                      self.move(near,{left:self.pos[o.index][0],top:self.pos[o.index][1]});

                      var temp=0;
                      temp=near.index;
                      near.index=o.index;
                      o.index=temp;

                      for(var i=0;i<self.len;i++){
                          self.arr[i]=(self.item[i].index+1);
                      }

                      if(self.isSuccess()){
                          self.tips()
                      }

                  }else{
                      self.move(o,{left:self.pos[o.index][0],top:self.pos[o.index][1]})
                  }
                  console.log(self.arr);

                  o.releaseCapture && o.releaseCapture();
                  document.touchmove=null;
                  document.touchend=null;
                  return false;
              });
              this.setCapture && this.setCapture();
              ev.preventDefault && ev.preventDefault();
          });
       };
       Game.prototype.move=function(o,json,fn){
           o.timer && clearInterval(o.timer);
           o.timer=setInterval(function(){
               var bStop=true;
               for(var i in json){
                   var iCur=css(o,i);
                   var iSpeed=(json[i]-iCur)/5;iSpeed=iSpeed>0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
                   if(json[i]!=iCur){
                      bStop=false;
                   };
                    o.style[i]=(iCur+iSpeed)+'px';

               };

                 if(bStop){
                      clearInterval(o.timer);
                      typeof fn=='function' && fn();
                   };

           },10);

           function css(o,attr){
              return o.currentStyle ? parseFloat(o.currentStyle[attr]) : parseFloat(getComputedStyle(o,false)[attr]);
           }

       };
       Game.prototype.tips=function(ts){
         var suc=document.createElement('div');
         var t=document.createElement('p');
         var tn=ts||3;
         var timer=null;
         suc.style.cssText='position:absolute;z-index:9999999;top:45%;width:100%;text-align:center;font-size:60px;color:#F56200;font-family:arial,黑体;';
         suc.innerHTML='亲你淫了!';
         suc.appendChild(t);
         this.con.appendChild(suc);
         function updatetime(){
            t.innerHTML=tn--;
            if(tn<=0){
                clearInterval(timer);
                window.location.reload();
                return;
            }
            timer=setTimeout(function(){
                updatetime();
            },1000)
         }
         updatetime();
       };
       Game.prototype.checkPZ=function(o1,o2){
           if(o1==o2)return;
           var l1=o1.offsetLeft,t1=o1.offsetTop,r1=o1.offsetWidth+l1,b1=o1.offsetHeight+t1;
           var l2=o2.offsetLeft,t2=o2.offsetTop,r2=o2.offsetWidth+l2,b2=o2.offsetHeight+t2;
           if(l1>r2 || t1>b2 || r1<l2 || b1<t2){
              return false;
           }
           else
           {
              return true;
           }
       };
       Game.prototype.findNear=function(o){
           var iMin=99999,index=-1;
           for(var i=0;i<this.len;i++){
               this.item[i].className='';
               if(this.checkPZ(o,this.item[i])){
                    var l=dis(o,this.item[i]);
                    if(iMin>l)
                    {
                         iMin=l;
                         index=i;
                    };
               }
           };
           if(index==-1){
              return null;
           }
           else
           {
             return this.item[index];
           };
           function dis(o1,o2){
              var c1=o1.offsetLeft-o2.offsetLeft,c2=o1.offsetTop-o2.offsetTop;
              return Math.sqrt(c1*c1+c2*c2);
           }
       };

       var  t=new Game(5,5);//行与列,值越大,难度越高
       document.getElementById('start').onclick=function(){
          t.startGame();
       }

      </script>

</body>
</html>
  • 写回答

1条回答 默认 最新

  • 鲜蛋网 2015-01-26 07:58
    关注

    想手指拖动方块,然后与另一个作交换

    评论

报告相同问题?

悬赏问题

  • ¥15 arduino控制ps2手柄一直报错
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥85 maple软件,solve求反函数,出现rootof怎么办?
  • ¥15 求chat4.0解答一道线性规划题,用lingo编程运行,第一问要求写出数学模型和lingo语言编程模型,第二问第三问解答就行,我的ddl要到了谁来求了
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题
  • ¥15 Visual Studio问题
  • ¥20 求一个html代码,有偿
  • ¥100 关于使用MATLAB中copularnd函数的问题