手撸俄罗斯方块（一）——简单介绍

手撸俄罗斯方块

简单介绍

《俄罗斯方块》（俄语：Тетрис，英语：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，实现getCenterIndex和getRotateArray方法。

如IBlcok，其实现如下：

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

通过继承的关系，分别实现LBlock、JBlock、OBlock、TBlock、SBlock、ZBlock。

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

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

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

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/44333.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【代码随想录】【算法训练营】【第64天】 [卡码117]软件构建 [卡码47]参加科学大会

【代码随想录】【算法训练营】【第64天】 [卡码117]软件构建 [卡码47]参加科学大会

前言 思路及算法思维&#xff0c;指路 代码随想录。 题目来自 卡码网。 day 64&#xff0c;周三&#xff0c;继续ding~ 题目详情 [卡码117] 软件构建 题目描述 卡码117 软件构建 解题思路 前提&#xff1a; 思路&#xff1a; 重点&#xff1a; 代码实现 C语言 [卡码…
阅读更多...
算法的复杂度

算法的复杂度

文章目录 一、算法的效率1、复杂度的概念2、复杂度的重要性 二、时间复杂度三、空间复杂度四、大O的渐进表示发五、计算复杂度案例1、计算Func1函数的复杂度2、计算Fun2的时间复杂度3、计算Func3的时间复杂度4、计算Func4的时间复杂度5、计算strchr的时间复杂度6、计算Func5的时…
阅读更多...
MySQL空间索引

MySQL空间索引

空间类型是建立在空间类型字段上的。 空间类型 MySQL的空间类型很多&#xff0c;我就不逐一介绍了。重要分四大类&#xff1a; GeometryCurveSurfaceGeometryCollection 前三种&#xff0c;地理、曲线、曲面都是不可实例化的。Geometry有一个子类Point, Curve有一个直接子类L…
阅读更多...
电脑误删除的文件怎么恢复免费 电脑误删文件导致无法开机怎么办

电脑误删除的文件怎么恢复免费 电脑误删文件导致无法开机怎么办

在使用电脑的时候&#xff0c;有时候可能会因为一些错误的操作&#xff0c;导致删除一些文件&#xff0c;如果是普通的文件&#xff0c;最坏的情况也就是文件找回来&#xff0c;如果删除的是系统文件&#xff0c;那么很有可能导致电脑开不了机。下面就给大家详细讲解&#xff0…
阅读更多...
什么牌子充电宝好用？推荐四款质量与性价比双优充电宝！

什么牌子充电宝好用？推荐四款质量与性价比双优充电宝！

在如今高度数字化的生活中&#xff0c;充电宝已经成为我们日常生活中必不可少的电子设备。然而&#xff0c;随着市场上充电宝品牌的不断增多&#xff0c;人们对充电宝的质量和安全性也越来越关注。充电宝作为一个涉及电池和充电技术的产品&#xff0c;安全性至关重要。选择一款…
阅读更多...
防火墙安全策略用户认证综合实验

防火墙安全策略用户认证综合实验

生产区不允许访问互联网&#xff0c;办公区和游客区允许访问互联网 办公区设备10.0.2.10不允许访问DMz区的FTP服务器和HTTP服务器&#xff0c;仅能ping通10.0.3.10 办公区分为市场部和研发部&#xff0c;研发部Ip地址固定&#xff0c;访问dmz区使用匿名认证&#xff0c;市场部需…
阅读更多...
王道计算机数据结构+插入排序、冒泡排序、希尔排序、快速排序、简单选择排序

王道计算机数据结构+插入排序、冒泡排序、希尔排序、快速排序、简单选择排序

本内容是基于王道计算机数据结构的插入排序、冒泡排序、希尔排序、快速排序、简单选择排序整理。 文章目录 插入排序算法性能代码 冒泡排序算法性能代码 希尔排序算法性能代码 快速排序算法性能代码 简单选择排序算法性能代码 插入排序 算法 算法思想&#xff1a;每次将一个…
阅读更多...
16. Revit API: Family、FamilySymbol、FamilyInstance

16. Revit API: Family、FamilySymbol、FamilyInstance

前言 前面写着一直絮絮叨叨&#xff0c;感觉不好。想找些表情包来&#xff0c;写得好玩点&#xff0c;但找不到合适的&#xff0c;或者说耗时费力又不满意&#xff0c;而自个儿又做不来表情包&#xff0c;就算了。 其次呢&#xff0c;之前会把部分类成员给抄表列出来&#xf…
阅读更多...
如何使用Vger对已经过身份验证的Jupyter实例进行安全检测

如何使用Vger对已经过身份验证的Jupyter实例进行安全检测

关于Vger Vger是一款功能强大的交互式命令行应用程序&#xff0c;广大研究人员可以利用Vger与已经过身验证的Jupyter实例进行交互&#xff0c;并对其执行人工智能或机器学习方面的安全检测操作。 使用场景 1、作为红队研究人员&#xff0c;当我们寻找到了Jupyter凭证之后&…
阅读更多...
前端工程化（01）：10款自动化构建工具初识。

前端工程化（01）：10款自动化构建工具初识。

