最近在学习JavaScript，想编一些例子来练练手。之前编过一个贪吃蛇，但是在实现的时候没有注意使用面向对象的思想，实现起来也比较简单所以就不总结了，下面总结一下俄罗斯方块游戏的思路和实现今天（部分代码需要下载），详细讲解一下，需要耐心看完。..基本思路游戏区域：游戏区域是固定的，这里设置为一个长方形区域，宽10个单位，高16个单位，前端显示通过表格实现，每个td保存在一个用于渲染游戏进程的二维数组。Cube：立方体有7种形状，用一个4*4的矩阵保存立方体的形状；按向上方向键可以旋转立方体，可以通过矩阵旋转来实现；立方体可以左右移动，需要判断左右方块是否有出界机；还需要注意判断区块是否已经见底。按向下箭头键快速下拉。得分：每次区块掉落完成后，判断是否可以得分。下面部分工具变量的具体实现很有用。只是回来阅读它。现在可能有点混乱(???)?。block_now，block_next；目前，对于下一个block对象，将block_next赋值给block_now，然后创建一个新的block赋值给block_next。beforeBlock：16*10矩阵块上一时刻的位置，用于擦除最后一秒allBlock：16*10矩阵完成块ground：16*10游戏区域，获取DOM，渲染游戏区域。方块类实现了这个游戏的核心就在于这个方块类，我们会创建一个方块类型，然后7个形状的方块继承这个方块类。方块类的属性方块的实例属性包括：移动方向、状态、形状、当前位置、颜色。functionBlock(){this.dir=40;//当前方块的移动方向this.end=0;//状态，是否下落完成this.shape=newArray();//4*4个方块for(vari=0;i<4;i++){this.shape[i]=newArray();}this.pos=[0,3];//行，列this.color=["#FFAEC9","#B5E61D","#99D9EA","#C8BFE7","#B97A57"];}这里先明确一下正方形和形状的关系，后面经常用到这个概念。如下，4*4的矩阵我称之为“正方形”，有颜色（绿色）的部分我称之为形状。7块子类functionBlock_i(){Block.call(this);this.shape=[[1,1,1,1],[0,0,0,0],[0,0,0,0],[0,0,0,0]];}Block_i.prototype=新块（）；其他形状同上：s:[[0,1,1,0],[1,1,0,0],[0,0,0,0],[0,0,0,0]];j:[[0,1,0,0],[0,1,0,0],[1,1,0,0],[0,0,0,0]];o:[[1,1,0,0],[1,1,0,0],[0,0,0,0],[0,0,0,0]];z:[[1,1,0,0],[0,1,1,0],[0,0,0,0],[0,0,0,0]];t:[[0,1,0,0],[1,1,1,0],[0,0,0,0],[0,0,0,0]];l:[[1,0,0,0],[1,0,0,0],[1,1,0,0],[0,0,0,0]];methodofblockclassblockclass方法有：旋转方块，移动方块，下坡方块，打印方块。旋转块1.旋转块时，我们先将矩阵顺时针旋转90度for(vari=0,dst=3;i<4;i++,dst--){for(varj=0;j<4;j++)tmp[j][dst]=this.shape[i][j];}2。然后将旋转后的图像移动到矩阵的左上角，这样就可以表现出原地旋转的效果。for(vari=0;i<4;i++){varflag=1;for(varj=0;j<4;j++){//判断第一列是否有图像if(tmp[j][0]){flag=0;}}if(flag){//第一列没有图片，去掉第一列，最后加空白列for(varj=0;j<4;j++){tmp[j].转移（）;tmp[j].push(0);}}}3.最后将旋转后的矩阵存回原来的矩阵downhillcube。用户按下向下箭头键，立方体将直接落地。这一步我纠结了好久，最后用了一个比较笨的方法。这里简单解释一下原理。您可以下载源代码了解详细信息。1.首先计算方阵中形状内容的右下边界（因为我们已经把图案放在了左上角，所以就不用再求左上边界ヾ(￣▽￣))，比如s形正方形的右边界是3，下边界是2这样。这可以通过两个循环来实现。2.判断shape正下方是否有block时（注意是shape）（勾选allBlock），当下方有block时：(1)计算当前下边界block之间的距离y形状及其下方的块，如图（2）所示。顶块与上块对应位置的距离x，如图（3）所示，取两者距离中较小的距离作为块的垂直移动距离，移动块。并修改块状态。当下方没有方块时，方块被最小化。计算距离时，记得加上块底部和形状底部之间的距离。并修改块状态。移动方块用户通过键盘方向键移动方块：左(37)上(38)右(39)下(40)括号中的键码。监听键盘事件：使用this.dir记录立方体当前的移动方向。当用户按下向上键时，调用方块旋转函数；当用户按下左右键时，块所在的列（this.pos[1]）加1或减1；当用户按下该键时，会调用下坡块的功能。最后打印正方形（判断是否越界在打印正方形的步骤）（给形状上色）擦掉前一时刻的方块，此时绘制方块如果方块完全掉落（this.end=1），将方块加入掉落的方块矩阵（allBlock）即可！完成这一步，胜利就指日可待了。撒花ヾ(￣▽￣)~工具函数生成块。使用两个随机数随机生成方块的形状和颜色：functioncreateBlock(r1,r2){//varr=0;switch(r1){case0:block_new=newBlock_i();break;案例1：block_new=newBlock_j();break;情况2：block_new=newBlock_l();break;案例3：block_new=newBlock_o();休息;案例4：block_new=newBlock_s();break;案例5：block_new=newBlock_t();break;情况6：block_new=newBlock_z();break;}block_new.color=block_new.color[r2];returnblock_new;}2.生产分数判断每次打印块时是否可以淘汰该分数。如果可以得分，删除allBlock(splice)中的行，在最开始添加一个空行([0,0,0,0,0,0,0,0,0,0])然后在添加In地面，将此行的样式更改为上一行的样式，依此类推。显示消除线的效果。3.记录最高分。我还做了一个用cookies记录最高分的功能。每打出一个分数，就判断是否为最高分，并显示出来。具体要看代码。终于快要支付代码下载地址了，恩恩去吃饭了。
