Html5+js实现俄罗斯方块

原创 2014年01月14日 23:40:13

代码测试地址:测试

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)其他待实现功能

   积分

   升级

   ……


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


代码下载:

    下载


Javascript实现简易俄罗斯方块游戏

  • 2014年06月08日 23:15
  • 2KB
  • 下载

HTML5 canvas 俄罗斯方块。。。

HTML5 canvas 俄罗斯方块。。。
  • rsj217
  • rsj217
  • 2013-04-10 17:09:46
  • 695

纯html 实现俄罗斯方块

  • 2008年12月06日 17:13
  • 12KB
  • 下载

html5 俄罗斯方块

  • 2012年10月14日 10:16
  • 95KB
  • 下载

HTML+CSS+JS 俄罗斯方块小游戏 参考教材练习

TETRIS body>div { font-size:13pt; padding-bottom:8px; } span{ font-size:20pt; color:green...
  • Bingo_12345
  • Bingo_12345
  • 2015-08-19 21:50:09
  • 915

HTML&javascript实现的俄罗斯方块

  • 2014年03月27日 22:47
  • 4KB
  • 下载

俄罗斯方块实现代码

一个完全原创的基于Nokia5230进行真机开发以及调试的俄罗斯方块小游戏,其中使用到了一些Symbian应用开发的基本技术,例如:定时器、屏幕绘图、菜单、鼠标响应、震动器、传感器等等,源代码都在里面...
  • hanlinxueshi1
  • hanlinxueshi1
  • 2013-09-04 18:07:15
  • 434

非常经典的俄罗斯方块源码!HTML5,可直接运行!

整理自己的360仓库时发现的,非常经典,HTML5,可直接运行,强力推荐!!
  • sinat_22657459
  • sinat_22657459
  • 2015-02-12 15:25:56
  • 3072

JS写俄罗斯方块完美注释版

JS写俄罗斯方块完美注释版/************************************************************* JS俄罗斯方块完美注释版 v 1.01* 作者:...
  • sunxing007
  • sunxing007
  • 2008-11-19 00:35:00
  • 15214

Html5+js实现俄罗斯方块

代码测试地址:测试 1、使用的知识点 html5 javascript 2、需要实现的功能 俄罗斯方块普通玩法 3、分析功能实现 (1)组合方块,共7中形状,可静态指定(由4个方块组合)      ...
  • yixi524
  • yixi524
  • 2014-01-14 23:40:13
  • 1725
收藏助手
不良信息举报
您举报文章:Html5+js实现俄罗斯方块
举报原因:
原因补充:

(最多只允许输入30个字)