原生JavaScript编写俄罗斯方块


Posted in Javascript onMarch 30, 2015

首先这里感谢@jdkleo  提出的宝贵建议!
说实在的吧,我这个俄罗斯方块大家玩起来别骂我就万岁了,还没完全完成的,只完成了50%,而且还有很多BUG。
可以实现的功能:
1.掉方块
2.随机生成新方块
3.方块移动。
目前BUG还很多,由于是第一次写这么“大”的游戏,有1000多行代码,所以还请高人指点,BUG太多了。
按START开始游戏。
大家提提建议,我第一次写JS游戏。
参考了一下网上其他人的代码,但是不是照抄。
代码可以直接运行,不用引用JQUERY。
希望大神们能给点建议!!!!不甚感激!!!

Ver 0.2版本已经出来了哦(2014-12-26),最新的代码:
此次修正的东西:
1.左边右边可以移动。
2.可以旋转
3.可以消除满行的方块。

代码:

<!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=utf-8" />
<title>无标题文档</title>
 
<style type="text/css">
#test
{
  /*width:25px;*/
}
 
.t
{
width:10px;
height:10px;
border:1px solid black;
float:left;
   
}
 
body
{
  margin:0 auto;
  width:1000px;
  height:600px;
   
}
 
/*游戏相关*/
#startGame
{
   
}
 
#lines
{
   
}
 
#level
{
   
}
 
#time
{
   
}
 
/*俄罗斯方块实体类*/
#tetris-area
{
  width:auto;
  height:auto;
  background:blue;
}
 
/*JS生成的CLASS,俄罗斯方块实体*/
#tetris .block0,#tetris .block1, #tetris .block2, #tetris .block3,#tetris .block4,#tetris .block5,#tetris .block6
{
  z-index:1000;
  font-size:10px;
  line-height:1em;
  position:absolute;
  width:13px;
  height:13px;
  border:0.5px solid red;
  background:#000;
}
</style>
 
<script src="jquery.js"></script>
<script type="text/javascript">
//2维数组,用来存放俄罗斯方块的坐标
 
var xYAxis=[];
xYAxis.push([1,2],[3,4]);
 
//alert(xYAxis[1][0]);
 
//复制节点
/*$(document).ready(function(e) {
   
  for(i=0;i<2;i++)
  {
    if(i==1)
    {
     // $("#test").append("<br>");  //加上换行符
    }
    $(".t").clone().appendTo("#test"); 
  }
   
  //动态得到test(container)的宽度,包含两边的边框BORDER
  $("#test").width(($(".t").width()+2)*2+1);
});
*/
//获得区域的横坐标和纵坐标
function getArea(x,y,unit,id)
{
  this.x=x;
  this.y=y;
  this.unit=unit; //每个单元的大小,单位为像素
  this.el=document.getElementById(id); //得到ID对象
   
  this.board=[]; //面板,即在区域范围内的元素(俄罗斯方块)
   
  /*创建2D范围矩阵*/
  for(var y=0;y<this.y;y++)
  {
    this.board.push(new Array());
    for(var x=0;x<this.x;x++)
    {
      this.board[y].push(0); 
    }
  }
   
  /*从2D矩阵中消除元素*/
  this.destroy=function()
  {
    for(var y=0;y<this.board.length;y++)
    {
      for(var x=0;x<this.board[y].length;x++)
      {
        if(this.board[y][x])
        {
          this.el.removeChild(this.board[y][x]);
          this.board[y][x]=0;
        }  
      }  
    }  
     
  }
   
  //添加元素
  this.addElement=function(el)
  {
    //得到起始元素的X开始坐标和Y开始坐标的位置(错误)
    //得到X坐标的下落次数,和Y轴的左右移动的次数
    var xBegin=parseInt(el.offsetLeft/unit);  
    var yBegin=parseInt(el.offsetTop/unit);
     
    if(xBegin>=0&&xBegin<=this.x&&yBegin>=0&&yBegin<=this.y)
    {
        this.board[yBegin][xBegin]=el; //确定元素的位置
    }
 
  }
   
  //消掉所有的行
  this.removeFullLines=function()
  {
    var lines=0;
    for(var i=this.y-1;i>0;i--)
    {
      if(this.linesRelated(i))
      {
        this.removeLines(i);
        lines++;
        y++;
      }
    }
    return lines; //返回线条  
  }
   
  //和线性有关的东西(判断是否满了)
  this.linesRelated=function(y)
  {
    for(var x=0;x<this.x;x++)
    {
        if(!this.board[y][x]){return false;}   //如果不为0的话,那么菜返回FALSE
    }
     
    return true;
  };
   
  //去掉行
  this.removeLines=function(y)
  {
    for(var x=0;x<this.x;x++)
    {
      this.el.removeChild(this.board[y][x]);
      this.board[y][x]=0; 
    }
    y--;
    for(;y>0;y--)
    {
      /*今天暂时写到这里*/
      /*继续于2014-12-21*/
      for(var x=0;x<this.x;x++)
      {
        if(this.board[y][x])
        {
          var el=this.board[y][x];
          el.style.top=el.offsetTop+this.unit+"px";
          this.board[y+1][x]=el;
          this.board[y][x]=0; 
        }  
      }  
    }
  };
   
  //活动区域
  this.getBlock=function(y,x)
  {
    if(y<0){return 0;}  
    if(y<this.y&&x<this.x)
    {
      return this.board[y][x];  
    }
    else
    {
      throw "Area get failed!";
    }
     
  }
}
 
