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

手撸俄罗斯方块

简单介绍

《俄罗斯方块》（俄语：Тетрис，英语：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

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

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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

结束休刊博客真·vlog | 顺便说一下500粉的事

结束休刊博客真·vlog | 顺便说一下500粉的事

啊&#xff0c;首先是信 ♥亲爱的读者们&#xff0c; 在这个充满数字韵律与代码奇迹的时空里&#xff0c;我满怀激动与感激的心情&#xff0c;提笔写下这封信&#xff0c;宣布一个令人振奋的消息——经过一段时间的休整与充电&#xff0c;我终于要结束这段宝贵的休刊时光&…
阅读更多...
【堆 优先队列】1354. 多次求和构造目标数组

【堆 优先队列】1354. 多次求和构造目标数组

本文涉及知识点 堆 优先队列 LeetCode1354. 多次求和构造目标数组 给你一个整数数组 target 。一开始&#xff0c;你有一个数组 A &#xff0c;它的所有元素均为 1 &#xff0c;你可以执行以下操作&#xff1a; 令 x 为你数组里所有元素的和 选择满足 0 < i < target.…
阅读更多...
JDBC编程的学习——MYsql版本

JDBC编程的学习——MYsql版本

目录 前言 什么是JDBC ??? 前置准备 使用JDBC的五个关键步骤 1.建立与数据库的连接 2.创建具体的sql语句和Statement 3.执行SQL语句 4.处理结果集 5.释放资源 完整流程展示 前言 笔者在先前的博客就提过会写关于JDBC的内容 [Mysql] 的基础知识和sql 语句.教你速成…
阅读更多...
Security认证要点速记

Security认证要点速记

登录校验流程 springSecurity已经为我们默认实现了一个用不着的登录功能&#xff0c;我们需要自己实现个符合我们需求的登录功能&#xff0c;所以我们需要去了解默认登录功能的流程&#xff0c;对其中的部分进行替换 SpringSecurity底层就是过滤器链&#xff0c;包含实现了各种…
阅读更多...
（自用）多进程与信号

（自用）多进程与信号

程序和进程 程序≠进程 产生进程 创建进程——fork函数 函数原型 #include <unistd.h> pid_t fork(void); 函数功能: fork函数的功能是创建一个与当前进程几乎完全相同的子进程。这个“几乎完全相同”指的是子进程会复制父进程的代码段、数据段、BSS段、堆、栈等所…
阅读更多...
dledger原理源码分析(四)-日志

dledger原理源码分析(四)-日志

简介 dledger是openmessaging的一个组件&#xff0c; raft算法实现&#xff0c;用于分布式日志&#xff0c;本系列分析dledger如何实现raft概念&#xff0c;以及dledger在rocketmq的应用 本系列使用dledger v0.40 本文分析dledger的日志&#xff0c;包括写入&#xff0c;复制…
阅读更多...
esp32硬件电路设计

esp32硬件电路设计

ESP-IDF 入门指南 | 乐鑫科技 (espressif.com) ESP32-DevKitC V4 入门指南 - ESP32 - — ESP-IDF 编程指南 v5.1 文档 (espressif.com)
阅读更多...
看惯了黑黝黝的大屏风格再来看浅色系的大屏，很漂亮很个性

看惯了黑黝黝的大屏风格再来看浅色系的大屏，很漂亮很个性

**看惯了黑黝黝的大屏风格&#xff0c;再来看浅色系的大屏&#xff0c;很漂亮很个性** 在科技产品的世界里&#xff0c;大屏设计一直以其沉浸感和视觉冲击力占据着一席之地。然而&#xff0c;当我们长时间沉浸在那些深邃、沉稳的黑黝黝大屏中时&#xff0c;是否曾想过换一种风…
阅读更多...
VBA即用型代码手册：根据预定义的文本条件删除行

VBA即用型代码手册：根据预定义的文本条件删除行

我给VBA下的定义&#xff1a;VBA是个人小型自动化处理的有效工具。可以大大提高自己的劳动效率&#xff0c;而且可以提高数据的准确性。我这里专注VBA,将我多年的经验汇集在VBA系列九套教程中。 作为我的学员要利用我的积木编程思想&#xff0c;积木编程最重要的是积木如何搭建…
阅读更多...
uni-app三部曲之三： 路由拦截

uni-app三部曲之三： 路由拦截

1.引言 路由拦截&#xff0c;个人理解就是在页面跳转的时候&#xff0c;增加一级拦截器&#xff0c;实现一些自定义的功能&#xff0c;其中最重要的就是判断跳转的页面是否需要登录后查看&#xff0c;如果需要登录后查看且此时系统并未登录&#xff0c;就需要跳转到登录页&…
阅读更多...
电子电气架构 --- 智能座舱万物互联