前端工程化自动化构建工具是用于简化前端开发流程、提高开发效率和优化项目质量的工具。市面上的工具多种多样&#xff0c;贝格前端工场先介绍一下什么是前端工程化&#xff0c;为什么要前端工程化&#xff0c;以及常用工具&#xff0c;后面会对各种工具逐一介绍。 一、什么是…
阅读更多...
《米小圈漫画历史》：历史启蒙，看漫画书就可以啦！

《米小圈漫画历史》：历史启蒙，看漫画书就可以啦！

在当今信息爆炸的时代&#xff0c;如何让孩子在娱乐中学习&#xff0c;一直是许多家长关心的问题。《米小圈漫画历史》系列作为一部集合了趣味性和教育性的漫画书&#xff0c;以其独特的视角和精彩的故事情节&#xff0c;成为了许多家庭历史启蒙的首选。本文将通过探索漫画书的…
阅读更多...
anaconda修改安装的默认环境

anaconda修改安装的默认环境

&#x1f4da;博客主页&#xff1a;knighthood2001 ✨公众号&#xff1a;认知up吧 &#xff08;目前正在带领大家一起提升认知&#xff0c;感兴趣可以来围观一下&#xff09; &#x1f383;知识星球&#xff1a;【认知up吧|成长|副业】介绍 ❤️如遇文章付费&#xff0c;可先看…
阅读更多...
从零开始学习嵌入式----Linux系统中shell脚本

从零开始学习嵌入式----Linux系统中shell脚本

目录 Shell脚本入门&#xff1a;玩转功能语句和数组&#xff0c;提升你的效率&#xff01; 一、功能语句&#xff1a;让你的脚本更灵活 1. 条件语句&#xff1a;if、else、elif 2. 循环语句&#xff1a;for、while 二、数组&#xff1a;处理多项数据的好帮手 1. 声明数组…
阅读更多...
Linux基础指令解析+项目部署环境

Linux基础指令解析+项目部署环境

文章目录 前言基础指令部署项目环境总结 前言 Linux的魅力在于其强大的可定制性和灵活性&#xff0c;这使得它成为了众多开发者和运维人员的首选工具。然而&#xff0c;Linux的指令系统庞大而复杂&#xff0c;初学者往往容易迷失其中。因此&#xff0c;本文将带领大家走进Linu…
阅读更多...
C++的介绍与认识

C++的介绍与认识

目录 前言 1.什么是C 2.C的发展历史 3.C参考文档 4.C重要性 4.1C特点 4.2编程语言排行榜 4.3 C的应用领域 5.C学习指南 1. 基础知识 2. 面向对象编程&#xff08;OOP&#xff09; 3. 泛型编程 4. 标准库&#xff08;STL&#xff09; 结束语 前言 学习了C语言的知识…
阅读更多...
亚马逊云科技EC2简明教程

亚马逊云科技EC2简明教程

&#x1f4a1; 完全适用于新手操作的Amazon EC2引导教程 简述 在亚马逊云科技中&#xff0c;存在多种计算服务&#xff0c;在此&#xff0c;我们将会着重讨论Amazon EC2(以下简称EC2)&#xff0c;EC2作为亚马逊云科技的明星产品、核心产品&#xff0c;是大多数开发者和企业用…
阅读更多...
高考后暑假新选择：从AI聊天机器人开发入门IT领域

高考后暑假新选择：从AI聊天机器人开发入门IT领域

你好&#xff0c;我是三桥君 七月来临&#xff0c;各省高考分数已揭榜完成。而高考的完结并不意味着学习的结束&#xff0c;而是新旅程的开始。对于有志于踏入IT领域的高考少年们&#xff0c;这个假期是开启探索IT世界的绝佳时机。 不知道这些有志于踏入IT领域的高考少年们&…
阅读更多...
即时通讯平台项目测试（主页面）

即时通讯平台项目测试（主页面）

http://8.130.98.211:8080/login.html项目访问地址&#xff1a;即时通讯平台http://8.130.98.211:8080/login.html 本篇文章进行项目主页面的测试。 在测试前需要先对待测内容进行分类&#xff0c;按照功能进行分类可以分为&#xff1a;个人信息设置、发送/接收消息、添加好友…
阅读更多...
Shell：一行命令如何实现采集某一进程一段时间内CPU使用率

Shell：一行命令如何实现采集某一进程一段时间内CPU使用率

首先&#xff0c;能想到使用top查看进程的CPU使用率&#xff0c;以java进程编号251346为例进行介绍 top -d 1 -p 251346 -d 表示每秒采集一次 CPU使用率是显示出来了&#xff0c;但这样只能在屏幕上原地刷新&#xff0c;我们希望能把数据每时每刻的数据都保存下来&#xff0c;…
阅读更多...
凌风云 - 十大网盘资源搜索 Ver 6.0 版正式上线

凌风云 - 十大网盘资源搜索 Ver 6.0 版正式上线

《凌风云》作为网盘资源专业搜索领域的佼佼者&#xff0c;汇聚了国内十大网盘的丰富资源&#xff0c;凌风云搜索弥补其他搜索引擎可能无法搜索到相关资源的缺陷&#xff0c;作为专业的搜索引擎服务网络平台&#xff0c;您只需输入关键词&#xff0c;通过智能算法精准匹配&#…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023