【转】js版的俄罗斯方块！！

摘自：http://topic.csdn.net/u/20100817/18/38dc20a3-86d5-45be-a750-123e7b41e188.html?29783

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  <html> 
  <style> 
     div {display:block;background-color:black;position:absolute;font:17px Tahoma;color:#fff;} 
     span {float:left;background-color:gray;width:12px;height:12px;border:4px gray outset;margin:0 1 1 0;overflow:hidden;} 
     p {float:left;width:8px;height:8px;border:2px gray outset;overflow:hidden;margin:0;padding:0} 
     #main {width:375px;height:430px;display:block;background-color:gray;position:relative;} 
     #body {width:241px;height:401px;left:15px;top:15px;border:1px solid #999;} 
     #score {width:80px;height:24px;left:270px;top:15px;padding:4px;} 
     #level {width:80px;height:24px;left:270px;top:50px;padding:4px;} 
     #next {width:50px;height:50px;left:270px;top:85px;border:19px black solid;} 
     #ctrl {width:80px;height:55px;left:270px;top:360px;padding:4px;text-align:center;background-color:gray} 
     #ctrl button{width:80px;height:25px;} 
  </style> 
  <script> 
     //By: X!ao_f QQ:120000512 
     var G = { 
         fs:[], 
         fn:[], 
         score:0, 
         l:['#9F0','#FF3','#F33','#C0C','#33C','#0F3','#F93'], 
         v:[0x801,0x801,0x801,0x801,0x801,0x801,0x801,0x801,0x801,0x801,0x801,0x801,0x801,0x801,0x801,0x801,0x801,0x801,0x801,0xFFFF], 
         d:[[0xCC00],[0x4444,0xF0],[0x8C40,0x6C00],[0x4C80,0xC600],[0x44C0,0x8E00,0xC880,0xE200],[0x88C0,0xE800,0xC440,0x2E00],[0x4E00,0x8C80,0xE400,0x4C40]], 
         init:function(){ 
             var body = document.getElementById('body'); 
             var next = document.getElementById('next'); 
             for(var i=0;i <240;i++){ 
                 G.fs.push(body.appendChild(document.createElement("span"))); 
             } 
             for(var i=0;i <16;i++){ 
                 G.fn.push(next.appendChild(document.createElement("p"))); 
             } 
             G.domScore = document.getElementById('score'); 
             G.domLevel = document.getElementById('level'); 
             document.onkeydown=function(e){G.event(e||window.event,0)}; 
             G.rand(); 
             G.next(); 
         }, 
         timeTesk:function(){ 
             if(G.pause)return; 
             if(!G.move(G.x, G.y+1, G.t)){ 
                 var s = 0; 
                 for(var i=0;i <19;i++){ 
                     G.v[i]=G.v[i]|G.m[i]; 
                     if(G.v[i]==0xFFF){ 
                         for(var k=i;k>0;k--){ 
                             G.v[k] = G.v[k-1]; 
                         } 
                         G.score+=++s; 
                     } 
                 } 
                 G.next(); 
                 return false; 
             } 
             G.draw(); 
             return true; 
         }, 
         move:function(x,y,t){ 
             var m = []; 
             for(var k=0;k <4;k++){ 
                 m[y+k] = (G.d[G.n][t]>>(3-k)*4&0xF) <<Math.max(x,0)>>-Math.min(x,0); 
                 if(m[y+k] & G.v[y+k]){ 
                     return false; 
                 } 
             } 
             G.x = x; 
             G.y = y; 
             G.t = t; 
             G.m = m; 
             G.draw(); 
             return true; 
         }, 
         rand:function(){ 
             G.n = G._n; 
             G.t = G._t; 
             G.c = G._c; 
             G._n = parseInt(Math.random()*G.d.length); 
             G._t = parseInt(Math.random()*G.d[G._n].length); 
             G._c = parseInt(Math.random()*G.l.length); 
         }, 
         next:function(){ 
             G.rand(); 
             if(parseInt(G.score/20)!=G.level){ 
                 G.level = parseInt(G.score/20); 
                 clearInterval(G.handle); 
                 G.handle = setInterval("G.timeTesk()",500/(G.level+1)); 
             } 
             G.domScore.innerHTML = 'Score:'+G.score; 
             G.domLevel.innerHTML = 'Level:'+G.level; 
             var i = 0; 
             while(!(G.d[G.n][G.t]>>i*4&0xF))i++; 
             if(!G.move(3, i-3, G.t)){ 
                 alert('Game over!'); 
                 clearInterval(G.handle); 
             } 
         }, 
         draw:function(){ 
             for(var i=0;i <240;i++){ 
                 if((G.v[parseInt(i/12)]>>(11-i%12))&0x1){ 
                     G.fs[i].style.visibility = ''; 
                 }else if((G.m[parseInt(i/12)]>>(11-i%12))&0x1){ 
                     G.fs[i].style.visibility = ''; 
                     G.fs[i].style.borderColor = G.fs[i].style.background = G.l[G.c]; 
                 }else{ 
                     G.fs[i].style.visibility ='hidden'; 
                 } 
             } 
             for(var i=0;i <16;i++){ 
                 if(G.d[G._n][G._t]>>(15-i)&0x1){ 
                     G.fn[i].style.visibility = ''; 
                     G.fn[i].style.borderColor = G.fn[i].style.background = G.l[G._c]; 
                 }else{ 
                     G.fn[i].style.visibility ='hidden'; 
                 } 
             } 
         }, 
         event:function(e,t){ 
             switch(e.keyCode){ 
                 case 37: 
                     G.move(G.x + 1, G.y, G.t); 
                 break; 
                 case 39: 
                     G.move(G.x - 1, G.y, G.t); 
                 break; 
                 case 38: 
                     G.move(G.x, G.y, (G.t + 1) % G.d[G.n].length); 
                 break; 
                 case 40: 
                     G.timeTesk(); 
                 break; 
                 case 32: 
                     while(G.timeTesk()); 
             } 
         } 
     } 
  </script> 
  <body onload='G.init();'> 
      <div id='main'> 
          <div id='body'> </div> 
          <div id='score'> </div> 
          <div id='level'> </div> 
          <div id='next'> </div> 
          <div id='ctrl'> 
              <button onclick="javascript:location.href=location.href;">New </button> 
              <button onclick="javascript:this.innerHTML={'true':'Start','false':'Pause'}[G.pause=!!!G.pause];">Pause </button> 
          </div> 
      </GMain> 
  </body> 
  </html>

 

posted @ 2010-08-18 17:03  nick_lsf  阅读(270)  评论(0)  编辑  收藏  举报