俄罗斯方块设计思路html,HTML5游戏实战之俄罗斯方块

"heng", "shu"

来标识。 这个标识字符 需要在构造Shape对象时传入给构造函数。 像下面这样。

var heng = new Shape("hang", 20, 20);

这样我们就创造一个横条的图形， 在坐标20, 20的位置上，举一反三，其它的图形也都这么创造出来。 不同点在于，

每个图形内部的四个小方块的初始化坐标位置是不同的。因为形状不同嘛，

就是我上面代码中所有用数字1临时写的坐标，，这些坐标每个图形都不同。 真正的代码应该类似这样：

if (this.tp == "heng")

{

this.square_1 = new Square(2, 2);

this.square_2 = new Square(12, 2);

this.square_3 = new Square(22, 2);

this.square_4 = new Square(32, 2);

}

if (this.tp == "shu")

{

this.square_1 = new Square(2, 2);

this.square_2 = new Square(2, 12);

this.square_3 = new Square(2, 22);

this.square_4 = new Square(2, 32);

}

因为每一个Shape都有自己的x,y属性， 每一个Square也有自己的x,y属性， 又因为square是组成shape的最小单位，

那么如果移动了shape图形，里面的4个方块也要相应的做调整， 这就是在移动坐标点时需要注意的。

另一个关键的设计就是，我们还需要一个缓存容器， 来保存摆放好的小方块， 比如一个横条落下来后， 它这个Shape对象的功能就不存在了，

因为不需要对它移动了。 而真正有用处的还是它里面的四个小方格， 我们需要把每一个掉落后的图形的小方格都保存在一个容器内。 因为我们要对

这些小方格做遍历，查找同一个水平面上的是否满格， 如果满了， 我们要从这个容器内 删除这行的方格，

并且让它上面的所有方格下落一行。容器就用Javascript的数组就行

var square_cache = new Array();

似乎我们讲到这里， 聪明的你大概能设想到整体的游戏逻辑是什么样的。

下面就是一个分步骤的逻辑描述。

1, 随机生成一种图形

2, 按固定速度自动下移

3, 下移过程中，允许用户左右移动图形，旋转图形。

这些动作需要对周围做碰撞检测。 4, 图形下落到下部边际时， 这个图形的生命周期就结束了，

它内部的小方格被放入一个容器内。 5, 检测容器内所有小方格在某一行是否同时存在， 表示满行， 如果有满行，

就删除掉这行所有小方格。 6, 再次遍历方格容器，把刚才删除的所有行之上的小格整体下移。

7, 重复步骤1

好，就写到这里， 完整的代码在游戏的网页中可以找到， 里面的名称可能跟我讲的有些不同，但是代码很简单，很容易理解。

希望初学者能有一个全新的认识，写个小游戏原来还是很简单的事情。 我用了3天的时间写完所有代码， 当然还有很多BUG。

老鸟们就多给我提提意见， 同时我讲得不对，不细的，大家继续补充。

HTML5的诞生，尤其是canvas的功能，在未来的小游戏领域绝对会火一把。

FLASH前景堪忧。。。呵呵。

尤其是现在基于webkit浏览器内核的移动设备上，HTML5更能够大展才艺。

下面是这个游戏，欢迎大家试玩！

http://www.sj11.net/games/eluosi/index.html