JS/Jquery版本的俄罗斯方块(Tetris)

1.前言

写这个Jquery版本的小游戏的缘由在于我想通过从零到有，自己写一个Jquery版本的游戏用来练手，没参考过其他人代码，这样子才不会影响自己的思路。

经历了V1，V2版本，当前版本是V3，版本说明如下：

V1: Use two methods of left and right conflict check, bottom conflict check.
V2: Use U style conflict check for left and right and bottom.
V2.1: add keyDownRaip when press v_down key.
V2.0.2:add Debug Zone for test and theft operation based V2.
V3:UI adjust for lj.w based V2.0.2

/*****************************************************************/

JS/Jquery版本的俄罗斯方块（Tetris）V3

作者: unionline

邮箱：zplufb@163.com

转载请说明来自: http://blog.csdn.net/unionline

/*****************************************************************/

2.游戏说明

功能：关卡，分数，暂停，虚拟键，状态栏，自定义宽高大小，还有金手指。

在线试玩地址：空缺

后续更新的文章link: http://www.cnblogs.com/fanbi/p/6573580.html

游戏界面如下：

3.难点及开发时遇到的问题汇总

1.碰撞检测和模型设计

答：在V1版本由于设计模型不合理导致碰撞检测不完美，而且得付出更多代价，后面改成了U模型。

2.当cube下降到底部，该给予短时间移动方块（符合游戏玩法）

答：给setTimeout，并延迟刷新二维数据

3.方块旋转

答：详情请见KeyHanderUp方法

4.触发下一个cube

答：之前用定时器刷新，后来改为当碰到下边界，触发Next();

5.下降碰到边界向左或向右移动，此时该cube下面为可降落

答：详情请见KeyHanderDown方法

6. to be continued ...

4.源码分析

方法功能说明：

InitUI(): 初始化界面，绘制出UI

InitData():初始化所有参数

InitVK():初始化并绑定button的响应事件

InitAllCubeStatusArr:初始化二维矩阵

printAllCubeStatusArr:打印二维矩阵，在console打印

UpdateAllCubeStatusArr:更新二维矩阵

RefreshDrawUI:重绘左侧主区UI

CheckRemoveRowInline:判定是否为可以删除行

RemoveRowInline:删除指定行

UpdateScore:更新分数

UpdateLevel:更新关卡

CheckGameOver:判定是否Game Over

TextSatutsTimeOut:右下角状态栏显示秒数和内容

Int:取整操作

CheckNextStatusIsBoundary:判定是否到达边界

CubeInBlock:碰撞检测的核心代码

Types:俄罗斯方块的7中类型

KeyHanderUp/KeyHanderDown/KeyHanderLeft/KeyHanderRight:上下左右操作

UpdatePosNextStatus:更新下一个位置的状态位，为边界判定服务。

showCurTypeInMainBoard:显示当前的方块

GetRandType:获取随机数，从而获得下一个候选区的方块

ShowCandidateType:显示候选区方块

DrawMainUI:绘制左侧主区UI

DrawCandidateZoneUI:绘制候选区主区UI

DrawOperationZoneUI:绘制操作区UI

Start:获取候选区方块

Next:下一个方块降落

Play:点击play按钮触发，点击后变成pause，可以暂停游戏。

5.源码

Unionline's JS Tetris V3

Welcome to my game exercise - Tetris

 

6. 总结

我敲代码，可以认认真真地敲到凌晨1点，这个是我之前没预期到的。

开发时，要用版本工具来控制，我使用TortoiseSVN。

最后，如果你有疑问，请在评论区提问，谢谢！