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。

最后,如果你有疑问,请在评论区提问,谢谢!

阅读更多
换一批

没有更多推荐了,返回首页