宝哥软件园

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

编辑:宝哥软件园 来源:互联网 时间:2021-09-09

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

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

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

游戏规则

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方法分为两部分,一部分用来随机尝试下一块,另一部分用来缓存当前要描绘的块。当前块触底并固定后,下一块开始绘制,再次随机生成新块。如此重复。

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

更多资讯
游戏推荐
更多+