转载于 且后续更新于此
1.前言
写这个版本的小游戏的缘由在于我想通过从零到有,自己写一个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.2V3.1:Add function of Pageviews and Leaderboard. V4.0:Add function of auto adjust UI/*****************************************************************/
JS/Jquery版本的俄罗斯方块(Tetris)V4.0作者: unionline邮箱:zplufb@163.com转载请说明来自:
/*****************************************************************/
2.游戏说明
功能:关卡,分数,暂停,虚拟键,状态栏,自定义宽高大小,还有金手指。
在线试玩地址:
游戏界面如下:
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的响应事件
InitAllCubeSta tusArr:初始化二维矩阵
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,可以暂停游戏
Pageviews and Leaderboard的源码,请到在线游戏处查看
5.源码(V3版本)
1 2 3 4 5Unionline's JS Tetris V3 6 7 62 1007 1008 1009 1010 1011Welcome to my game exercise - Tetris
1012101310141015101610171018101910201034 1035102110221023102410251026 102710281029 103110321033
6.总结
我敲代码,可以认认真真地敲到凌晨1点,这个是我之前没预期到的。
开发时,要用版本工具来控制,我使用TortoiseSVN。
最后,如果你有疑问,请在评论区提问,谢谢!