/*俄罗斯方块实体类*/
function Tetris()
{
  var self =this; //自身
  var operate=null;
   
  this.area=null;
  this.operate=null; //操作
   
  this.status=new State(); //新建状态
  /*初始化X,Y,单元为5或者20*/
  this.x=20;
  this.y=20;
  this.unit=20;
   
  this.running=null; //是否在运行中
   
  //俄罗斯方块实体ID
  this.id="tempid";
   
  /*开始的时候暂停是FALSE的*/
  this.paused=false;
   
  //开始游戏
  this.start=function()
  {
    self.reset(); //重新开始游戏
    self.status.start();
     
    this.area=new getArea(this.x,this.y,this.unit,"tetris-area"); //获得Area对象  ,其中TEMPID是俄罗斯方块实体类ID
    this.operate=new OperateTetris(this.area,self);
     
    //是否可以替换
    if(this.operate.mayPlace())
    {
      //alert(1);
      this.operate.place();  
    }
    else
    {
      self.gameOver();  
    }
     
     
  }  
   
  //游戏结束
  this.gameOver=function()
  {
    self.status.stopGame(); //停止游戏
    self.operate.stopGame(); //操作类停止游戏
     
  }
   
  /*重置游戏*/
  this.reset=function()
  {
    if(this.operate)
    {
      self.operate.destroy(); //重新开始
      self.operate=null; 
    }
    if(self.area)
    {
      self.area.destroy();
      self.area=null;
    }
    //隐藏游戏结束
    document.getElementById("game_over").style.display="none";
    document.getElementById("next_operate").style.display="block"; //下一个操作
    document.getElementById("keys_Press").style.display="block"; //显示按键
     
    self.status.reset();
    self.paused=false;
     
    document.getElementById("tetris-pause").style.display="block"; //暂停按钮
 
  }
   
  /*暂停游戏*/
  this.pause=function()
  {
    if(self.operate==null)
    {
      return ;  
    }  
    if(self.paused)
    {
      self.operate.running=true;
      /*这里还没写完2014-12-22*/  
    }
    else
    {
         
    }
     
  }
   
  //上
  this.up=function()
  {
    if(self.operate&&self.operate.isRunning()&&!self.operate.isStopped())
    {
      if(self.operate.mayRotate())
      {
        self.operate.rotate();
        self.status.setActions(self.status.getActions()+1); 
      }  
    }
  }
   
  //下
  this.down=function()
  {
    if(self.operate&&self.operate.isRunning()&&!self.operate.isStopped())
    {
      if(self.operate.mayMoveDown())
      {
        self.operate.moveDown();
        self.status.setActions(self.status.getActions()+1);
      }  
    }
  }
   
  //左
  this.left=function()
  {
    if(self.operate&&self.operate.isRunning()&&!self.operate.isStopped())
    {
      if(self.operate.mayMoveLeft())
      {
        self.operate.moveLeft();
        self.status.setActions(self.status.getActions()+1);           
      }
 
    }
  }
   
  //右
  this.right=function()
  {
    if(self.operate&&self.operate.isRunning()&&!self.operate.isStopped())  
    {
      if(self.operate.mayMoveRight())
      {
        self.operate.moveRight();
        self.status.setActions(self.status.getActions()+1); 
      }
    }
  }
   
   
   
  //开始游戏
  document.getElementById("startGame").onclick=function(){self.start()};
//} //Tetris是一个整体类,里面包含了很多方法。
  var keyboard=new Keyboard(); //创建键盘类实体
  keyboard.set(keyboard.n,this.start);
  keyboard.set(keyboard.up,this.up); 
  keyboard.set(keyboard.down,this.down);
  keyboard.set(keyboard.left,this.left);
  keyboard.set(keyboard.right,this.right);
   
  document.onkeydown=keyboard.event; //按下按键按钮的事件
   
 
/*键盘操作方法*/
function Keyboard()
{
  this.up=38; //上
  this.down=40; //下
  this.left=37; //左
  this.right=39; //右
   
  this.n=78;
  this.p=80;
  this.r=82;
  this.space=32; //空格
  this.f12=123;
  this.escape=27; //退格键
   
  this.keys=[]; //键位集合
  this.funcs=[];
  var self=this;
   
  //设置键位
  this.set=function(key,func)
  {
    this.keys.push(key);
    this.funcs.push(func);
  }
   
  this.event=function(e)
  {
    if(!e){e=window.event;} 
    for(var i=0;i<self.keys.length;i++)
    {
      if(e.keyCode==self.keys[i]) 
      {
        self.funcs[i]();  
      }
    }
  }
   
     
}
 
 
//具体的操作类
function OperateTetris(area,tetris)
{
  var self=this; //当前对象
  this.area=area;
  this.tetris=tetris;
   
  this.types=null; //方块的类型;
  this.nextType=null; //下一个类型
   
  //初始化X和Y
  this.x=null;
  this.y=null;
  this.position=0; //初始位置
   
  this.board=[]; //用来填充HTML元素的
  this.elements=[];
  this.nextElements=[]; //下一个元素
   
  this.running=null; //是否在运行中
  this.stopped=null; //是否停止
   
  this.fallDownId=null; //往下掉落的
  this.speed=null; //速度
   
  /*方块的组合方式,用数组进行组合(二维数组)
  用0,1表示是否有方块存在,如果是0:不存在,1:存在,
  以下的逻辑就可以非常的清楚了。*/
  this.blockComplex=[
  [
  [0,0,1],[1,1,1],[0,0,0] //_|
  ],
   
  [
  [1,0,0],[1,1,1],[0,0,0] //L
  ],
   
  [
  [0,1,0],[1,1,1],[0,0,0] //T
  ],
   
  [
  [0,0,0],[1,1,1],[0,0,0] //--
  ],
   
  [
  [0,0,0],[0,1,1],[0,1,1] //口
  ],
   
  [
  [0,1,1],[0,1,0],[1,1,0] //Z
  ]
  ];
   
  this.stopGame=function()
  {
    this.running=false; 
  }
   
  /*一连串的GETTER方法
  分别是速度,X,Y轴,运行和停止的GETTER方法*/
  this.getSpeed=function()
  {
    return this.speed; 
  }
   
  this.getX=function()
  {
    return this.x; 
  }
   
  this.getY=function()
  {
    return this.y; 
  }
   
  this.isRunning=function()
  {
    return this.running;  
  }
   
  this.isStopped=function()
  {
    return this.stopped;
  }
   
  //重置(初始化)
  this.reset=function()
  {
    if(this.fallDownId)
    {
      clearTimeout(this.fallDownId); //下落的时候去掉时间间隔  
    }
    this.types=this.nextType;
    this.nextType=random(this.blockComplex.length);
     
       
    this.position=0;
    this.board=[];
    this.elements=[];
    this.x=null;
    this.y=null;
    this.speed=200; //速度暂定为51
     
    this.running=false;
    this.stopped=false;
     
    //移除下一个元素
    for(var i=0;i<this.nextElements.length;i++)
    {
      document.getElementById("next_operate").removeChild(this.nextElements[i]);
    }
     
    this.nextElements=[]; //下一个元素
     
     
     
       
  }
  //下一个类型,随机抽取
  this.nextType=random(this.blockComplex.length);
   
  //重置
  this.reset();
   
  /*判断是否替换*/
  this.mayPlace=function()
  {
    var isOperate=this.blockComplex[this.types];
     
    /*area开始的坐标原点*/
    var areaStartX=parseInt(this.area.x-isOperate[0].length);
    var areaStartY=1;
    var lineFound=false;
    var lines=0;
    for(var y=isOperate.length-1;y>=0;y--)
    {
      for(var x=0;x<isOperate[y].length;x++)
      {
        if(isOperate[y][x])
        {
          lineFound=true;
          if(this.area.getBlock(areaStartY,areaStartX+x)) {return false;}
        }  
      }  
       
      if(lineFound)
      {
        lines++;  
      }
      if(areaStartY-lines<0)
      {
        break; 
      }
       
    }
     
    return true;
  }
   
  /*替换*/
  this.place=function()
  {
    //初始化
    var operate=this.blockComplex[this.types];
     
     
    //区域开始X轴的位置
    var AreaXStartPos=parseInt(this.area.x-operate[0].length);
     
    //区域开始Y轴的位置
    //var AreaYStartPos=parseInt(this.area.y-operate[0]);
    var AreaYStartPos=1; //因为X轴的位置可能变化,而Y轴总是从最上面下来的,所以是1
     
    this.x=AreaXStartPos; //把新的位置赋给X;
    this.y=AreaYStartPos; //把新的位置赋给y;
     
    //构建空对象,并存入BOARD
    /*y:行,x:列*/
 
    //alert(operate[0].length+" "+operate.length);
    this.board=this.createEmpty(operate[0].length,operate.length);
     
    /*线条,往下掉落,初始化*/
    var lines=0;
    var foundLines=false;
     
    //循环遍历,先遍历行,每一行再来遍历列
    for(var yAxis=operate.length-1;yAxis>=0;yAxis--)
    {
      for(var xAxis=0;xAxis<=operate[yAxis].length;xAxis++)
      {
        if(operate[yAxis][xAxis])
        {
          var el=document.createElement("div");
          el.className="block"+this.types; //确定这个元素的CLASSNAME 
           
          //确定左边距和上边距
          el.style.left=(this.x+xAxis)*this.area.unit+"px";
          el.style.top=(this.y+yAxis)*this.area.unit+"px";
          this.area.el.appendChild(el); //这个EL去APPEND主要的EL。
           
          this.board[yAxis][xAxis]=el;
          this.elements.push(el); //推入elements中
           
        }
      }
       
      /*个人感觉这个功能应该是加速往下掉落的方法?不明觉厉*/
      if(lines)
      {
        yAxis--;  
      }
       
      if(foundLines)
      {
        lines++; 
      }
   
    }
      this.running=true;
      this.fallDownId=setTimeout(this.fallDown,this.speed); //间隔时间,掉落下的
       
      var nextOperate=this.blockComplex[this.nextType];
      for(var y=0;y<nextOperate.length;y++)
      {
        for(var x=0;x<nextOperate[y].length;x++)
        {
          //创建元素
          if(nextOperate[y][x])
          {
            /*先写到这里:2014-12-22*/  
            var el=document.createElement("div");
            el.className="block"+this.nextType;
            el.style.left=(x*this.area.unit)+"px";
            el.style.top=(y*this.area.unit)+"px";
             
            document.getElementById("next_operate").appendChild(el);
            this.nextElements.push(el); //下一个元素
             
          }  
        }  
      }
       
  }
   
  //创建空对象,即所有的都为0的对象,并返回对象
  this.createEmpty=function(x,y)
  {
      var elements=[];
      for(var y2=0;y2<y;y2++)
      {
         
        elements.push(new Array());
         
        for(var x2=0;x2<x;x2++)
        {
          elements[y2].push(0);  
        }
           
      }
      return elements;
  }
   
  //下落(这是一个最关键的函数,决定了这个游戏的成败)
  this.fallDown=function()
  {
    if(self.isRunning())  
    {
 
        if(self.mayMoveDown())
        {
          self.moveDown();  
          self.fallDownId=setTimeout(self.fallDown,self.speed); //下落的间隔时间
           
        }
        else
        {
          for(var i=0;i<self.elements.length;i++)
          {
            self.area.addElement(self.elements[i]);
          }    
          var lines=self.area.removeFullLines();
          if(lines)
          {
            /*这里到时候再写*/
            self.tetris.status.setLines(self.tetris.status.getLines()+lines);
          }
           
          self.reset();
          if(self.mayPlace())
          {
            self.place();  
          }
          else
          {
            self.tetris.gameOver(); 
          }
        }
    }
    else
    {
             
    }
     
  }
   
   
  //是否可以旋转俄罗斯方块
  this.mayRotate=function()
  {
    for(var y=0;y<this.board.length;y++)
    {
      for(var x=0;x<this.board[y].length;x++)
      {
        if(this.board[y][x])
        {
           
          /新的X,Y的值/
          var newY=this.getY()+this.board.length-1-x;
          var newX=this.getX()+y;
           
          if(newY>this.area.y){return false;}
          if(newX<0){return false;}
          if(newX>=this.area.x){return false;}
          if(this.area.getBlock(newY,newX)){return false;}   //获得区域 
           
        }  
      }  
    }
    return true;
  }
   
  //旋转俄罗斯方块
  this.rotate=function()
  {
    var puzzle=this.createEmpty(this.board.length,this.board[0].length); //创建一个空的矩阵
    for(var y=0;y<this.board.length;y++)
    {
      for(var x=0;x<this.board[y].length;x++)
      {
        //旋转,X轴和Y轴的坐标互换
        if(this.board[y][x])
        {
          var newY=puzzle.length-1-x;
          var newX=y;
          var el=this.board[y][x]; //旋转前的对象
           
          var moveY=newY-y;
          var moveX=newX-x;
           
          //长度是offsetTop或left加上偏移量
          el.style.left=el.offsetLeft+(moveX*this.area.unit)+"px";
          el.style.top=el.offsetTop+(moveY*this.area.unit)+"px";
           
          puzzle[newY][newX]=el;
           
        }  
      }  
    }
    this.board=puzzle;
  }
   
  //下落方法(进行判断)
  this.mayMoveDown=function()
  {
    for(var y=0;y<this.board.length;y++)
    {
      for(var x=0;x<this.board[y].length;x++)
      {
        if(this.board[y][x])
        {
          if(this.getY()+y+1>=this.area.y){this.stopGame=true;return false;}  //如果触底,那么就停止游戏
          if(this.area.getBlock(this.getY()+y+1,this.getX()+x)){this.stopGame=true;return false;}
           
           
        }  
      }  
    }  
     
    return true;
  }
   
  //下落
  this.moveDown=function()
  {
    //用一个循环去控制下落
    for(var i=0;i<this.elements.length;i++)
    {
      this.elements[i].style.top=this.elements[i].offsetTop+this.area.unit+"px";
       
    }  
    this.y++;
  }
   
  this.mayMoveLeft=function()
  {
    /*可以向左移动(判断方法)*/
    for(var y=0;y<this.board.length;y++)
    {
      for(var x=0;x<this.board[y].length;x++)
      {
        if(this.board[y][x])
        {
          if(this.getX()-1+x<0)
          {
            return false;  
          }  
           
           
          if(this.area.getBlock(this.getY()+y,this.getX()+x-1)){return false;}
           
        }
      }  
    }
    return true;
     
  }
   
  //向左移动
  this.moveLeft=function()
  {
    /*向左移动(判断方法)*/ 
    for(var i=0;i<this.elements.length;i++)
    {
      this.elements[i].style.left=this.elements[i].offsetLeft-this.area.unit+"px";
    }
    this.x--;
       
  }
   
  /*是否可以向右移动*/
  this.mayMoveRight=function()
  {
    for(var y=0;y<this.board.length;y++)
    {
      for(var x=0;x<this.board[y].length;x++)
      {
        if(this.board[y][x])
        {
          if(this.getX()+1+x>=this.area.x){return false;} 
          if(this.area.getBlock(this.getY()+y,this.getX()+x+1)){return false;}
        }  
      }  
    }  
     
    return true;
  }
   
  /*向右移动*/
  this.moveRight=function()
  {
    for(var i=0;i<this.elements.length;i++)
    {
      this.elements[i].style.left=this.elements[i].offsetLeft+this.area.unit+"px";  
    }  
    this.x++;
  }
   
  /*摧毁方法*/
  this.destroy=function()
  {
    for(var i=0;i<this.elements.length;i++)
    {
      this.area.el.removeChild(this.elements[i]);
       
    }  
    this.elements=[];
    this.board=[];
    this.reset();
  }
}
 
/*俄罗斯方块状态*/
function State()
{
   
   
  /*初始化*/
  this.level;
  this.time;
  this.score;
  this.opeate; 
  this.lines;
   
  this.apm; //不明觉厉
   
  this.actions; //动作
   
  this.el=
  {
    "lines":document.getElementById("lines"),
    "level":document.getElementById("level"),
    "time":document.getElementById("time"),
    "apm":document.getElementById("apm"),
    "operate":document.getElementById("operate")
  }
   
  this.timeId=null;
  var self=this;
   
  //开始游戏
  this.start=function()
  {
    this.reset(); //重置
    this.timeId=setInterval(this.incTime,1500);
       
  }
   
  /*停止游戏*/
  this.stopGame=function()
  {
    if(this.timeId)
    {
      clearInterval(this.timeId); 
    }
       
  }
   
  //重置
  this.reset=function()
  {
    this.stopGame();
    this.level=1;
    this.time=0;
    this.score=0
    this.opeate=0; 
    this.lines=0;
     
    /*以后可能加INNERHTML*/
    this.el.level=this.level;
    this.el.time=this.time;
    this.el.score=this.score;
    this.el.operate=this.opeate;
    this.el.lines=this.lines;
     
  }
   
  //和SetInterval有关
  this.incTime=function()
  {
    self.time++;
    self.el.time.innerHTML=self.time; //设置时间
    self.actions=parseInt(self.actions/self.time)*60;
    this.el.apm.innerHTML=self.apm;
     
  }
   
  /*设置分数*/
  this.setScore=function(i)
  {
    this.score==i;
    this.el.score.innerHTML=this.score;
  }
   
  /*设置等级*/
  this.setLevel=function(i)
  {
    this.level=i;
    this.el.level.innerHTML=this.level; //设置内部HTML
  };
   
  this.getLevel=function()
  {
    return this.level; 
  }
   
  //线条的SETTER方法
  this.setLines=function(i)
  {
    this.lines=i;
    this.el.lines.innerHTML=this.lines; 
  }
   
  this.getLines=function()
  {
    return this.lines;
  }
   
  //设置动作
  this.setActions=function(i)
  {
    this.actions=i;
    //this.el.actions.innerHTML=this.actions;  
  }
   
  this.getActions=function()
  {
    return this.actions;  
  }
   
  //设置apm
  this.setApm=function(i)
  {
    this.apm=i;
    this.el.apm.innerHTML=this.apm; 
  }
   
  this.getApm=function()
  {
    return this.apm;  
  }
   
  //控制下落操作的类
  this.setOperate=function(i)
  {
    this.opeate=i;
    this.el.operate=this.operate;
  }
   
  this.getOperate=function()
  {
    return this.opeate; 
  }
   
 
}
 
//随机数,产生1~6的
function random(i)
{
  return Math.floor(Math.random()*i);
}
 
} /*Tetris是一个整体类,里面包含了很多方法*/
</script>
 
