当前位置: 首页 > news >正文

手撸俄罗斯方块(一)——简单介绍

手撸俄罗斯方块

简单介绍

《俄罗斯方块》(俄语:Тетрис,英语:Tetris),是1980年末期至1990年代初期风靡全世界的电脑游戏,是落下型益智游戏的始祖,电子游戏领域的代表作之一,为苏联首个在美国发布的娱乐软件。此游戏最初由阿列克谢·帕基特诺夫在苏联设计和编写,于1984年6月6日首次发布,当时他正在苏联科学院电算中心工作。此游戏的名称是由希腊语数字“四”的前缀“tetra-”(因所有落下方块皆由四块组成)和帕基特诺夫最喜欢的运动网球(“tennis”)拼接而成,华语地区则因游戏为俄罗斯人发明普遍称为“俄罗斯方块”。

数字“四”,显而易见,最初的图形都是由4个小方块组成的,这也是俄罗斯方块的一个特点。游戏的目标是通过控制不同形状的方块,使它们在一个矩形的游戏区域中排列成完整的一行或多行,然后这些完整的行就会消除,给玩家得分。

游戏规则

  • 游戏开始时,游戏区域是一个空白的矩形,玩家通过控制方块的移动和旋转,使它们在游戏区域中排列成完整的一行或多行;
  • 当一行或多行被完整填满时,这些行就会消除,给玩家得分;
  • 当方块堆积到游戏区域的顶部时,游戏结束。

游戏特点

  • 游戏简单易上手,但是难度逐渐增加;
  • 游戏的速度会随着游戏的进行而逐渐加快;
  • 游戏的随机性较大,玩家需要根据当前的情况,灵活地调整方块的位置和旋转。

形状

俄罗斯方块中的方块有7种不同的形状,分别是:

  • I型:一字型;
  • J型:J型;
  • L型:L型。
  • O型:方块型;
  • S型:S型;
  • T型:T型;
  • Z型:Z型;

这些形状是由4个小方块组成的,每个小方块都可以旋转,但是旋转的中心不同。如下图:

在这里插入图片描述
各种四格骨牌由左至右,上至下的英文字母代号:I、J、L、O、S、T、Z

操作

玩家通过键盘控制方块的移动和旋转,具体操作如下:

  • :向左移动方块;
  • :向右移动方块;
  • :旋转方块;
  • :加速下落。

得分

  • 消除一行:得100分;
  • 消除两行:得300分;
  • 消除三行:得700分;
  • 消除四行:得1500分。

游戏结束

  • 当方块堆积到游戏区域的顶部时,游戏结束;
  • 游戏结束后,显示游戏结束的提示,并显示玩家的得分。

从开发角度看俄罗斯方块

坐标系

对于所有二维游戏来说,坐标系是一个非常重要的概念。在俄罗斯方块中,我们可以使用一个二维数组来表示游戏区域,数组的每一个元素表示一个方块,数组的索引表示方块的坐标。如下图:

在这里插入图片描述

图中区域表示正数的范围。但是实际情况下,我们可以使用一个二维数组来表示游戏区域。而且计算机在绘画过程中也是自上而下自左而右进行的,因此我们需要将坐标进行变换。如下图:

在这里插入图片描述

x轴表示列,y轴表示行。这样我们就可以通过一个二维数组来表示游戏区域。

对于执行的一个元素,我们可以通过二维数组快速定位到它。

const points = [[]]; // 二维数组
const x = 1; // 列
const y = 2; // 行
const point = points[y][x]; // 获取坐标为(1, 2)的元素

需要注意的是,数组的索引是从0开始的,因此在实际过程中我们将y = 0看成第一行,x = 0看成第一列。

方块的表示

按照上述坐标体系的定义,我们可以表示任何一个方块,如当表示I型方块时,我们可以定义一个数组来表示它的形状:

const IHorizonal = [[0, 1, 2, 3]
]
const IVertical = [[0],[1],[2],[3]
]

如下图:
在这里插入图片描述

这样我们就可以通过一个数组来表示一个方块的形状。通过类似的方法,我们可以表示其他的6个方块。但是,I方块有两种形态,我们到底使用哪一种作为初始形态呢?

这里面需要做一个约定,我们定义每个方块的初始化形态。定义如下:

  • I型:
// 口口口口
  • J型:
// 口
// 口口口
  • L型:
//    口
// 口口口
  • O型:
// 口口
// 口口
  • S型:
//   口口
// 口口
  • T型:
