JS/Jquery版本的俄罗斯方块(附源码分析)
发布日期:2022-03-11 15:03:36 浏览次数:10 分类:技术文章

本文共 2610 字,大约阅读时间需要 8 分钟。

转载于 且后续更新于此

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.2
V3.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 
5 Unionline's JS Tetris V3 6 7 62 1007 1008 1009 1010 1011

Welcome to my game exercise - Tetris

1012
1013
1014
1015
1016
1017
1018
1019
1034 1035
View Code

6.总结

我敲代码,可以认认真真地敲到凌晨1点,这个是我之前没预期到的。
开发时,要用版本工具来控制,我使用TortoiseSVN。
最后,如果你有疑问,请在评论区提问,谢谢!

 

转载于:https://www.cnblogs.com/fanbi/p/6573580.html

转载地址:https://blog.csdn.net/weixin_30267785/article/details/99167776 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:div的onclick事件怎么失效了?
下一篇:(C#基础)反射理解

发表评论

最新留言

网站不错 人气很旺了 加油
[***.192.178.218]2024年03月13日 19时19分51秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

mysql concat 整数型_MySQL 数字类型转换函数(concat/cast) 2019-04-21
mysql单元格函数是_MySQL常用内置函数 2019-04-21
mysql 怎么字段分裂_你可以分裂/爆炸MySQL查询中的字段吗? 2019-04-21
mysql server卸载出错_Mysql卸载问题Start Server卡住报错解决方法 2019-04-21
全国省市区 mysql_2017全国省市区数据库【含三款数据库】 2019-04-21
druid加载MySQL驱动原理_你好,想知道mybatis+druid+jdbc 原理介绍? 2019-04-21
mysql 怎样链接jdbc_jdbc怎么链接mysql数据库 2019-04-21
mysql学生课程表试题_Mysql练习之 学生表、课程表 、教师表、成绩表 50道练习题... 2019-04-21
java exec封装_Java 执行系统命令工具类(commons-exec) 2019-04-21
php sha512解密,PHP加密函数 sha256 sha512 sha256_file() sha512_file() 2019-04-21
python-docx tables后追加内容_Mac brew安装MySQL8.0.21后忘记密码(重置密码篇) 2019-04-21
python中两个时间相减结果转为小时_Python起步(二)基础数据类型1 2019-04-21
定义泛化。举个例子_网易考拉应用的dubbo泛化调用,是如何实现的? 2019-04-21
mysql里可以用cube吗_sql server的cube操作符使用详解_mysql 2019-04-21
php mysql 图书_使用PHP+MySQL来对图书管理系统进行构建 2019-04-21
单片机c语言 int1,51单片机into、int1中断计数c语言源程序.doc 2019-04-21
c语言课程设计工资管理建库,C语言课程设计工资管理系统参考.doc 2019-04-21
c语言case中途跳出,break语句在switch结构语句中的作用是终止某个case,并跳出switch结构语句。... 2019-04-21
c51写c语言外部ram头文件,C51中访问外部RAM的方法 2019-04-21
51c语言产生随机证书,基于51单片机的随机数产生器设计-LCD1602-KEY-(电路图+程序源码)... 2019-04-21