欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Html5+js实现俄罗斯方块

程序员文章站 2022-06-10 15:46:09
代码测试地址:测试 1、使用的知识点 html5 javascript 2、需要实现的功能 俄罗斯方块普通玩法 3、分析功能实现 (1)组合方块,共7中形状,可静态指定(由4个方...

代码测试地址:测试

1、使用的知识点

html5

javascript

2、需要实现的功能

俄罗斯方块普通玩法

3、分析功能实现

(1)组合方块,共7中形状,可静态指定(由4个方块组合)

Html5+js实现俄罗斯方块

(2)实现组合方块的下移、左移和右移

Html5+js实现俄罗斯方块
如图所示: 组合图形左移即 x坐标减1 组合图形右移即 x坐标加1 组合图形下移即 y坐标加1 (3)实现组合图形旋转

假设对图片上任意点(x,y),绕一个坐标点(rx0,ry0)逆时针旋转rotaryangle角度后的新的坐标设为(x", y'),有公式:
x'= (x - rx0)*cos(rotaryangle) + (y - ry0)*sin(rotaryangle) + rx0 ;
y'=-(x - rx0)*sin(rotaryangle) + (y - ry0)*cos(rotaryangle) + ry0 ;

90°旋转公式简化

x'=y - ry0 + rx0 ;

y'=-(x - rx0)+ ry0 ;

Html5+js实现俄罗斯方块

(4)方块消除(是方块而非组合图形)

判断每一行是否填满,填满即可消除

(5)其他待实现功能

积分

升级

……


代码设计及实现请参见: 代码设计


代码下载:

下载