//   口
// 口口口
  • Z型:
// 口口
//   口口

方块的移动

在游戏过程中,方块是可以移动的。分别可以向左移动、向右移动、向下移动。同时移动必须满足如下条件:

  1. 移动后的方块不能超出游戏区域;即不能超出游戏区域的左边界、右边界和底边界;翻译成程序语言为:
// 向左移动
if (x - 1 >= 0) {x -= 1;
}
// 向右移动
if (x + 1 < width) {x += 1;
}
// 向下移动
if (y + 1 < height) {y += 1;
}
  1. 移动后的方块不能与其他方块重叠;即不能与其他方块的坐标重叠;翻译成程序语言为:
// 向左移动
if (x - 1 >= 0 && !isOverlap(x - 1, y)) {x -= 1;
}
// 向右移动
if (x + 1 < width && !isOverlap(x + 1, y)) {x += 1;
}
// 向下移动
if (y + 1 < height && !isOverlap(x, y + 1)) {y += 1;
}

上面是描述某个点的情况,实际上判断方块情况,需要所有的点都满足条件。

方块的转换

在游戏过程中,方块是可以旋转的。如下图:

在这里插入图片描述

同样的,在旋转过程中,也必须满足如下条件:

  1. 旋转后的方块不能超出游戏区域;即不能超出游戏区域的左边界、右边界和底边界;

  2. 旋转后的方块不能与其他方块重叠;即不能与其他方块的坐标重叠。

使用程序语言表述如下:

// 旋转
const isValid = (newShape) => {for (let y = 0; y < newShape.length; y++) {for (let x = 0; x < newShape[y].length; x++) {if (newShape[y][x] && (x < 0 || x >= width || y >= height || isOverlap(x, y))) {return false;}}}return true;
}
const newShape = rotate(shape);
if (isValid(newShape)) {shape = newShape;
}

接下来问题来,如何实现rotate函数呢?这里面就涉及到了方块的旋转。对于不同的方块,旋转的方式是不同的。

如I型方块,其旋转形态只有两种,分别是横向和纵向。

// I型方块
// 横向
// 口口口口
// 纵向
// 口
// 口
// 口
// 口

但是对于T型等其他方块,其旋转形态是四种的。

// T型方块
// 1
//  口
// 口口口
// 2
// 口
// 口口
// 口
// 3
// 口口口
//  口
// 4
//  口
// 口口
//  口

我们当然可以通过枚举的方式将所有的旋转形态都列出来,但是这样的方式是不可取的。因为这样的方式会使得代码变得复杂,而且不易维护。因此我们需要找到一种更好的方式来实现方块的旋转。

实际上,我们可以通过观察发现,方块的旋转是围绕一个中心点进行的。且旋转方向和角度是固定的。

因此我们可以得出如下结论:

  1. 方块的旋转是围绕一个中心点进行的;选择的中心点是不动的。

  2. 方块的旋转方向和角度是固定,我们可以选取逆时针旋转,相对我们定义的坐标系统旋转角度为 π / 2。 故根据旋转公式,新坐标定义如下:

  const newX = Math.cos(Math.PI / 2) * (x - centerX) - Math.sin(Math.PI / 2) * (y - centerY) + centerX;const newY = Math.cos(Math.PI / 2) * (y - centerY) + Math.sin(Math.PI / 2) * (x - centerX) + centerY;

  const newX = -y + centerY + centerX;const newY =  x - centerX +  centerY;

此处不太了解的可以去看看坐标旋转。

小结

上面我们讨论了俄罗斯方块的基本介绍,从开发的角度来看,我们讨论了坐标系、方块的表示、方块的移动和方块的旋转。那么我们可以通过如下两个实体在表示方块的基本情况。

  1. Point,坐标点
interface PointAttr {color?: string; // 颜色isReadyToClean?: boolean; // 是否准备消除[key: string]: any; // 其他属性
}class Point {private x: number;private y: number;private attr: PointAttr;constructor(x, y, attr?: PointAttr) {this.x = x;this.y = y;this.attr = attr || {};}
}

每个坐标点均包含了x、y坐标,以及其他属性,如颜色等;

  1. Block,方块

我们通过Block来抽象方块,定义如下:

class Block {private points: Point[];private rotateIndex: number; /// 旋转因子constructor(points: Point[]) {this.points = points;}abstract getCenterIndex(): number; // 获取中心点abstract getRotateArray(); number[]; // 获取旋转数组
}

