⭐ 欢迎来到虫虫下载站！ | 📦 资源下载 📁 资源专辑 ℹ️ 关于我们
⭐ 虫虫下载站
📤 上传资源

📄 tetris.htm

📁 打开浏览器就可以玩的俄罗斯方块游戏
💻 HTM
📖 第 1 页 / 共 2 页
字号:
🔍
12 
<html>
<head>
  <title>
    俄罗斯方块游戏
  </title>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>

<body>
  <STYLE>
    BODY 
    {
      BACKGROUND: black; MARGIN: 0px
    }
    td           
    { 
      height: 20px; width: 20px; font-family: 宋体; color: #FFFFFF; font-size: 9pt 
    }
    #block_div 
    {
      POSITION: absolute; WIDTH: 80px; Z-INDEX: 1
    }
    #table_div 
    {
      POSITION: absolute; WIDTH: 320px
    }
    #nblock_div 
    {
      COLOR: red; FONT: 48px system; POSITION: absolute; Z-INDEX: 2
    }
    #title_div 
    {
      COLOR: white; FONT-SIZE: 22px; LEFT: 326px; POSITION: absolute; TOP: 7px
    }
    #infobar_div 
    {
      LEFT: 396px; POSITION: absolute; TOP: 416px
    }
    #infobar2_div 
    {
      COLOR: white; FONT-SIZE: 14px; LEFT: 396px; POSITION: absolute; TOP: 480px
    }
    #infobar2_div A 
    {
      COLOR: #99ccff; TEXT-DECORATION: none
    }
  </STYLE>
  
  <script id=clientEventHandlersJS language=javascript>
  <!--
    //读者知道俄罗斯方块的每个积木块由四格组成
    //但是由于它们的组合位置可以达到四行四列中的每一格
    //因此我们使用一个16个元素的数组来表示它
    //下面为叙述方便，将把组成积木块的四格成为积木格
    if(document.all)
    {
      var n_width = 800;//默认分辨率
      var n_height = 600;//默认分辨率
      var n_left = Math.round( screen.width/2 ) - n_width/2;//非默认分辨率下的换算左边沿
      var n_top = Math.round( screen.height/2 ) - n_height/2;//非默认分辨率下的换算右边沿
      var n_IncStep = 20;//每个格子的像素为单位的边长
      var curBlcok,nextBlock;//分别表示当前积木块和下一个积木块
      var arr_curBlock = new Array(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0);//以数组形式来表示的积木块，实际上可以认为是4*4，值为1的地方就是有一个积木的格
      var curX,curY;//当前的游戏区的左边沿和上边沿的值，以像素来计算
      var speed=1;//积木块下落速度
      var maxspeed=9;//积木块下落的最高速度
      var clr_per_line=18;//设置用户水平的一个标准，当用户操作中删除了这么多行后，就把速度提高之
      var pause=0;//判断游戏是否处于暂停中
      var gameover=0;//表示是否游戏结束
      var colors = new Array("#999999","#0000FF","#80FFFF","#80FF80","#FFFF00","#FF8000","#FF00FF","#FF0000");//颜色数组，供调用
      var cid;//游戏区积木块的颜色号
      var ncid;//下一种颜色
      var blocks = new Array("tt_O1","tt_T2","tt_Z1","tt_S1","tt_L1","tt_J1","tt_I2");//定义积木数组
      var bid;//积木在blocks中的编号
      var killedlines=0;//总共被删除的行数，也是成绩的值

      //第一种积木的四种不同变形
      var tt_O1 = new Array(0,0,0,0,0,0,0,0,0,1,1,0,0,1,1,0);
      var tt_O2 = new Array(0,0,0,0,0,0,0,0,0,1,1,0,0,1,1,0);
      var tt_O3 = new Array(0,0,0,0,0,0,0,0,0,1,1,0,0,1,1,0);
      var tt_O4 = new Array(0,0,0,0,0,0,0,0,0,1,1,0,0,1,1,0);
      
      //第二种积木的四种不同变形
      var tt_T1 = new Array(0,0,0,0,0,1,0,0,1,1,0,0,0,1,0,0);
      var tt_T2 = new Array(0,0,0,0,0,0,0,0,1,1,1,0,0,1,0,0);
      var tt_T3 = new Array(0,0,0,0,0,1,0,0,0,1,1,0,0,1,0,0);
      var tt_T4 = new Array(0,0,0,0,0,1,0,0,1,1,1,0,0,0,0,0);
      
      //第三种积木的四种不同变形
      var tt_Z1 = new Array(0,0,0,0,1,1,0,0,0,1,1,0,0,0,0,0);
      var tt_Z2 = new Array(0,0,0,0,0,0,1,0,0,1,1,0,0,1,0,0);
      var tt_Z3 = new Array(0,0,0,0,0,1,1,0,0,0,1,1,0,0,0,0);
      var tt_Z4 = new Array(0,0,1,0,0,1,1,0,0,1,0,0,0,0,0,0);
      
      //第四种积木的四种不同变形
      var tt_S1 = new Array(0,0,0,0,0,1,1,0,1,1,0,0,0,0,0,0);
      var tt_S2 = new Array(0,0,0,0,0,1,0,0,0,1,1,0,0,0,1,0);
      var tt_S3 = new Array(0,0,0,0,0,0,1,1,0,1,1,0,0,0,0,0);
      var tt_S4 = new Array(0,1,0,0,0,1,1,0,0,0,1,0,0,0,0,0);
      
      //第五种积木的四种不同变形
      var tt_L1 = new Array(0,1,0,0,0,1,0,0,0,1,1,0,0,0,0,0);
      var tt_L2 = new Array(0,0,0,0,0,0,1,0,1,1,1,0,0,0,0,0);
      var tt_L3 = new Array(0,0,0,0,0,1,1,0,0,0,1,0,0,0,1,0);
      var tt_L4 = new Array(0,0,0,0,0,1,1,1,0,1,0,0,0,0,0,0);
       
      //第六种积木的四种不同变形 
      var tt_J1 = new Array(0,0,1,0,0,0,1,0,0,1,1,0,0,0,0,0);
      var tt_J2 = new Array(0,0,0,0,1,1,1,0,0,0,1,0,0,0,0,0);
      var tt_J3 = new Array(0,0,0,0,0,1,1,0,0,1,0,0,0,1,0,0);
      var tt_J4 = new Array(0,0,0,0,0,1,0,0,0,1,1,1,0,0,0,0);
      
      //第七种积木的四种不同变形
      var tt_I1 = new Array(0,1,0,0,0,1,0,0,0,1,0,0,0,1,0,0);
      var tt_I2 = new Array(0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1);
      var tt_I3 = new Array(0,0,1,0,0,0,1,0,0,0,1,0,0,0,1,0);
      var tt_I4 = new Array(0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1);

      //游戏区，两侧的1用作隔离，这是编程中的常用技术
      var table = new Array
      (
        1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,
        1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,
        1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,
        1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,
        1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,
        1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,
        1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,
        1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,
        1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,
        1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,
        1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,
        1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,
        1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,
        1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,
        1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,
        1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,
        1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,
        1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,
        1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,
        1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,
        1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,
        1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1
      )
    }
    else
      alert("You need IE4+ to play Tetris!")

    //返回某行某列的在一维数组中的位置
    function dimension2(row,col,num)
    {
      var i = row * num + col;
      return (this[i]);
    }
    
    //为Array的prototype属性增加一个功能，此功能调用dimension2函数
    Array.prototype.getd = dimension2;
    
    //显示左边游戏区的积木块
    function ShowBlock(x,y,block_type,color)//x,y代表积木块的位置，block_type代表积木块的种类，color代表积木块的颜色
    {
      for(var i=0;i<block_tbl.rows.length;i++)
      {
        for(var j=0;j<block_tbl.rows(i).cells.length;j++)
        {
          var d2 = i * 4 + j;//获得当前位置
          if(block_type[d2]==1)//如果当前的值是1，则表明这是一个积木格
          {
            block_tbl.rows(i).cells(j).style.background = color;//则染上颜色
          }
          else
          {
            block_tbl.rows(i).cells(j).style.background = "";
          }
        }
      }
      //设置积木块的位置
      block_div.style.pixelLeft=x;
      block_div.style.pixelTop=y;
    }

    //更广泛的显示积木块的函数
    //前四个参数和上一函数一致，obj_tabID表示引用的table的ID，obj_divID表示引用的div的ID
    //此函数可参看上一函数的注释
    function ShowBlock1(x,y,block_type,color,obj_tabID,obj_divID)
    {
      for(var i=0;i<obj_tabID.rows.length;i++)
      {
        for(var j=0;j<obj_tabID.rows(i).cells.length;j++)
        {
          var d2 = i * 4 + j;
          if(block_type[d2]==1)
          {
            obj_tabID.rows(i).cells(j).style.background = color;
          }
          else
          {
            obj_tabID.rows(i).cells(j).style.background = "";
          }
        }
      }
      obj_divID.style.pixelLeft=x;
      obj_divID.style.pixelTop=y;
    }

    //把积木块变成同一类型的不同形状
    function Change(inc)
    {
      var type = curBlock.substr(0,4);//获得当前积木块的种类，即如tt_Z
      var num = curBlock.substr(curBlock.length-1);//获得当前积木块的形状的指示值，如1，2等
      num = parseInt(num) + inc;//获得将要变换成的积木块的形状的一个指示值
      if(num>4||num<1) //如果此形状指示值不在1-4之间，则将之变为1-4之间
        num -= 4*inc;//注意到如果要使num>4，则inc=1，要使num<1，则inc=-1。因此只需作这个减法即可
      type += num;//更改形状，例如把type已经设为tt_Z2之类的值
      eval("arr_tmp = " + type + ";");//获得更改后的积木形状
      if(CanMove(curX,curY,arr_tmp))//判断能否变换成此形状
      {
        curBlock = type;//设置当前积木块的形状为更改后的形状
        eval("arr_curBlock = " + curBlock + ";");//设置更改后的积木形状
        eval("ShowBlock(block_div.style.pixelLeft,block_div.style.pixelTop," + curBlock + ",colors[" + cid + "]);");//显示现在的形状
      }
    }

    //判断在x,y处的积木块是否相容于游戏区
    function CanMove(x,y,block)
    {
      for(i=0;i<4;i++)
      {
        for(j=0;j<4;j++)
        {
          //如果在某处既是要判断的积木块的积木格又是游戏区已经有积木的地方或是游戏区的边界
          //注意在边界上的值是1——这就是为什么我们设置它为1的原因——则返回false，即不可移动到x,y处
          //这里的getd函数就是我们上面为Array对象新添加的功能，它调用dimensions函数
          if(block.getd(i,j,4)&table.getd(y/n_IncStep+i,x/n_IncStep+j,16)) 
            return false;
        }
      }
      return true;//否则可移动，返回true
    }
    
    //设置下一块积木
    function NewBlock()
    {
      curBlock = nextBlock;//设置原来的下一块积木为当前积木
      cid = ncid;//原来的下一种颜色为当前颜色
      bid = Math.round(Math.random()*(blocks.length-1));//获得随机的下一块积木
      ncid = Math.round(Math.random()*(colors.length-1));//获得随机的下一种颜色
      nextBlock = blocks[bid];//设置下一块积木
      eval("arr_curBlock = " + curBlock + ";");//获得当前积木形状
      eval("ShowBlock(120,0," + curBlock + ",colors[" + cid + "]);");//在游戏区顶部显示当前积木
      eval("arr_curBlock = " + curBlock + ";");
      eval("ShowBlock1(466,116," + nextBlock + ",colors[" + ncid + "],nblock_tbl,nblock_div);");//在右边显示区显示下一块积木
    }

    //在左边游戏区放置积木块，实际上我们需要处理的是把积木格占据的位置的值赋1和在此位置染上积木格的颜色
    function SaveBlock()
    {
      for(i=0;i<4;i++)
      {
        for(j=0;j<4;j++)
        {
          table[(curY/n_IncStep+i)*16+curX/n_IncStep+j]|=arr_curBlock[i*4+j];//在当前位置放置积木格
          if(arr_curBlock[i*4+j]==1)//如果该处为积木块的值为1，即它是积木格
            if((curY/n_IncStep+i<21)&&(curX/n_IncStep+j>1)&&(curX/n_IncStep+j<14))//如果在游戏区的可视区域
              table_tbl.rows(curY/n_IncStep+i).cells(curX/n_IncStep+j).style.background = colors[cid];//则在该处显示积木块的颜色
          if(table[(curY/n_IncStep+i)*16+curX/n_IncStep+j]!=1)//如果该处无积木
            table_tbl.rows(curY/n_IncStep+i).cells(curX/n_IncStep+j).style.background = "black";//则显示黑色
        }
      }
    }
    
    //俄罗斯方块中的删除某一行
    function DelLine(line)
    {
      for(i=line;i>0;i--)//从本行开始，从下往上
      {
        for(j=2;j<14;j++)//对于游戏区的可视区域进行操作
        {
          table[i*16+j]=table[(i-1)*16+j];//由于要消去本行，这意味着本行以上的行都下降一行
        }
      }
      table_tbl.deleteRow(line);//从HTML的相应table中也消去这一行
      table_tbl.insertRow(0);//在第0行处插入一个空行
      for(i=0;i<16;i++)
      {
        table_tbl.rows(0).insertCell();//为第一行添加单元格
        if(i<2||i>13) //在可视游戏区外，将单元格颜色设成背景色
          table_tbl.rows(0).cells(i).style.background="navy";
      }
      killedlines++;//删除的行数加1
      cll.innerText=parseInt(cll.innerText)+1;//成绩加1
    }

    //当积木落下时，判断并删除行
    function DelLines()
    {
      var c,d,i,j;
      d=0;//该次删除的总行数
      curY=block_div.style.pixelTop;//当前积木的最高行像素值
      for(i=(curY/20+3);i>curY/20-1;i--)//监测当前积木造成的四行是否可以删除
12

⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -