Html5+js实现俄罗斯方块
代码测试地址:测试
1、使用的知识点
html5
javascript
2、需要实现的功能
俄罗斯方块普通玩法
3、分析功能实现
(1)组合方块,共7中形状,可静态指定(由4个方块组合)
(2)实现组合方块的下移、左移和右移
如图所示: 组合图形左移即 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 ;
(4)方块消除(是方块而非组合图形)
判断每一行是否填满,填满即可消除
(5)其他待实现功能
积分
升级
……
代码设计及实现请参见: 代码设计
代码下载:
下载
代码测试地址:测试
1、使用的知识点
htML5
javascript
2、需要实现的功能
俄罗斯方块普通玩法
3、分析功能实现
(1)组合方块,共7中形状,可静态指定(由4个方块组合)
(2)实现组合方块的下移、左移和右移
如图所示: 组合图形左移即 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 ;
(4)方块消除(是方块而非组合图形)
判断每一行是否填满,填满即可消除
(5)其他待实现功能
积分
升级
……
代码设计及实现请参见: 代码设计
代码下载:
下载
觉得可用,就经常来吧! 欢迎评论哦! html5教程,巧夺天工,精雕玉琢。小宝典献丑了!
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: Html5+js实现俄罗斯方块
本文地址: https://pptw.com/jishu/586395.html