php俄罗斯方块代码,JavaScript实现俄罗斯方块游戏过程分析及源码分享_javascript技巧...

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.οnkeydοwn=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)完了之后再构造一个活动图形, 再设置定时器。

效果图

0978bf0c477682a9c237dfa8dc906d18.png

0350aadbb36f6f7f47bfc0deb36e82e5.png

a9fab2fea09585001eaca7c8dddc59ab.png

有待优化

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

思路:在创建方块函数内,设定activeBlockColor颜色,七种不同形态方块颜色各异(除了修改generateBlock方法之外,还需要修改paintarea方法。因为一开始考虑不周全,消除一行后,重绘方块的同时将颜色统一,因此可以考虑移除表格n行,然后在顶部增添n行,以保证没消除方块的完整性)。

2)当当前方块下落时,可以提前查看下一个方块。

思路:将generateBlock方法拆分成两部分,一部分用于随机尝试下一个方块,一部分用于缓存当前所要描绘的方块。当当前方块碰到底部被固定后,下一方块开始描绘,同时又再次随机产生新方块。如此反复。

完整HTML源码:

Tetris

得分: 0

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值