俄罗斯方块:使用 JavaScript 构建游戏
我一直以来都很喜欢复古游戏、街机游戏和复古街机游戏,主要是因为它们的局限性往往导致了一些非常有创意的游戏机制,这些机制易于学习但难以精通。Game Maker's Toolkit的 Mark Brown制作了一个很棒的视频,介绍了许多优秀游戏中的“多功能动词”,我推荐你看看。老款游戏的多功能性较差,但由于它们主要为街机编写,而街机的输入功能通常非常有限,所以这些游戏会以各种方式利用它们仅有的几个按钮。
🎮 在本系列中,我将向您展示构建俄罗斯方块克隆的所有步骤,遵守俄罗斯方块指南,这是俄罗斯方块公司强制执行的当前规范,用于使所有新的(2001 年及以后)俄罗斯方块游戏产品在形式上相似。
🛑 《俄罗斯方块》已获得授权,这意味着如果您打算利用本系列文章构建自己的街机益智游戏,并计划将其商业化发行,请务必遵守相关法律。即使您免费提供克隆版本,也可能会收到停止令。Reddit上的这个帖子详细介绍了如何操作。此外,Ars Technica 的这篇文章以《俄罗斯方块》和所谓的克隆游戏《Mino》为例,深入探讨了法院如何评判游戏克隆作品。
📚 本系列纯粹为教育用途,非商业性质。我们仅使用粉丝社区维基百科作为资源,并使用“俄罗斯方块”这一名称来表明游戏类型,而非实际的公司、游戏或品牌。
在第一篇文章中,我们将研究游戏的领域,即游戏中存在哪些名词(宾语/主语)和动词(动作/功能)。
定义和概念
首先,在编写任何代码之前,让我们先了解一下所有游戏定义和概念。我通常在编写任何代码之前进行领域建模,因为它可能有助于进行正确的抽象。
机芯和按钮
在 1984 年发布的经典《俄罗斯方块》中,输入的数量与为 iPod 开发的版本(《俄罗斯方块 2006》)基本相同:
- 一个按钮,用于向左移动下落的四格骨牌
- 一个按钮,用于向右移动下落的四格骨牌
- 一个按钮,用于放下并锁定下落的四格骨牌
- 一个按钮来旋转四格骨牌。
标准按钮映射添加了一些:
- 一个按钮,用于放下(但不锁定)正在下落的四格骨牌
- 一个按钮,用于将四格骨牌向另一个方向旋转(即逆时针旋转与顺时针旋转)
- 一个按钮来使用保持
虽然这些动作本身看起来很简单,但与其他游戏规则结合起来,它们可以作用于广泛的词汇。
将特定动词绑定到按钮就是我们所说的映射。映射具有由俄罗斯方块指南定义的标准。
运动场
在NES 版俄罗斯方块(1989)手册中,游戏场定义如下:
游戏场:这是进行活动的地方。
它构成了方块落下并静止的网格。在大多数游戏中,它的宽度为10格,高度在16到24格之间。网格上方有20行“隐藏”区域,称为消失区。
四格骨牌
有各种形状的四格拼图:从游戏场顶部落下。它们的定义如下:
- 青色:我
- 黄色:O
- 紫色:T
- 绿色:S
- 红色:Z
- 蓝色:J
- 橙色L
他们还定义了起始位置:
- 中间:I和O
- 左中:其他一切
它们都应该水平生成,其中J、L和T首先生成平面,然后在可见的游戏场上方(消失区内)生成,但如果其路径上没有任何东西(变得可见),则丢弃一个空间。
发电机
随机生成器用于生成游戏场上出现的方块。标准实现是所谓的 7 袋随机生成器,这意味着所有七块单面俄罗斯方块都会从一个袋子中随机抽取,然后再生成另一块。
有不同的随机器。
保留区/保留件
玩家可以按下按钮将下落的俄罗斯方块发送到保留框,并且保留框中的任何俄罗斯方块都会移动到屏幕顶部并开始下落。
鬼片
如果四格拼图掉落,幽灵棋子会指示其落在哪里,这大大减少了掉落错误的次数。
旋转
四格骨牌的旋转其实并不简单。处理这个问题的系统和规范被称为超级旋转系统(SRS)。
一般来说,当没有遮挡时,四格拼图会像你想象的那样旋转,除了:围绕一个点。由于这纯粹是一个数学旋转,没有任何平移,因此J、L、S、T和Z 型 四格拼图会“漂浮”在其边界框上方。
然而,当受到阻碍时,游戏会尝试将四格骨牌“踢”到附近的其他位置。相关规则在“墙踢”部分中有详细说明。
级别
玩家通过清除线条(完全填满线条)或进行“T旋转”来升级。等级越高,掉落速度越快,分数(乘数)也越高。
得分
指南评分系统规定,某些清除线路的方式会与其他方式的得分不同。我们现在不会讨论不同的连击、b2b、旋转等等,但这些会在游戏实现过程中逐步讲解。
后续步骤Next steps
尚未编写任何代码。下一步是弄清楚:
- 有哪些模型和关注点?这将通过将上述定义和概念中的各种名词映射到编程命名空间和函数名称来实现。
- 我们应该使用什么工具链?这取决于具体需求。这意味着我们需要选择一个库/框架(如果有的话),以及输出的风格。
- 我们想要实现哪些独特的游戏元素?越少俄罗斯方块元素越好!一定要独一无二。
鏂囩珷鏉ユ簮锛�https://dev.to/sleeplessbyte/tetris-building-a-game-using-javascript-3j6f