</head>
 
<body>
 
  <div id="tetris">
  <!--正方形 -->
<div id="test">
  <div class="t"></div>
</div>
 
<!--长方形-->
<div id="rect">
  <div class="r">
   
  </div>
</div>
 
<!-- 俄罗斯方块实体类-->
<div id="tetris-area">
   
</div>
 
<!-- 下一个操作-->
<div id="next_operate"></div>
 
<!--游戏结束-->
<div id="game_over">Game Over</div>
 
<!-- 按键 -->
<div id="keys_Press">
 
 
</div>
 
<input type="button" id="startGame" value="Start" />
 
<!--线条 -->
<div id="lines"></div>
 
<!--等级 -->
<div id="level"></div>
 
<!--apm(不知道有什么作用) -->
<div id="apm"></div>
 
<!--时间 -->
<div id="time"></div>
 
<!--控制下落操作 -->
<div id="operate"></div>
 
<!-- 功能键(暂停)-->
<div id="tetris-pause">
 
</div>
 
<!-- 功能键(继续)-->
<div id="tetris-resume" style="display:none">
 
</div>
</div>
<script>
  var tx=new Tetris();
  tx.x=12;
  tx.y=22;
  tx.unit=14;
  //tx.start(); //开始游戏
</script>
 
</body>
</html>