其他的方块均继承自Block,实现getCenterIndexgetRotateArray方法。

如IBlcok,其实现如下:

class IBlock extends Block {getCenterIndex() {return 1;}getRotateArray() {return [Math.PI / 2, // 第一次旋转相对于初始位置的角度-Math.PI / 2 // 第二次旋转相对于第一次旋转的角度]}
}

通过继承的关系,分别实现LBlockJBlockOBlockTBlockSBlockZBlock

本章内容暂时就到这里,后续章节我们将继续讨论如何实现俄罗斯方块的游戏逻辑。

详细内容可以关注我的github账号: https://github.com/shushanfx/tetris

接下来我将从如下几个方面来阐述:

  • 手撸俄罗斯方块——游戏设计
  • 手撸俄罗斯方块——游戏核心模块设计
  • 手撸俄罗斯方块——渲染与交互
  • 手撸俄罗斯方块——游戏主题

相关文章:

  • 解决Invalid or unsupported by client SCRAM mechanisms(dbeaver)
  • Golang 基于 archive/zip 包实现文件
  • ontape备份异机还原的样例
  • c++ primer plus 第15章友,异常和其他 15.3.11 有关异常的注意事项
  • SpringBoot新手快速入门系列教程:前述
  • 好看!欢乐!学习快!快来探索《米小圈动画成语》的魅力!
  • Hadoop3:NameNode和DataNode多目录配置(扩充磁盘的技术支持)
  • Android Studio gradle下载失败?!
  • 可视化作品集(11):节能环保能耗领域大展拳脚。
  • 相同含义但不同类型字段作为join条件时注意事项
  • 释放序列和同步
  • 数据库高级操作:分类汇总与排序
  • 心电信号降噪前处理(MATLAB R2018)
  • swift开发用Alamofire的post发送proto序列化消息
  • LLM 研究方向(一): LLM Prompts--p-tuning、LoRA
  • Codepen 每日精选(2018-3-25)
  • iOS 颜色设置看我就够了
  • isset在php5.6-和php7.0+的一些差异
  • Iterator 和 for...of 循环
  • JavaScript 奇技淫巧
  • Java知识点总结(JavaIO-打印流)
  • MySQL QA
  • Yeoman_Bower_Grunt
  • 表单中readonly的input等标签,禁止光标进入(focus)的几种方式
  • 手写双向链表LinkedList的几个常用功能
  • 数据结构java版之冒泡排序及优化
  • 要让cordova项目适配iphoneX + ios11.4,总共要几步?三步
  • 原生 js 实现移动端 Touch 滑动反弹
  • 3月27日云栖精选夜读 | 从 “城市大脑”实践,瞭望未来城市源起 ...
  • Mac 上flink的安装与启动
  • Nginx惊现漏洞 百万网站面临“拖库”风险
  • 湖北分布式智能数据采集方法有哪些?
  • # 睡眠3秒_床上这样睡觉的人,睡眠质量多半不好
  • #define用法
  • $nextTick的使用场景介绍
  • $分析了六十多年间100万字的政府工作报告,我看到了这样的变迁
  • (1综述)从零开始的嵌入式图像图像处理(PI+QT+OpenCV)实战演练
  • (9)STL算法之逆转旋转
  • (java)关于Thread的挂起和恢复
  • (pojstep1.1.2)2654(直叙式模拟)
  • (附源码)springboot教学评价 毕业设计 641310
  • *_zh_CN.properties 国际化资源文件 struts 防乱码等
  • .mkp勒索病毒解密方法|勒索病毒解决|勒索病毒恢复|数据库修复
  • .NET 6 Mysql Canal (CDC 增量同步,捕获变更数据) 案例版
  • .NET C# 使用GDAL读取FileGDB要素类
  • .NET Entity FrameWork 总结 ,在项目中用处个人感觉不大。适合初级用用,不涉及到与数据库通信。
  • .net访问oracle数据库性能问题
  • .NET开源项目介绍及资源推荐:数据持久层
  • @Autowired注解的实现原理
  • @PreAuthorize与@Secured注解的区别是什么?
  • [Angularjs]asp.net mvc+angularjs+web api单页应用之CRUD操作
  • [AutoSar]BSW_Memory_Stack_003 NVM与APP的显式和隐式同步
  • [Big Data - Kafka] kafka学习笔记:知识点整理
  • [C#]winform部署yolov9的onnx模型
  • [C#]科学计数法(scientific notation)显示为正常数字