电子电气架构 --- 智能座舱万物互联

我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师。 老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师： 屏蔽力是信息过载时代一个人的特殊竞争力，任何消耗你的人和事，多看一眼都是你的不对。非必要不费力证明自己，无利益不试图说服别人，是精神上的节…
阅读更多...
windows防火墙端口设置

windows防火墙端口设置

PS&#xff1a;本文实例为Windows Server 2019&#xff0c;其他Windows版本大同小异。 1、首先打开windows防火墙&#xff0c;点击“高级设置” 2、 高级设置界面 3、假设需要开放一个端口为3306应该怎么做 光标对准“入站规则”右键新建规则&#xff0c;选择“端口” 协议这…
阅读更多...
【UE5.1 角色练习】16-枪械射击——瞄准

【UE5.1 角色练习】16-枪械射击——瞄准

目录 效果 步骤 一、瞄准时拉近摄像机位置 二、瞄准偏移 三、向指定方向射击 四、连发 效果 步骤 一、瞄准时拉近摄像机位置 打开角色蓝图&#xff0c;在事件图表中添加如下节点&#xff0c;当进入射击状态时设置目标臂长度为300&#xff0c;从而拉近视角。 但是这样切…
阅读更多...
Android 通知访问权限

Android 通知访问权限

问题背景 客户反馈手机扫描三方运动手表&#xff0c;下载app安装后&#xff0c;通知访问权限打不开。 点击提示“受限设置” “出于安全考虑&#xff0c;此设置目前不可用”。 问题分析 1、setting界面搜“授予通知访问权限”&#xff0c;此按钮灰色不可点击&#xff0c;点…
阅读更多...
C++基础篇（1）

C++基础篇（1）

目录 前言 1.第一个C程序 2.命名空间 2.1概念理解 2.2namespace 的价值 2.3 namespace的定义 3.命名空间的使用 4.C的输入输出 结束语 前言 本节我们将正式进入C基础的学习&#xff0c;话不多说&#xff0c;直接上货&#xff01;&#xff01;&#xff01; 1.第一个C程…
阅读更多...
JAVA分布式事务详情分布式事务的解决方案Java中的分布式事务实现

JAVA分布式事务详情分布式事务的解决方案Java中的分布式事务实现

本人详解 作者：王文峰，参加过 CSDN 2020年度博客之星，《Java王大师王天师》 公众号：JAVA开发王大师，专注于天道酬勤的 Java 开发问题中国国学、传统文化和代码爱好者的程序人生，期待你的关注和支持！本人外号：神秘小峯 山峯 转载说明：务必注明来源（注明：作者：王文峰…
阅读更多...
关于Python中的字典你所不知道的七个技巧

关于Python中的字典你所不知道的七个技巧

01 引言 Python是我最喜欢的编程语言之一&#xff0c;它向来以其简单性、多功能性和可读性而闻名。 字典作为Python中最常使用的数据类型&#xff0c;大家几乎每个人都或多或少在项目中使用过字典&#xff0c;但是字典里有一些潜在的技巧可能并不是每个同学都会用到。 在本文…
阅读更多...
院内导航：如何用科技破解就医找路难题

院内导航：如何用科技破解就医找路难题

自2019年开始“院内导航”被纳入医院智慧服务评估体系以来&#xff0c;到2023年改善就医服务升级的部署&#xff0c;每一步都见证了我国医疗卫生体系向智能化、人性化迈进的坚实步伐。 面对庞大复杂的医院环境与日益增长的就诊需求&#xff0c;如何让患者在茫茫人海中迅速找到就…
阅读更多...
31_JQuery一文读懂，JS的升级版

31_JQuery一文读懂，JS的升级版

今日内容 零、 复习昨日 一、JQuery 零、 复习昨日 1 js数组的特点(长度,类型,方法) - js数组的长度不限 - 类型不限 - 提供很多方法2 js中和的区别 - 判断数值相等 - 判断数值和数据类型同时相等3 js表单事件的事件名(事件属性单词) - 获得焦点 onfocus - 失去焦点 onblur …
阅读更多...
干货：XXX智慧城市大数据共享交换平台建设方案(145页word)

干货：XXX智慧城市大数据共享交换平台建设方案(145页word)

引言&#xff1a;智慧城市大数据共享交换平台建设方案旨在构建一个高效、安全、可扩展的数据共享与交换生态系统&#xff0c;以促进城市内不同部门、机构及企业间的数据互联互通&#xff0c;推动数据资源的深度整合与利用&#xff0c;加速智慧城市建设进程。 方案介绍&#xff…
阅读更多...
最新文章

Copyright @ 2022~2023