JavaScript版俄罗斯方块Easy Tetris实现原理（3）
来源：DHTML精英,WEB前端专家 发布时间：2009-07-16 10:25:00
变形部分相对简单，如，Z的变形为：
[
[0,0,1,0]
[0,1,1,0]
[0,1,0,0]
[0,0,0,0]
]
只要将此形状同时保存到方块数组中即可，由于所有方块中，最多变形次数为4次，所以，所有方块都4个一组的来表示，每一个维度表示每一次形变后的形状，在变形方法中只要通过这个索引值来进行递增即可获得下一次形变的样子，然后重新渲染出来即可。
投影部分
需要一个和方块部分一一对应的数组，记录每个方块的投影区域，还是以Z为例，它可以表示为：
[1,1,1,0,1,1,0,0]
前4位 1,1,1,0 表示，在一个4列的格子中，Z，前面3个格子是要进行投影的
后4位 1,1,0,0 表示，投影跟随下落方块的时候，Y坐标在下落方块下面第1个位置（1的个数-1）
投影部分除了需要一个对应的数据外，还需要一个DOM元素进行表示，很简单，就是一个1*4的表格，它需要在下落方块移动、变形的时候做相应的处理。
边界检测
边界检测应该是俄罗斯方块中最重要的算法部分了。在Easy Tetris中采用的是“位与”判断的方法进行处理，即，将下落的方块4*4个区域与即将落在的游戏区域中相应的4*4个区域进行“位与”比较，如果返回0，则说明可以移动，否则，不能移动。
下落的方块每调用一次“移动”的方法之前，都要进行边界检测；
下落的方块每调用一次“变形“的方法之前，也要进行边界检测；
所以，如果你能够足够的优化移动、变形、边界检测这三部分的算法，那么你的俄罗斯方块将会给玩家一个非常高的控制灵敏度，从而大大提高可玩性！
好了，在WEB中用JavaScript编写俄罗斯方块的大体原理就是这样了，下面，我们一起来玩玩这个写好的俄罗斯方块游戏Easy Tetris吧：http://www.v-ec.com/games/tetris/
0
投稿猜你喜欢
- Google Chrome，又喜欢逛豆瓣，Google Chrome支持User Scripts了，但是我写的那几个插件在Chrome下又跑
阅读上一章：Chapter 8 再谈清单Chapter 9 精简标签先前我们不断提到结构化内容能够把结构与设计细节分类并精简标签,该怎么做呢- 构筑专业的网络站点和应用程序,先进的设计工具,功能强大，开放式集成系统；流畅的开发进程。Macromedia Dreamweaver MX
- xml（可扩展标记语言）看起来可能像某种w3c标准——现在没有什么实际影响，即使以后能派上用场，也是很久以后的事。但实际上，它现在已经得到了
- 文章主要讲术了一些SQL Server新的Bug，帮您认识这些被忽略的SQL Server注入技巧。1．关于Openrowset和Opend
- 以下的文章主要介绍的是SQL Serve数据库到DB2连接服务器的实现过程，我们大家都知道不同数据库平台的互连，一般对其称之为数据库的异构服
- 内容摘要：一般情况下，如果我们想了解股市行情，必须登录专业股票网站，输入公司代码才能看到具体股价。其实，利用XMLHTTP协议，我们每个人都
- 看到这篇文章的人，如果我没有估计错的话，八成是从事互联网的人，其中又有八成是做设计的。如果真是这样，可以一起庆幸一下。首先，庆幸从事着一个没
- 这是我在做的一个游戏的半成品,整理了一下发出来.原理:通过更新变换矩阵来记录转动(函数remx()).利用矩阵计算出转动后的正方体顶点坐标,
- 在输入框里面预设一段提示文字，当焦点在输入框的时候清空这段文字，这在目前来说已经不是什么新鲜事了。淘宝的搜索框就用到了这样一种设计：这种设计
- 假设在搜索框search中输入：“asp 编程” 先得到输入框中的内容：search=request("search")
- 遇到一个难题，在无物理键盘情况下，通过页面软键盘在页面文本框输入汉字，不知道51js的各位大牛有没有遇到过这种需求，如果遇到过是如何解决的，
- 如果要问做什么事是最有吸引力，那就是创建Web应用。Web设计者们对设计交互式的Web没有什么更好的办法，却对我们做桌面软件的同事投去少许羡
- 代码如下:Function htmll(mulu,htmlmulu,FileName,filefrom,htmla,htmlb,h
- 1. 确认已经安装了NT/2000和SQL Server的最新补丁程序，不用说大家应该已经安装好了，但是我觉得最好还是在这里提醒一下。2.
- 这个函数是前几年刚流行小偷程序的时候，偶写来用于小偷程序中截取代码的；可能有些朋友在我以前的代码中看见过了，但没有写用法，现在把调用方法及使
- 近日大家热议的盗版XP黑屏问题想必很多人都知道了，在这里就不多说。据媒体报道，微软公司将实施逐步投放策略，预计本周将投放5％黑屏，下周投放2
- 星爷的一部“国产007”应该是无人不晓，其中一个片段是将“007”向MM展示他的秘密武器。皮鞋可以吹头发，大哥大可以刮胡子……把真实功能隐蔽
- 为满足用户的视觉追求及产品的背景图片的换肤功能，设计师难免在设计上会用到半透明的效果。因此页面重构师基于视觉及产品的需要，采用了PNG32的
- asp函数实现把数字格式化为每3个数字时以逗号间隔的数字见下：<％Function Comma(str)If No
