用javascript实现俄罗斯方块游戏的思路和方法

看《编程之美》:“程序虽然难写，但是很精彩。要想把程序写好，需要写一些基础知识，包括编程语言、数据结构和算法。一个写得好的程序，需要缜密的逻辑思维能力和良好的梳理基础，熟悉编程环境和编程工具。”

学了几年计算机，你有没有爱上过编程？换句话说，如果你不试着自己写一个游戏，你就不爱编程。

俄罗斯方块引起的轰动和经济价值，可以说是游戏史上的一件大事。看似简单，却变化多端，让人上瘾。我相信大多数学生都痴迷于此。

游戏规则

1.放置小方块的平面虚拟场，标准尺寸：行宽10，列高20，以每个小方块为单位。

2.由四个小方块组成的一组规则图形，英文称为Tetromino，中文称为square，以S、Z、L、J、I、O、T七个字母的形状命名.

I:一次最多消除四层

j(左右):最多取消三层，或者取消两层

l:最多消除三层，或者消除两层

o:取消一两层

s(左右):最多两层，容易造成破洞

z(左右):最多两层，容易造成破洞

汤：最多两层

盒子会慢慢地继续从该区域的顶部落下。玩家可以90度为单位旋转箱子，以格子为单位左右移动箱子，加速箱子下落。当一个盒子移动到该区域的底部或落在另一个盒子上时，它将被固定在那里，一个新的盒子将出现在该区域上方并开始下落。当区域中的一排水平网格被方块完全填满时，该行将消失并成为玩家的分数。同时删除的列越多，得分指数越高。

分析和解决方案

在每个方块下落的过程中，我们可以做到：

1)向右旋转

2)水平移动到某一列

3)垂直下落至底部

首先，需要一个二维数组，区域[18][10]，来表示18*10的游戏区域。其中，数组中的值0表示空，1表示有一个框。

正方形有七种，每种有四个方向。定义活动块[4]。在编译之前，计算这个数组的值，并直接在程序中使用。

困难

1)边界检查。

//检查左边界，试着向左移动一个，看看是否合法。函数CheckLeftBorder(){ for(var I=0；iactiveBlock.lengthi ){ if(activeBlock[i]。y==0){返回false} if(！isCellValid(activeBlock[i])。x，activeBlock[i]。y-1)){返回false} }返回true}//同样，需要检测右边界和底界。2)旋转需要数学逻辑，一个点相对另一个点旋转90度。3)计时和监控键盘事件的机制使游戏自动运行。

//start函数begin(e){ e . disabled=true；状态=1；TBL=document . getelementbyid(' area ')；if(！generateBlock()){ alert('游戏结束！');状态=2；返回；} paint()；timer=setInterval(moveDown，1000)；} document . onkeydown=key control；程序过程

1)用户点开始-构建活动图并设置计时器。

//可以改变当前活动的可以左右上下移动的方框。当它触底时，它会更新区域；var activeBlock//生产块形状，有7种基本形状。函数generateBlock(){ activeBlock=null；活动块=新数组(4)；//随机生成0-6个数组，代表7种形式。var t=(math . floor(math . random()* 20)1)% 7；switch(t){ case 0: { activeBlock[0]={ x :0，y :4 }；activeBlock[1]={x:1，y :4 }；activeBlock[2]={x:0，y :5 }；activeBlock[3]={x:1，y :5 }；打破；}//省略部分代码....case6: {活动块[0]={x:0，y :5 }；activeBlock[1]={x:1，y :4 }；activeBlock[2]={x:1，y :5 }；activeBlock[3]={x:1，y :6 }；打破；} }//检查新产生的四个小方块是否可以放在初始化位置。for(var I=0；i4；i ){ if(！isCellValid(activeBlock[i])。x，activeBlock[i]。y)){返回false} }返回true}2)每次向下运动后，检查是否见底。如果它触底，尝试取消。

//取消行功能删除行(){ var lines=0；for(var I=0；i18I){ var j=0；for(；j10j){ if(area[I][j]==0){ break；} } if(j==10){ line；如果(我！=0){ for(var k=I-1；k=0；k - ){面积[k ^ 1]=面积[k]；} } area[0]=generateBlankLine()；} }返回线路；}3)之后，构建一个活动图并设置一个计时器。

翻译

有待优化

1)设置不同形状方块的颜色。

思考：在创建块的功能中，设置了activeBlockColor的颜色，七种不同形状的块的颜色是不一样的(除了修改generateBlock方法，paintarea方法也需要修改。因为一开始考虑不周，去掉一行后，在重画方块的时候统一了颜色。因此，可以考虑从表中删除N行，然后在顶部添加N行，以确保不消除框的完整性。

2)当前框落下时，可以提前勾选下一个框。

思考：generateBlock方法分为两部分，一部分用来随机尝试下一块，另一部分用来缓存当前要描绘的块。当前块触底并固定后，下一块开始绘制，再次随机生成新块。如此重复。

以上就是本文的全部内容，希望大家喜欢。