Question

javascript实现俄罗斯方块难不难

Answer 1

JavaScript实现俄罗斯方块的代码如下，你可以参考：

分析与解法

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

1)旋转到合适的方向

2)水平移动到某一列

3)垂直下落到底部

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

方块一共7种，每种有4种方向。定义activeBlock[4]，在编译之前这个数组的值预定算好，在程序中直接使用。

难点

1)边界检查。

　　//检查左边界,尝试着朝左边移动一个,看是否合法。
　　function checkLeftBorder(){
　　for(var i=0; i
　　if(activeBlock[i].y==0){
　　return false;
　　}
　　if(!isCellValid(activeBlock[i].x, activeBlock[i].y-1)){
　　return false;
　　}
　　}
　　return true;
　　} //同理，需要检测右边界和底边界

2)旋转, 需要数理逻辑, 一个点相对另外一个点旋转90度的问题。

3)定时和监听键盘事件机制让游戏自动运行下去。

　　//开始
　　function begin(e){
　　e.disabled = true;
　　status = 1;
　　tbl = document.getElementById("area");
　　if(!generateBlock()){
　　alert("Game over!");
　　status = 2;
　　return;
　　}
　　paint();
　　timer = setInterval(moveDown,1000);
　　}
　　document.onkeydown=keyControl;

程序过程

1)用户点开始->构造一个活动图形, 设置定时器。

　//当前活动的方块, 它可以左右下移动, 变型。当它触底后, 将会更新area;
　　var activeBlock;
　　//生产方块形状, 有7种基本形状。
　　function generateBlock(){
　　activeBlock = null;
　　activeBlock = new Array(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};
　　break;
　　}
　　//省略部分代码..............................
　　case 6:{
　　activeBlock[0] = {x:0, y:5};
　　activeBlock[1] = {x:1, y:4};
　　activeBlock[2] = {x:1, y:5};
　　activeBlock[3] = {x:1, y:6};
　　break;
　　}
　　}
　　//检查刚生产的四个小方格是否可以放在初始化的位置.
　　for(var i=0; i<4; i++){
　　if(!isCellValid(activeBlock[i].x, activeBlock[i].y)){
　　return false;
　　}
　　}
　　return true;
　　}

2)每次向下移动后, 都检查是否触底, 如果触底了, 则尝试消行。

　　//消行
　　function deleteLine(){
　　var lines = 0;
　　for(var i=0; i<18; i++){
　　var j=0;
　　for(; j<10; j++){
　　if(area[i][j]==0){
　　break;
　　}
　　}
　　if(j==10){
　　lines++;
　　if(i!=0){
　　for(var k=i-1; k>=0; k--){
　　area[k+1] = area[k];
　　}
　　}
　　area[0] = generateBlankLine();
　　}
　　}
　　return lines;
　　}

　　3)完了之后再构造一个活动图形, 再设置定时器。