演示图:

原生JavaScript编写俄罗斯方块

项目git地址:
http://git.oschina.net/KMSFan/Tetris_Yang

项目演示地址:http://runjs.cn/detail/ggo07ery

以上所述就是本文的全部内容了,希望能够对大家学习javascript有所帮助。

Javascript 相关文章推荐
List Information About the Binary Files Used by an Application
Jun 11 Javascript
jquery 应用代码 方便的排序功能
Feb 06 Javascript
javascript对下拉列表框(select)的操作实例讲解
Nov 29 Javascript
浅谈Javascript 数组与字典
Jan 29 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
May 09 Javascript
10条建议帮助你创建更好的jQuery插件
May 18 Javascript
JS 滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件
Oct 10 Javascript
微信小程序简单实现form表单获取输入数据功能示例
Nov 30 Javascript
vuedraggable+element ui实现页面控件拖拽排序效果
Jul 29 Javascript
React+Redux实现简单的待办事项列表ToDoList
Sep 29 Javascript
JavaScript实现更换背景图片
Oct 18 Javascript
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
Apr 03 Javascript
原生js结合html5制作简易的双色子游戏
Mar 30 #Javascript
原生js结合html5制作小飞龙的简易跳球
Mar 30 #Javascript
PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法
Mar 30 #Javascript
浅谈类似于(function(){}).call()的js语句
Mar 30 #Javascript
jquery实现右键菜单插件
Mar 29 #Javascript
纯JavaScript实现的兼容各浏览器的添加和移除事件封装
Mar 28 #Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
Mar 28 #Javascript
You might like
php 正则表达式小结
2009/08/31 PHP
递归实现php数组转xml的代码分享
2015/05/14 PHP
PHP匿名函数(闭包函数)详解
2019/03/22 PHP
Laravel 默认邮箱登录改成用户名登录的实现方法
2019/08/12 PHP
js下获取div中的数据的原理分析
2010/04/07 Javascript
javascript监听鼠标滚轮事件浅析
2014/06/05 Javascript
NodeJS Web应用监听sock文件实例
2015/02/18 NodeJs
JavaScript生成随机数的4种自定义函数分享
2015/02/28 Javascript
javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
2015/05/14 Javascript
JavaScript模拟实现键盘打字效果
2015/06/29 Javascript
JavaScript File API文件上传预览
2016/02/02 Javascript
jQuery实现自动输入email、时间和域名的方法
2016/08/24 Javascript
jquery 仿锚点跳转到页面指定位置的实例
2017/02/14 Javascript
jQuery源码解读之extend()与工具方法、实例方法详解
2017/03/30 jQuery
富文本编辑器vue2-editor实现全屏功能
2019/05/26 Javascript
深入了解Hybrid App技术的相关知识
2019/07/17 Javascript
解决vuex数据页面刷新后初始化操作
2020/07/26 Javascript
[01:07]DOTA2次级职业联赛 - Fpb战队宣传片
2014/12/01 DOTA
python连接MySQL数据库实例分析
2015/05/12 Python
Python实现的多线程http压力测试代码
2017/02/08 Python
使用Pandas将inf, nan转化成特定的值
2019/12/19 Python
Python关键字及可变参数*args,**kw原理解析
2020/04/04 Python
服务器端jupyter notebook映射到本地浏览器的操作
2020/04/14 Python
浅谈keras中的Merge层(实现层的相加、相减、相乘实例)
2020/05/23 Python
python中threading和queue库实现多线程编程
2021/02/06 Python
matplotlib 范围选区(SpanSelector)的使用
2021/02/24 Python
CSS3教程(9):设置RGB颜色
2009/04/02 HTML / CSS
安纳塔拉酒店度假村及水疗官方网站:Anantara Hotel
2016/08/25 全球购物
太阳镜仓库,售价20美元或更少:Sunglass Warehouse
2016/09/28 全球购物
采购求职信
2014/03/17 职场文书
产品开发计划书
2014/04/27 职场文书
教育局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
2016反腐倡廉警示教育心得体会
2016/01/13 职场文书
2016优秀教师先进个人事迹材料
2016/02/25 职场文书
html5中sharedWorker实现多页面通信的示例代码
2021/05/07 Javascript
电脑只能进入安全模式无法正常启动的解决办法
2022/04/08 数码科技