0顶

JS网页版的俄罗斯方块游戏

稿源：互联网 2022-04-02 21:40:19 点击： 3069 撤稿纠错

网上看到的俄罗斯方块游戏，javascript网页版本，还有些BUG。。。

以下讨论的是和俄罗斯相关的JS网页版的俄罗斯方块游戏教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>游戏</title>
<style type="text/css"> 
body{ background-color:#eee}
#gameArea{ background-color:#fff; width: 293px; border:#fff 2px solid; margin:0 auto; font-size:12px;}
#gameArea .mainArea{ float:left; width:216px; height:324px; border:1px solid #fff;}
#gameArea .mainArea div{ background-color:#EFEFEF; width:10px; height:10px; float:left; border:1px solid #fff; overflow:hidden;}
#gameArea .mainArea div.show{ background-color:#93D034;}
#gameArea .mainArea div.current{ background-color:#EFA53C;}
#gameArea .mainArea div.gameover{ background-color:#EFA53C;}
#gameArea .infoArea{ float:left; border-left:#fff solid 1px; width:74px; height:324px;}
#gameArea .score{ width:60px; margin: 20px auto 5px auto; color:#EFA53C; padding: 5px; font-size:18px; font-family:Arial, Helvetica, sans-serif; text-align:center;}
#gameArea .clear{ clear:both;}
</style>
<script type="text/javascript"> 
 
 var boxGame = function( target ){
  
   //初始化开始
   var gameArea, mainArea, infoArea, scoreArea, grids;
   
   ( function(){
    
    gameArea = document.createElement( 'div' );
    gameArea.id = 'gameArea';
    gameArea.innerHTML = function(){
      var  line = 486, 
      html  =  '<div class="mainArea">';
      while( line-- ) 
      html   +=  '<div></div>'; 
      html   +=  '<br class="clear"></div><div class="infoArea">';
      html   +=  '<div class="score">0</div>';
      html   +=  '</div><br class="clear">';
      return html; 
    }();
    
    target = target || document.body;
    
    target.appendChild( gameArea );
    
    mainArea  = gameArea.firstChild;  
    infoArea  = mainArea.nextSibling;
    scoreArea = infoArea.firstChild;
    grids = function( area ){
     
      var i = 0, x = 0, l = 28, elem, boxs = [ ];
      var elems = mainArea.getElementsByTagName( 'div' );
      
      while( --l ) boxs.push( [ ] );
      
      l = 0;
 
      while( elem = elems[ i ] ){
        
        if( x == 18 ){
         l++;
         x = 0; 
        }
        
        boxs[ l ].push({ 
         elem   : elem, 
         status : 0
        });
        
        i++;
        x++;
      }
      
      return boxs;
      
    }( mainArea );
   })();
   
   var x1, x2, x3, x4, y1, y2, y3, y4, intervalDropMove, intervalCheckSuccess, 
   gameStatus        =   1,
   score      =   0, 
   nextGridsType     =   0, 
   className         =   [ ' ', 'show', 'current' ],
   switchGridsType   =   [ 1, 0, 3, 4, 5, 2, 7, 6, 9, 8, 11, 12, 13, 10, 14, 16, 17, 18, 15 ],
   gridsType         =   [
          [ [  0,  0 ], [  0,  1 ], [  0,  2 ], [  0,  3 ], -2 ],
          [ [  0,  2 ], [  1,  2 ], [  2,  2 ], [  3,  2 ], 2  ],
         
          [ [  0,  1 ], [  0,  2 ], [  1,  2 ], [  2,  2 ], 0  ],
          [ [  0,  3 ], [  1,  1 ], [  1,  2 ], [  1,  3 ], 1  ],
          [ [  0,  2 ], [  1,  2 ], [  2,  2 ], [  2,  3 ], 0  ],
          [ [  0,  1 ], [  0,  2 ], [  0,  3 ], [  1,  1 ], 1  ],
         
          [ [  0,  1 ], [  1,  1 ], [  1,  2 ], [  2,  2 ], 0  ],
          [ [  0,  2 ], [  0,  3 ], [  1,  1 ], [  1,  2 ], 1  ],
             [ [  0,  2 ], [  1,  1 ], [  1,  2 ], [  2,  1 ], 0  ],
          [ [  0,  1 ], [  0,  2 ], [  1,  2 ], [  1,  3 ], 1  ],
         
          [ [  0,  1 ], [  0,  2 ], [  0,  3 ], [  1,  2 ], 0  ],
          [ [  0,  2 ], [  1,  2 ], [  1,  3 ], [  2,  2 ], 1  ],
          [ [  0,  2 ], [  1,  1 ], [  1,  2 ], [  1,  3 ], 0  ],
          [ [  0,  2 ], [  1,  1 ], [  1,  2 ], [  2,  2 ], 1  ],
         
          [ [  0,  1 ], [  0,  2 ], [  1,  1 ], [  1,  2 ], 0  ],
         
          [ [  0,  1 ], [  0,  2 ], [  1,  1 ], [  2,  1 ], 0  ],
          [ [  0,  1 ], [  0,  2 ], [  0,  3 ], [  1,  3 ], 1  ],
          [ [  0,  3 ], [  1,  3 ], [  2,  3 ], [  2,  2 ], 0  ],
          [ [  0,  1 ], [  1,  1 ], [  1,  2 ], [  1,  3 ], 0  ]
   ],
   gameOver          =   [ 
         [ 5, 2  ], [ 6, 1  ], [ 7, 1  ], [ 8, 1  ], [ 9, 2  ], [ 8, 3  ], [ 7, 3  ], [ 6, 3  ],
         [ 5, 5  ], [ 6, 5  ], [ 7, 5  ], [ 8, 5  ], [ 9, 6  ], [ 8, 7  ], [ 7, 7  ], [ 6, 7  ], [ 5, 7  ],
         [ 5, 9  ], [ 5, 10 ], [ 5, 11 ], [ 6, 9  ], [ 7, 9  ], [ 7, 10 ], [ 7, 11 ], [ 8, 9  ], [ 9, 9  ], [ 9, 10 ], [ 9, 11 ],
         [ 5, 13 ], [ 5, 14 ], [ 5, 15 ], [ 6, 13 ], [ 6, 15 ], [ 7, 13 ], [ 7, 15 ], [ 8, 13 ], [ 9, 13 ], [ 8, 14 ], [ 9, 15 ]
          ];
 
   setGridsStatus = function( status ){
      var i = 0, xy = [ x1, x2, x3, x4, y1, y2, y3, y4 ];
      for( ;i < 4; i ++ ){
       grids[ xy[ i + 4 ] ][ xy[ i ] ].elem.className = className[ status ];
       grids[ xy[ i + 4 ] ][ xy[ i ] ].status = status;
      }
   },
   
   random = function( min, max ){
    return Math.floor( Math.random() * ( max - min + 1 ) + min );
   },
   
   createRandomGrids = function( number ){
    
     var xy, x, pos;
     
     if( number > -1 )
      xy = getCurrentMinXY();
     else{
      xy = false;
      number = random( 0, 18 );
     }
     
 
     pos               =  gridsType      [ number ];
     nextGridsType     =  switchGridsType[ number ];
 
     y1 = pos[ 0 ][ 0 ]; 
     y2 = pos[ 1 ][ 0 ]; 
     y3 = pos[ 2 ][ 0 ];  
     y4 = pos[ 3 ][ 0 ];  
     x1 = pos[ 0 ][ 1 ] + 7;  
     x2 = pos[ 1 ][ 1 ] + 7;  
     x3 = pos[ 2 ][ 1 ] + 7;  
     x4 = pos[ 3 ][ 1 ] + 7;
     
     if( xy ){
      
       x  = xy.x - x1 + pos[ 4 ];
      y1 += xy.y;
      y2 += xy.y;
      y3 += xy.y;
      y4 += xy.y;
      x1 += x;
      x2 += x;
      x3 += x;
      x4 += x;
      
      while( !x1 || !x2 || !x3 || !x4 ){
       x1++; x2++; x3++; x4++; 
      }
      
      while( x1 > 17 || x2 > 17 || x3 > 17 || x4 > 17 ){
       x1--; x2--; x3--; x4--; 
      }
     }
   },
   
   getCurrentMinXY = function(){
     return { y: Math.min( y1, y2, y3, y4 ), x:Math.min( x1, x2, x3, x4 ) };
   },
   
   clearTodefault  = function(){
     for( var i = 0, j = 18; i < 27; i++ ){
       ( function( j ){
         while(  --j > -1 ){
           grids[ i ][ j ].status = 0;
           grids[ i ][ j ].elem.className = ''; 
         }
       })( j );
     }
   },
   
   showText  = function( gridsGroup, className ){
    
     for( var i = 0, grid; grid = gridsGroup[ i ]; i++ )
     
        grids[ grid[ 0 ] ][ grid[ 1 ] ].elem.className = className || 'show'; 
   },
   
   dropMove = function(){
    
     if( 
      y1 == 26 || y2 == 26 || y3 == 26 || y4 == 26 || 
      grids[ y1 + 1 ][ x1 ].status == 1 || 
      grids[ y2 + 1 ][ x2 ].status == 1 || 
      grids[ y3 + 1 ][ x3 ].status == 1 || 
      grids[ y4 + 1 ][ x4 ].status == 1 
     ){
      setGridsStatus( 2 );
      setGridsStatus( 1 );
 
      if( !y1 || !y2 || !y3 || !y4 ){
        clearInterval( intervalDropMove );
        clearInterval( intervalCheckSuccess );
        clearTodefault( );
        gameStatus = 0;
        showText( gameOver, 'gameover' );
        return false; 
      }
      createRandomGrids();
      return false;
     }
     
     setGridsStatus( 0 );
     y1++; y2++; y3++; y4++; 
     setGridsStatus( 2 );
   },
   
   checkSuccess = function(){
    
     for( var i = 0, __score = 0; i < 27; i++ ){
      
        (function( i ){
         
         for( var j = 0; j < 18; j++ ) 
           if( grids[ i ][ j ].status != 1 ) return false;
           
         while( i > 0 ){
          
          j = 0;
          for( ;j < 18; j++ ){
            grids[ i ][ j ].status = grids[ i - 1 ][ j ].status;
            grids[ i ][ j ].elem.className = grids[ i - 1 ][ j ].elem.className; 
          }
          i--;
         }
         __score ++; 
          
        })( i );
     }
     
     score += __score * __score * 100;
     scoreArea.innerHTML = score;
      
   };
 
   createRandomGrids();
   setGridsStatus( 2 );
   intervalDropMove = setInterval( dropMove , 500 );
   intervalCheckSuccess = setInterval( checkSuccess, 500 );
   
   ( document.documentElement || document.body ).onkeydown = function( e ){
     if( !gameStatus ) return;
     switch( ( window.event || e ).keyCode ){
       case 13:
       case 38:
        getCurrentMinXY();
        setGridsStatus( 0 );
        createRandomGrids( nextGridsType );
        setGridsStatus( 2 );
       break;
       
       case 32:
       case 40:
        dropMove();
       break;
       
       case 37:
        if( 
         !x1 || !x2 || !x3 || !x4 ||
         grids[ y1 ][ x1 - 1 ].status == 1 || 
         grids[ y2 ][ x2 - 1 ].status == 1 || 
         grids[ y3 ][ x3 - 1 ].status == 1 || 
         grids[ y4 ][ x4 - 1 ].status == 1  
        ) 
        return false;
        setGridsStatus( 0 );
        x1--; x2--; x3--; x4--;
        setGridsStatus( 2 ); 
       break;
       
       case 39:
        setGridsStatus( 0 );
           if( 
         x1 == 17 || x2 == 17 || x3 == 17 || x4 == 17 ||
         grids[ y1 ][ x1 + 1 ].status == 1 || 
         grids[ y2 ][ x2 + 1 ].status == 1 || 
         grids[ y3 ][ x3 + 1 ].status == 1 || 
         grids[ y4 ][ x4 + 1 ].status == 1  
        ) 
        return false;
        x1++; x2++; x3++; x4++;
        setGridsStatus( 2 );
       break;
     }
   };
 };
 
 
 
 
window.onload = function(){
 boxGame( document.getElementById( "area" ) ); 
};
 
</script>
</head>
<body>
<div style=" font-size:12px; width: 600px; text-align:center; margin: 10px auto; color:#669900;">
键盘上下左右键控制： "上键" 和 "回车键" 切换图形， "下键" 和 "空格键" 加速坠落。<br>
这个是"精简粗糙丑化含有大量bug的测试版"，后续要美化还要增加完善很多功能！
</div>
<div id="area" style="margin:auto; width:100%;"></div>
</body>
</html>

关于JS网页版的俄罗斯方块游戏的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2011030468311.shtml方便下次再访问哦。

·上一篇： 鼠标滑过时改变文字
·下一篇： 一个DIV层弹性移动的特效

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

JS网页版的俄罗斯方块游戏

文章分类LIST >>返回首页

最新游戏

最新新闻