js版俄罗斯方块设计思维及实现
日期：2014-05-16 浏览次数：20366 次
js版俄罗斯方块设计思想及实现
俄罗斯方块方块是小时候的一个回忆，从最开始的掌上的黑白游戏机，到电视游戏机，到电脑，无不有它的痕迹，今天我们来一起重温它的一种实现方法，也算是整理一下我的思路吧......
1.以中心点坐标代替整个方块
2.以数学坐标点代表实际坐标
3.统一冲突检测方法
问题分析：
俄罗斯方块就是一个个方块从上到下的落下，固定，当一行满的时候就消去这一行，就类与对象分析设计思想，我们很容易想到，要创造两个对象，一个就是方块对象，一个这是控制对象，在这里，我们再多加上一个对象，我称它为小部件对象，至此，此游戏一共有三个对象，其描述如下
方块对象（cube):就是出现的整个方块，每一个方块由四个小方块组成，一共有7种方块，每个方块有几种状态，每个方块都有自己一些行为
控制对象（fangkuai):这个对象的名字不好起，暂且叫控制对象，它控制了方块何时的移动、下落、变形，它有自己的状态地图
小部件对象（kit）：就是一个小对象，它集合了一些公告的属性、方法
现在，我们以一个6行，6列的俄罗斯方块为例
我们先建立一个坐标系，以左上角为原点，横方向为x轴，竖方向为y轴,
刚开始，方块从上面点出现，（3,0)点就代表其位置，每隔的一定的时间，在检测可以向下移动之后，则中心坐标的纵坐标加1，为（3，1），这样一直往下移，直到判断无法下移了，方块对象的的中心坐标为(x1,y1)，将此坐标交给控制对象，由控制对象将自己的状态矩阵相应的四个点置为1，这时，检测消行，之后，让方块的位置坐标重新为（3，0）就行了
统一冲突检测方法：
就是不管你是左移，右移，下移，变形等，检测冲突都统一一个方法，就是假如执行了对应操作后，检测方块的坐标对应的矩阵坐标是否有1存在，有则存在冲突，无法执行此操作，特别的，对于下移，存在冲突即是到头了，因此，为了统一越界检查，边界也有坐标，并且为1
设计思想如图
方块的与控制对象的交互只是抽象出来的数学坐标的交互，不涉及实际的坐标，这样，使得理解、操作简单，扩展性强
具体设计
方块对象：
属性：
{种类，四个小块的位置坐标，中心坐标，颜色，状态}
行为：
显示：根据种类、状态、颜色属性、中心坐标等在实际位置坐标绘出方块
下移：中心坐标的纵坐标(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引入
俄罗斯方块方块是小时候的一个回忆，从最开始的掌上的黑白游戏机，到电视游戏机，到电脑，无不有它的痕迹，今天我们来一起重温它的一种实现方法，也算是整理一下我的思路吧......
1.以中心点坐标代替整个方块
2.以数学坐标点代表实际坐标
3.统一冲突检测方法
问题分析：
俄罗斯方块就是一个个方块从上到下的落下，固定，当一行满的时候就消去这一行，就类与对象分析设计思想，我们很容易想到，要创造两个对象，一个就是方块对象，一个这是控制对象，在这里，我们再多加上一个对象，我称它为小部件对象，至此，此游戏一共有三个对象，其描述如下
方块对象（cube):就是出现的整个方块，每一个方块由四个小方块组成，一共有7种方块，每个方块有几种状态，每个方块都有自己一些行为
控制对象（fangkuai):这个对象的名字不好起，暂且叫控制对象，它控制了方块何时的移动、下落、变形，它有自己的状态地图
小部件对象（kit）：就是一个小对象，它集合了一些公告的属性、方法
现在，我们以一个6行，6列的俄罗斯方块为例
我们先建立一个坐标系，以左上角为原点，横方向为x轴，竖方向为y轴,
刚开始，方块从上面点出现，（3,0)点就代表其位置，每隔的一定的时间，在检测可以向下移动之后，则中心坐标的纵坐标加1，为（3，1），这样一直往下移，直到判断无法下移了，方块对象的的中心坐标为(x1,y1)，将此坐标交给控制对象，由控制对象将自己的状态矩阵相应的四个点置为1，这时，检测消行，之后，让方块的位置坐标重新为（3，0）就行了
统一冲突检测方法：
就是不管你是左移，右移，下移，变形等，检测冲突都统一一个方法，就是假如执行了对应操作后，检测方块的坐标对应的矩阵坐标是否有1存在，有则存在冲突，无法执行此操作，特别的，对于下移，存在冲突即是到头了，因此，为了统一越界检查，边界也有坐标，并且为1
设计思想如图
方块的与控制对象的交互只是抽象出来的数学坐标的交互，不涉及实际的坐标，这样，使得理解、操作简单，扩展性强
具体设计
方块对象：
属性：
{种类，四个小块的位置坐标，中心坐标，颜色，状态}
行为：
显示：根据种类、状态、颜色属性、中心坐标等在实际位置坐标绘出方块
下移：中心坐标的纵坐标(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引入
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>俄罗斯方块By王斌_code</title>
<script language='javascript' src='jquery.js'></script>
<script language='javascript'>
/*
**@author:王斌
**欢迎交流web技术
**http://honghu91-hotmail-com.iteye.com/
**/
$(document).ready(function(){
var WIDTH = 500;
var HEIGHT = 500;
var ROWS;
var COLS;
var level;//级别
var h;//计时器
var everyTime;//级别对应的时间
var state = 0;
var colors = ["d0d85d","37bcaf","fac0eb","faecd0","8eeae1","f981a3","83f8a2"];
var everyH;//每块的高度
var everyW;//每块宽度
var kit = {};//小部件函数对象
var cube = {};//方块对象
cube.color = "";//当前颜色
kit.realX = 0;//实际坐标x
kit.realY = 0;//实际坐标y
kit.dotToReal = function(x,y){//实现坐标转换，将数学坐标转换为实际的坐标
this.realX = x * everyW;
this.realY = y * everyH;
}
kit.show = function(x,y,i,is_next){//is_next标识是否是预测块显示
this.dotToReal(x,y);
if(i == 0){
if(is_next == 1) $(".next").remove();
else $(".wrapper .curr").remove();
}
if(is_next == 1) $(".wrapper").append("<div class='next' style='width:"+everyW+"px;height:"+everyH+"px;position:absolute;top:"+this.realY+"px;left:"+this.realX+"px;'></div>");
else $(".wrapper").append("<div class='curr' style='background:"+cube.color+";width:"+everyW+"px;height:"+everyH+"px;position:absolute;top:"+this.realY+"px;left:"+this.realX+"px;'></div>");
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
