js版俄罗斯方块设计思想及实现

阅读更多
俄罗斯方块方块是小时候的一个回忆,从最开始的掌上的黑白游戏机,到电视游戏机,到电脑,无不有它的痕迹,今天我们来一起重温它的一种实现方法,也算是整理一下我的思路吧......
1.以中心点坐标代替整个方块
2.以数学坐标点代表实际坐标
3.统一冲突检测方法

问题分析:
俄罗斯方块就是一个个方块从上到下的落下,固定,当一行满的时候就消去这一行,就类与对象分析设计思想,我们很容易想到,要创造两个对象,一个就是方块对象,一个这是控制对象,在这里,我们再多加上一个对象,我称它为小部件对象,至此,此游戏一共有三个对象,其描述如下
方块对象(cube):就是出现的整个方块,每一个方块由四个小方块组成,一共有7种方块,每个方块有几种状态,每个方块都有自己一些行为
控制对象(fangkuai):这个对象的名字不好起,暂且叫控制对象,它控制了方块何时的移动、下落、变形,它有自己的状态地图
小部件对象(kit):就是一个小对象,它集合了一些公告的属性、方法
现在,我们以一个6行,6列的俄罗斯方块为例
我们先建立一个坐标系,以左上角为原点,横方向为x轴,竖方向为y轴,
js版俄罗斯方块设计思想及实现_第1张图片
刚开始,方块从上面点出现,(3,0)点就代表其位置,每隔的一定的时间,在检测可以向下移动之后,则中心坐标的纵坐标加1,为(3,1),这样一直往下移,直到判断无法下移了,方块对象的的中心坐标为(x1,y1),将此坐标交给控制对象,由控制对象将自己的状态矩阵相应的四个点置为1,这时,检测消行,之后,让方块的位置坐标重新为(3,0)就行了
统一冲突检测方法:
就是不管你是左移,右移,下移,变形等,检测冲突都统一一个方法,就是假如执行了对应操作后,检测方块的坐标对应的矩阵坐标是否有1存在,有则存在冲突,无法执行此操作,特别的,对于下移,存在冲突即是到头了,因此,为了统一越界检查,边界也有坐标,并且为1
设计思想如图
js版俄罗斯方块设计思想及实现_第2张图片
方块的与控制对象的交互只是抽象出来的数学坐标的交互,不涉及实际的坐标,这样,使得理解、操作简单,扩展性强
具体设计
方块对象:
属性:
{种类,四个小块的位置坐标,中心坐标,颜色,状态}
行为:
显示:根据种类、状态、颜色属性、中心坐标等在实际位置坐标绘出方块
下移:中心坐标的纵坐标(y)加1,执行显示方法
左移:中心坐标的横坐标(x)减1,执行显示方法
右移:中心坐标的横坐标(x)加1,执行显示方法
变形:状态属性加1,执行显示方法
变色:颜色属性改变
变种类:种类属性随机取值
控制对象:
属性
{状态矩阵}
行为:
绘图:根据状态坐标,绘了实际的图形
检测消行:判断状态矩阵是否有某列全为1的情况,如果出现,则消去本列,分数加1,后列向前移动
判断左移:让方块中心坐标横坐标-1之后,检测状态矩阵,方块的四个坐标对应的矩阵坐标是否有1存在,有无法左移,否则,可以
判断右移:让方块中心坐标横坐标+1之后,检测状态矩阵,方块的四个坐标对应的矩阵坐标是否有1存在,有无法右移,否则,可以
判断下移:让方块中心坐标纵坐标+1之后,检测状态矩阵,方块的四个坐标对应的矩阵坐标是否有1存在,有无法下移,否则,可以
判断变形:让方块状态属性+1之后,检测状态矩阵,方块的四个坐标对应的矩阵坐标是否有1存在,有无法变形,否则,可以
控制左移:执行判断方法,若可以,则执行方块的左移方法
控制右移:执行判断方法,若可以,则执行方块的右移方法
控制下移:执行判断方法,若可以,则执行方块的下移方法,否则,就是到头了,将方块的坐标对应的状态矩阵坐标置1,执行绘图方法,检测消行,再执行绘图方法,接着,执行方块的变种类方法,变色方法,然后改变方块的中心坐标,从最上边重新开始出现
控制变形:执行判断方法,若可以,则执行方块的变形方法
注册事件:按up执行 控制变形,按left控制左移 ,按right 控制右移,按down控制下移
设定定时器:不同level,不同时间,每隔此时间执行一次 控制下移 方法

小部件对象:
方法:
数学坐标转实际坐标:
中心坐标得到四个坐标:
数学坐标点显示的实际块:比如(3,0),此方法会在网页中显示一个实际的块
等等
优点:
1. 只有三个对象,不会因为方块不断的产生出现很多对象,浪费空间,方块对象只有一个,重复使用
2. 扩展性强,思路清晰
缺点:
矩阵不转置就好了,这样消行的时候不是消去的矩阵的列了,而是消行,比较简单
具体实现代码:
确保有jquery.js引入



	
	俄罗斯方块By王斌_code
  
  
  


按回车键开始
游戏前,你可以设置行数,列数,级别,然后按回车开始,建议行列不要相差太大
按上下左右键
游戏中回车暂停、继续
by王斌
http://honghu91-hotmail-com.iteye.com/
得分:0分
行数 列数 级别
  • js版俄罗斯方块设计思想及实现_第3张图片
  • 大小: 93.9 KB
  • js版俄罗斯方块设计思想及实现_第4张图片
  • 大小: 4.3 KB
  • Eluosi.zip (24.1 KB)
  • 下载次数: 472
  • 查看图片附件

你可能感兴趣的:(俄罗斯方块,js版俄罗斯方块,javascript,前端)